JavaScript
1. js中的eventLoop
reference:js的事件模型
JS引擎会把所有任务分成两类:
* macroTask: setTimeout,setIntervel,setImmediate,requestAnimationFrame,I/O,UI rendering
* microTask: process.nextTic,Promise(),MutationObserver
特别需要注意的是Promise,
setTimeout(function(){
console.log("first time")
new Promise(function(resolve,reject){
console.log("promise");//注意此处的promise的executor里面的代码是同步执行的,在macroTask里面,而then里面的代码在microTask里面,
setTimeout(function(){
console.log("it is first timeout");
resolve("third");
},1000)
}).then((data)=>{
console.log(data);
})
},0);
setTimeout(function(){
console.log("it is second timeout");
},1000);
first time
promise
it is second timeout
it is first timeout
third
2. 原生JS进行DOM节点操作-遍历,删除,增加
- 获得一个节点的类型node.nodeType == 1 元素节点node.nodeType ==3文本节点
- 节点之间的关系
- 获得一个记得点的所有子元素node.childNodes,返回的是一个nodeList,可以通过Array.prototype.slice.call(node.childNodes)转换成一个数组对象
- 增加:appendChild(newNode),insertBefore(newNode,referenceNode)
- 删除:removeChild(node)
- 替换:replaceChild(newNode,replacedNode)
- 复制:cloneNode() 不是cloneChild
ES6
1. es6 - let const
- 需要特别注意在for循环中的let变量
ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错
{
console.log(tmp) //tmp is not defined
let tmp='tmp'
}
- let 相当于是为es6新增了块级作用域,那么此时javascript中总共有三种作用域:全局作用域,函数作用域和块级作用域
- 在浏览器中和web worker中,self都指向顶层对象,但是浏览器中,顶层对象是window,但在web worker中却不是,那么web worker中的顶层对象是啥?
FrameWork
1. Vue的生命周期
beforeCreate –> created –> beforeMount –>mounted –>beforeUpdate –>updated –> beforeDestroy –> destroyed
* 需要注意的是在created的时候,所有的data,prop都能够获取了,此时的computed和watch都已生效
2. prop的单项流动
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。
为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因:
prop 作为初始值传入后,子组件想把它当作局部数据来用;
prop 作为初始值传入,由子组件处理成其它数据输出。
对这两种原因,正确的应对方式是:
定义一个局部变量,并用 prop 的值初始化它:
props: [‘initialCounter’],
data: function () {
return { counter: this.initialCounter }
}
定义一个计算属性,处理 prop 的值并返回。
props: [‘size’],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。
Browsers
1. 浏览器引擎-js引擎,渲染引擎
- 最著名的js引擎是v8
- 渲染引擎:Khtml,Gecko(mozilla),APPWEBKIT(apple,改进的Khtml)