ES6

题目

ES6模块化如何使用，开发环境如何打包。

  • 语法：import export

  • 环境：babel， webpak，rollup

    Class和普通的构造函数有何区别

  • Class在语法上更加贴合面向对象的写法

  • Class实现集成更加一度，易理解
  • 更抑郁java等后端语言的使用

  • 本质还是语法糖，使用prototype

    Promise的基本使用和原理

  • new Promsie() 要return

  • new Promsie()时要传入函数，函数有resolve，reject两个参数
  • 成功时执行resolve() 失败时执行reject()

  • then监听结果

    ES6常用功能

  • let/const

  • 多行字符串/模板变量
  • 快儿级作用域
  • 函数默认参数
  • 尖头函数

ES6模块化

模块化基本语法

  • export语法

  • import语法

    开发环境配置babel

  • node npm init

  • npm i -D babel-core babel-core babel-preset-es2015 babel-preset-latest

  • 创建.babelrc文件

    webpack

    rollup

  • vue、react都死使用rollup进行打包的

  • 特点
    • 尽量简化输出的内容大小

使用：

  • npm init
  • npm i rollup rollup-plugin-node-resolve rollup-plgin-babel babel-plugin-external-helpers babel-preset-latest -D
  • 配置.babellrc
  • 配置rollup.config.js

区别：

  • rollup功能单一，webpack功能强大。
  • 工具要尽量功能单一，可集成，可扩展。
  • 比如可以用gulp+rollup构建工具库

关于JS众多模块化标准

  • 没有模块化
  • AMD成为标准，require.js （也有cmd）
  • 前端打包工具，使得nodejs模块化可以被使用
  • Es6出现，想统一现在所有模块化标准
  • nodejs积极支持，浏览器尚未统一
  • 可以自造lib，但不要自造标注

class和普通构造函数区别

JS构造函数

Class基本语法

语法糖

  1. class MathHandle{
  2. // ...
  3. }
  5. typeof MathHandle // "function"
  6. MathHandle === MathHandle.prototype.constructor    // true
  7. mathhandle.__proto__ === Mathhandle.propertype //true

集成

Promise的基本使用

目的：干掉callback Hell

原型

重点：原型的实际应用，比如zepto是怎么使用原型的

题目

说一个原型的实际应用

  1. (function(window){
  2.     var zepto={}
  4.   function Z(dom,selector){
  5.       var i ,len=dom?dom.length:0
  6.     for (i=0;i<len;i++){
  7.     this[i]=dom[i]
  8.     }
  9.     this.length=len
  10.     this.slector=selctor||''
  11.   }
  13. zepto.Z=function(dom,selector){
  15. }
  18. zepto.init=function(selector){
  19.     var slice=Array.prototype.slice
  20.   var dom = slice.call(document.querySelectorAll(selector))
  21.   return zepto.Z(dom,selector)
  22. } 
  24.   var $=function(selector){
  25.       return zepto.init(selector)
  26.   }
  28.   window.$=$
  29.   $.fn={
  30.       css:function(key,value){
  31.     },
  32.     html:function(){
  33.     }
  34.   }
  35.   Z.prototype=$.fn
  36. })(window)
  1. (funciton (window){
  2.  var jQuery=function(selector){
  3.   return new jQuery.fn.init(selector)
  4. }
  6. jQuery.fn={
  7.     css:function(){
  9.   },
  10.   html:functin(){
  12.     }
  13. }
  15. var init=jQuery.fn.init=funciton(selector){
  16.     var slice=Array.prototype.slice
  17.   var dom=slice.call(document.queryselctorAll(selector))
  18.   var i,len=dom?dom.length:0
  19.   for(i=0;i<len;i++){
  20.   this[i]=dom[i]
  21.   }
  22.   this.length=len;
  23.   this.slector=selector||''
  24. }
  25. init.prototype=jQuery.fn
  26.  })(window)

原型如何体现他的扩展性

异步

题目

什么是单线程，和异步有什么关系

  • 单线程：同时只能做一件事情，两端JS不可以同时执行
  • 原因为了避免DOM渲染冲突

  • 异步是一种“无奈”的解决方案，虽然有问题

    什么是eventloop

  • 事件轮询，JS异步的解决方案

  • 是么是异步队列，何时被放入异步队列

  • 轮询的过程

    jQuery的Deferred

  • jQuery1.5对ajax的改变举例

  • 简单封装，使用Deferred

  • promise和Deferred的区别

    • promise只能监听没办法修改

      Promsie的基本使用和原理

  • 基本语法

  • 如何捕获异常
  • 多个串联-链式执行的好处
  • Promise.all和Promise.race

  • Promise标准-状态变化，then函数

    介绍一下async/await(和Promise的区别、联系)

  • 基本语法

  • 使用了Promise，并没有和Promise冲突。
  • 完美的同步写法，再也没有回调函数。

  • 但是改变不了JS异步单线程的本质。

    总结当前JS异步解决方案

  • jQuery Deferred

  • Promise
  • Async/Await
  • Generator
    • 原理比较复杂，学习成本高，调试成本，线上风险
    • 不是异步的直接替代方式
    • 有更好的解决方案async/await

单线程

单线程：只有一个线程，同一时间只能做一个事情

  • 循环运行期间，JS执行和DOM渲染时卡顿，（1e9 次可能会卡死）

  • alert不处理，JS执行和DOM渲染暂时卡顿

    原因：避免DOM渲染的冲突

  • 浏览器需要渲染DOM

  • JS可以修改DOM结构
  • JS执行的时候，浏览器渲染DOM会暂停
  • 两段JS不能同时执行（都修改DOM就冲突了）
  • webworker支持多线程，但是不呢个访问DOM

js本身执行是单线程，并于浏览器渲染线程共用一个线程。

解决方案：异步

  1. console.log(100)
  2. setTimeout(funciton(){
  3.     console.log(200)    // 1000ms之后执行，先不管它，先执行其他JS代码运行
  4. },1000)
  5. console.log(300)
  6. console.log(400)
  7. // 比如ajax加载完才执行，先不管他，先运行其他JS代码

JS异步和谐高效的解决方案

问题

  1. 未按照书写顺序执行，可读性差。
  2. callback中不容易模块化

什么是event-loop

  • 单线程：同一时间制作一件事
  • 原因：避免DOM渲染冲突
  • 解决方案：异步
  • 实现方式event-loop（时间轮询），JS实现异步的具体解决方案。

event-loop

  • 同步代码，直接执行。
  • 异步函数放在异步队列中
  • 待同步函数执行完毕，轮询执行异步队列的函数。 ```javascript $.ajax({ url:’xx’, success:funciton(){
    1.   // ajax加载完成才被放入异步队列
    } }) setTimeout(function() {
    console.log(1) },100) setTimeout(function() { console.log(2) }) console.log(3)

// 立刻放入 function() { console.log(2) } // 100ms后放入 function() {
console.log(1) }

// js会一致轮询异步队列，如果有就执行

  1. setTimeout是多少时间之后再放入
  3. <a name="HvMxr"></a>
  4. ##### 回顾
  6. - 事件轮询，JS实现异步的具体解决方案。
  7. - 同步代码，直接在主进程中直接执行。
  8. - 异步函数，放在异步队列中，有延迟的，等待延迟结束才放入，有ajax的是等待ajaxa加载完成之后才放到异步队列中。
  9. - 待同步函数执行完成，轮询执行异步队列的函数。
  11. <a name="wTjOg"></a>
  12. ### jQuery Deferred
  13. <a name="YKSQW"></a>
  14. #### jQuery1.5的变化
  16. - 1.5之前，是传递回调函数
  17. - 1.5之后
  18. ```javascript
  19. var ajax=$.ajax('xxx.json');
  20. ajax.done(function(){
  21.     console.log('success1')
  22. })
  23. .fail(function(){
  24.     console.log('error')
  25. })
  26. .done(function(){
  27.     console.log('success2')
  28. })
  29. console.log(ajax)    // 是一个Deferred对象
  • 无法改变JS异步和单线程的本质
  • 只能从写法上杜绝callback这种代码形式
  • 它是一种语法糖，但是解耦了代码
  • 很好的体验：开放封闭原则。

    使用jQuery Deferred

    1. ajax.then(funciton(){
    2.   console.log('success1')      
    3. },function(){
    4. console.log('fail1')    
    5. }).then(funciton(){
    6.     console.log('success2')         
    7. },function(){
    8.   console.log('fail2')   
    9. })
    ```javascript // 给出一段非常简单的异步操作代码，使用setTimeout var wait= function (){ var task=function(){
    1. console.log('执行完成')
    } setTimeout(task,2000) }

wait()

// 新增，在执行完之后进行某些特别复杂的操作，代码可能会有很多，而且要分好几个步骤，

  1. ```javascript
  2. funciton waitHandler(){
  3.     var dtd=$.Deferred()
  4.   var wait= function (dtd){        // 要求传入一个deferred对象
  5.     var task=function(){
  6.       console.log('执行完成')
  7.       dtd.resolve()    // 异步任务已经完成
  8.       // dtd.reject()    // 异步任务失败或出错
  9.     }
  10.     setTimeout(task,2000)
  11.     return dtd // 要求返回一个deferred对象
  12.   }
  13.   return wait(dtd)
  14. }
  16. var w= waitHandler()
  17. w.then(function(){
  19. },function(){
  21. }).then(function(){
  23. },function(){
  25. })
  27. 会err1，ok2
  28. //还有w.done w.fail。

总结

  • dtd的API分成两类
    • 第一类：dtd.resolve dtd.reject【主动触发】
    • 第二类：dtd.then dtd.done dtd.fail 【被动监听】(第一类第二类是混在一起的)

      初步引入Promise概念

Promise基本使用和原理

result1.then(function(img){ console.log(‘第一个图片加载万层’) return result2 }).then(function(img){ console.log(“第二个图片加载完成”) }).catch(()=>{

})

  1. <a name="ZaTyu"></a>
  2. #### Promise.all和Promise.race
  3. <a name="XVb72"></a>
  4. #### Promise标准
  6. - 状态变化
  7.    - 三种状态：pending fulfilled rejected
  8.    - 初始状态时pending
  9.    - pending变为fulfilled或者pending变成rejected
  10.    - 状态变化不可逆
  11. - promise实例必须实现then方法
  12. - then()方法必须接受两个函数作为参数
  13. - then()方法返回的必须是一个Promsie实例。
  16. 如果then里没有return
  17. ```javascript
  18. var result=loadImg(src)
  19. result.then(function(img){
  20.     console.log(img.width) // 没有return，返回的就是本身
  21. }).then(function(img){
  22.     console.log(img.height)
  23. })

介绍async/await

用了Promise的特性做了改进

then只是将callback拆分了

本质上还是callback的写法

  1. var w = waitHandler()
  2. w.then(function(){
  3.     console.log('ok1');
  4. },function(){
  5.     console.log('err1')
  6. }).then(function(){
  7.     console.log('ok2');
  8. },function(){
  9.     console.log('err2')
  10. })
  1. const load=async function(){
  2.     const result1=await loadImg(src1)
  3.   console.log(result1)
  4.   const result2=await loadImg(src2)
  5.   console.log(result2)
  6. }

asyn/await是最直接的同步写法

  • 使用await，函数必须用async标识
  • await后面跟的是一个Promise实例
  • 需要babel-polyfill