掘友等级
河南人在北京、读《纳瓦尔宝典》、学《Fullstack Notion Clone》
已读《如何有效阅读一本书》 获得徽章 0
在标签里写 Vue 插值表达式时,花括号补全时灵时不灵,简单定义一下 snippets 来直接输出插值表达式:
{
"Interpolation expression": {
"prefix": "ie",
"body": ["{{$0}}"],
"description": "插值表达式"
},
"Interpolation expression with spaces": {
"prefix": "ies",
"body": ["{{ $0 }}"],
"description": "带空格的插值表达式"
}
}
JavaScript 箭头函数总结:
- 箭头函数本身不会创建 `this`,只会从上级作用域(作用域链)继承 `this`
- 箭头函数的严格模式下,对于this 相关的规则会被忽略,也就是说不会影响其继承上级作用域的 `this`。
- 箭头函数不能作为 构造函数,也就是不能与 new 一起使用。
- 箭头函数调用 `bind`、`call`、`apply` 是,传入的 `this` 会被忽略。
- 箭头函数没有 原型 `prototype` 属性。
- 箭头函数没有绑定 arguments,如果在其中使用的话,则是来自上级作用域(函数作用域)的。
JavaScript 中的变量声明提升总结:
1. 函数声明:会提升,在当前作用域的任何区域都可访问
2. 函数表达式:不提升
3. var 变量:会提升,会被初始化为 undefined
4. let、const 变量:会提升,会被初始化为 uninitialized。提升到变量赋值之间的区域存在暂时性死区
5. class 声明:与 let、const 行为一致
6. class 表达式:与函数表达式行为一致
7. 块级作用域:对于 函数声明 和 var 变量 来说会提升,不仅是当前作用域,还有父级作用域:
7.1 在父级作用域中访问时,如果在代码块之前,皆为 undefined,代码块之后取决于代码块中对变量的操作
7.2 在当前作用域中访问时,与全局作用域和函数作用域一致
对于同名的函数声明与 var 变量,函数声明要优于 var 变量提升,var 变量被函数声明覆盖。
hi, guys, 这样说 “Vue2.x 双向数据绑定流程” 如何呢
所谓双向数据绑定,是指两个过程 “数据的改变去驱动DOM视图的变化”、“DOM 视图的变化去改变数据”。
1. 对于 “数据的改变去驱动DOM视图的变化”
Vue 中是借助 数据劫持 + 观察者模式 来实现的,在 Vue 初始化过程中,会通过 Object.defineProperty 重写 getter 和 setter 对数据进行劫持,同时让每个数据都持有一个 Dep 目标对象,接着在 DOM 挂载过程中,会实例化一个渲染 Watcher,同时会调用其 get 方法,进入到DOM渲染更新过程。 在模板渲染过程中,如果有访问到劫持的数据,则会触发其 getter 进行依赖收集,让当前的渲染 Watcher 去订阅其持有的 Dep 目标对象。如果修改了劫持的数据,则会触发其 setter 进行派发更新,让持有的 Dep 目标对象去通知所有订阅它的 watcher 执行 update 更新视图。
2. 对于 “DOM 视图的变化去改变数据”
Vue 是借助事件监听的方式实现的,在 patch 过程中的创建阶段和更新阶段都会使用 events 模块来处理编译阶段向 vnode data 中添加的 on 事件集合,调用 updateListeners 方法通过 addEventListener 为 vnode.elm 绑定事件。当事件触发时,调用事件回调更新数据。
明天4月4,快把公司网站变成黑白色!
<script>
(function () {
var body = document.body;
body.style['filter'] = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
if (!body.style['filter']) {
body.style['-webkit-filter'] = 'grayscale(1)';
body.style['filter'] = 'grayscale(1)';
}
}());
</script>
或者
<style>
body {
/* IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
/* Chrome, Safari */
-webkit-filter: grayscale(1);
/* Firefox */
filter: grayscale(1);
}
</style>