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
2017/8/7-2017/8/13 周结_第1张图片

特别需要注意的是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文本节点
  • 节点之间的关系
    2017/8/7-2017/8/13 周结_第2张图片
  • 获得一个记得点的所有子元素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)

你可能感兴趣的:(周结)