一、ES6

1、模块化

ES6通过export和import实现模块化

ES6的模块化的基本规则或特点， 欢迎补充：

　　　　1：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；

　　　　2：每一个模块内声明的变量都是局部变量， 不会污染全局作用域；

　　　　3：模块内部的变量或者函数可以通过export导出；

　　　　4：一个模块可以导入别的模块

例子：

1 //  util1.js 2 export default{ 3   a: 100 // export default 4 } 5  6 // util2.js 7 export function fn1(){ 8    console.log('fn1') 9 }10 export function fn2(){11    console.log('fn2')12 }13 14 // index.js15 import util from './util.js'16 import {fn1,fn2} from './util2.js'

 2、编译方法，把es6编译成es5

都是用的babel这个东西

第一种方法：babel（简单的直接用babel）

cmd安装babel-cli，用于在终端使用babel

npm install -g babel-cli

安装babel-core babel-preset-es2015 babel-preser-latest

npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest

通过 babel --version来判断babel版本

想要编译某个js，可以执行下面的代码

babel index.js -o babel1.js

 3、使用webpack进行编译

4、使用rollup编译

5、export和export default的区别

在一个文件中，export和import可以用多个    

1 //demo1.js2 export const str = 'hello world'3 4 export function f(a){5     return a+16 }

对应的导入方式

1 //demo2.js2 import { str, f } from 'demo1' //也可以分开写两次，导入的时候带花括号

1 //demo1.js2 export default const str = 'hello world'

对应的导入方式

1 //demo2.js2 import str from 'demo1' //导入的时候没有花括号

export default本质上是输出一个叫default的变量

export default str = str编译以后是exports.default

export function ss() {
     console.log('ss') } export function aa() {
     console.log('aa') } 编译以后是

exports.ss = ss; exports.aa = aa;

 二、class

对比下面俩组代码

1 function Ttest(x,y) { 2   this.x = x; 3   this.y = y; 4 } 5 Ttest.prototype.adds = function () { 6    return this.x + this.y 7 } 8 var m =new Ttest(1,2) 9 console.log(m.adds())10 console.log('类型是什么：'+typeof Ttest)11 console.log(Ttest === Ttest.prototype.constructor)12 console.log(m.__proto__===Ttest.prototype)

1 class MathHandle{ 2   constructor(x,y){ 3     this.x=x; 4     this.y=y; 5   } 6   add(){ 7     return this.x+this.y 8   } 9 }10 console.log('类型是什么：'+typeof MathHandle)11 console.log(MathHandle === MathHandle.prototype.constructor)12 const m = new MathHandle(1,2);13 console.log(m.add())

上面俩组的代码对比可以知道：class就是一个语法糖，本质还是function

 

ES6里面的class和js构造函数的区别？

 三、promise

     先来个例子，用callback实现

1 function LoadImg(src, callback, fail) { 2   var img = document.createElement('img') 3   img.onload = function () { 4     callback(img) 5   } 6   img.onerror = function () { 7     fail() 8   } 9   img.src = src10 }11 var src = ''12 LoadImg(src,function (img) {13   console.log(img.width)14 },function () {15   console.log('failed')16 })

用promise实现

1 function LoadImg(src) { 2   const promise = new Promise(function (resolve, reject) { 3     var img = document.createElement('img') 4     img.onload = function () { 5       resolve(img) 6     } 7     img.onerror = function () { 8       reject() 9     }10     img.src = src11   })12   return promise13 }14 var src = 'http://www.imooc.com/static/img/index/logo_new.png'15 var result = LoadImg(src)16 result.then(function (img) {17   console.log(img.width)18 },function () {19   console.log('failed')20 })21 result.then(function (img) {22   console.log(img.height)23 })

Promise语法

 四、箭头函数

看上面的例子：箭头函数是普通function的补充，不是所有地方都适用箭头函数，上面的例子告诉我们，箭头函数最大的意义是，this指向了函数体外面最近一层，普通函数指向的是window

 

五、单线程

 

 

单线程的解决方案之一：异步，但是它有个问题

 

 

 

 jquery的deferred

上面这俩种方式，要比常用的ajax好很多

当新加方法的时候，不用修改已有的方法

 

 

 

执行成功的时候，进入then，出现了错误，统一进入catch

例子：

1  2  3  4   
      5   
      6    7   
      8  9 10    11    36 37 

上面的解释：onerror里的错误，会进入到catch，这可以表明，使用catch的时候，就不需要在then写第二个参数了，只要出现错误，都会进入到catch里面

第一个result1执行完后，返回result2的promise实例，执行后面的then（如果有第三个，就在后面加一个）

实际效用：第一个请求获取的数据，作为第二个请求的参数

 

 

 总结：