2017/8/7-2017/8/13 周结

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)