前端和Node学习笔记

3

如何创建一个“纯净”的对象

JS菌 1 天前发布
3 收藏

假设 Object 的原型中有一个自定义的 log 属性，我们用字面量语法定义 obj 对象，那么使用 for-in 遍历方法就会遍历到这个 log 对象，为了只遍历其自身的属性，需要增加一层筛选

4

Vue 匿名、具名和作用域插槽的使用

JS菌 1 天前发布
3 收藏

Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用，这篇文章简明扼要的介绍了三种插槽的用法。 🍉

6

自定义 Vue 中的 v-model 双向绑定

JS菌 4 天前发布
3 收藏

v-model 双向绑定实际上就是通过子组件中的 $emit 方法派发 input 事件，父组件监听 input 事件中传递的 value 值，并存储在父组件 data 中；然后父组件再通过 prop 的形式传递给子组件 value 值，再子组件中绑定...

30

Vue 组件间通信方法汇总

JS菌 4 天前发布
25 收藏

除了使用 Vuex 方法外，vue 提供了各种各样的组件间通信的方案。文章整理一下父子组件、兄弟组件、祖先后代组件间是如何通信的。 💬

6

解析 CSS 格式化上下文

JS菌 5 天前发布
5 收藏

BFC(Block Formatting Contexts)，块级格式化上下文。BFC 实际上就是页面中一块渲染区域，该区域与其他区域隔离开来。容器里面子元素不会影响到外部，外部的元素也不会影响到容器里面的子元素。 🦊

14

梳理下常见的不冒泡事件

JS菌 6 天前发布
13 收藏

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌订阅梳理下常见的不冒泡事件 UI 事件 load 异步不冒泡 ❌ unload 不冒泡 ❌ abort 不冒泡 ❌ error 异步不冒泡 ❌ select load、unload 这些资源加载的事件不冒牌也是...

14

整理获取 viewport 和 element 尺寸和位置方法

JS菌 4月14日发布
8 收藏

width + padding + border + 滚动条另外 outerWidth 浏览器兼容差，可获取包括工具栏的宽高

4

🦈 如何用 wireshark 抓包 TLS 封包

JS菌 4月2日发布
3 收藏

此前一篇文章用 wireshark 这个抓包工具调试了一下 HTTP 请求和响应。详细阐述了 TCP 连接和断开的整个过程。这篇文章尝试使用 wireshark 来抓取 TLS 封包，了解一下 HTTPS 请求和响应的整个过程。 🌞

23

如何检查一个对象是否为空

JS菌 4月1日发布
16 收藏

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌订阅检查一个数组为空很容易，直接调用 length 方法即可，那么如何检查一个对象是否为空呢 ❓ 这里的空指的是对象没有自有属性假设这里有两个对象，一个是 obj 一个...

3

🔗 抓包分析 TCP 建立和断开连接的流程

JS菌 3月31日发布
1 收藏

HTTP 协议是基于 TCP 协议的。大家都知道发送 HTTP 报文需要首先建立客户端和服务端之间的 TCP 连接。TCP 三次握手建立连接，四次挥手断开连接，再熟悉不过。本文实践一下 TCP 建立和断开的整个流程，并通过抓包...

5

如何使用异步剪切板 AsyncClipboard API

JS菌 3月30日发布
4 收藏

长时间我们一直在使用 document.execCommand 来与剪切板做交互，尤其是基本上都在使用 clipboard.js 这个库，其基本原理也是插入 DOM 树中一个隐藏的 textarea 元素，然后将要复制的文本写入到 textarea 元素中，...

41

🔒 CSP——前端安全第一道防线

JS菌 3月30日发布
28 收藏

内容安全策略的主要作用就是尽量降低网站遭受 XSS 跨站脚本攻击的可能。浏览器没办法区分要执行的代码是否为页面本身的还是恶意注入的，XSS 就是利用这一点对网站进行攻击。 🙁

6

Node 引入 ESM 新方案

JS菌 3月29日发布
3 收藏

2019年3月29日目前，Node 对 ES6 Module 的支持又有新进展。一个新的 PR 更新了当前 --experimental-modules 的实现方案。

16

💳 你可能还不知道的 Web 支付流程标准化

JS菌 3月27日发布
9 收藏

PaymentRequest API 是一种跨浏览器的标准 API，主要的目的是以浏览器充当中介，尽可能标准化支付通信的流程。 💳

3

Permission API 统一查询权限状态

JS菌 3月26日发布
3 收藏

Permission API 不是一个新的标准，早在 2015 年，就已经成为标准。这个 API 的主要作用就是提供一个统一的查询 API 权限的接口。 😌

4

🍉 PWA 系列（三）——IndexedDB

JS菌 3月26日发布
4 收藏

然后是创建数据库 store 对象仓库 📂 需要注意更新数据库版本应先调用 close 方法关闭旧版数据库

13

🍉 PWA系列——Fetch API

JS菌 3月24日发布
8 收藏

今天聊聊 xhr 的替代品 Fetch，在全局作用域中有个 fetch 方法方便使用。虽然同样也是处理 HTTP 请求和响应的，但 fetch 有两个不同之处，一个是收到错误的 HTTP 状态码时，fetch 方法返回的 Promise 不会被 reje...

14

🍉 PWA 系列（一）——Cache API

JS菌 3月24日发布
8 收藏

PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。

13

浏览器画中画模式初窥

JS菌 3月23日发布
12 收藏

浏览器画中画功能允许用户在一个小的叠加窗口中弹出网页中播放的视频 🎥，Chrome 版本大于 71 均默认开启该功能。下面简单介绍一下该 API 如何使用 📖

11

[译]使用 JavaScript 对象 Rest 和 Spread 的7个技巧

JS菌 3月22日发布
6 收藏

原文标题：7 Tricks with Resting and Spreading JavaScript Objects