ES6和模块化开发

一种是用js的自执行函数形成闭包组成模块

function(代码块){
}()

一种是Comment.js语法

//a.js导出
exports.a(){
};

//b.js导入
const {a,b}  = require('路径')
a();
b();

一种是用ES6模块化导入导出

<script  src="a.js"   type="module">
//a.js
var te  = 12412;
var waf  = 35352;
function sum(a,b){  return a + b;}
export {
te,waf,sum
}
//b.js
import  {te,waf,sum}  from   '路径';
sum(100,200);//这边就可以调用了

导出类
//a.js
export class person{
   run(){
console.log('迅捷步伐');
}
}
//b.js
import {person}  from  "路径";
const p = new person();
p.run();

export default

某些情况下一个模块中包含的某个功能，我们并不希望给这个功能命名，而且让导入者可以自己命名

//a.js
export default  function(){
    console.log("发起进攻");
}
//b.js
import a from '路径';
a()

export default 在同一个模块中不允许存在多个，只能有一个

如果想统一全部导入a.js导出的变量

//b.js
import * as aaa from '路径';

aaa.te;
aaa.sum();

const a = (a,b)=>{  reture a+b }
const a = (a,b)=> a+b

ES6中this的引用的就是最近作用域中的this
它会向外层作用域中一层层查找this，直到有this定义

Promise

Promise到底是做什么的？
promise是异步编程的一种解决方案
那我们什么时候我们会来处理异步事件？
一种很常见的场景应该就是网络请求了
我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单地3+4=7一样将结果返回
所以我们往往会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去
所以当网络请求非常复杂的时候（例如嵌套ajax请求），就会出现回调地狱
一般情况下有异步操作时，使用Promise对这个异步操作进行封装

new Promise((resolve,reject)=>{
seTimeout((data)=>{
//成功的时候调用resolve
resolve(data)

//失败的时候
reject('err')

},1000)
}).then((data)=>{
//执行的代码
}).catch((err)=>{
console.log(err);
})

另一种形式

new Promise((resolve,reject)=>{
seTimeout((data)=>{
//成功的时候调用resolve
resolve(data)

//失败的时候
reject('err')
},1000)
}).then(data=>{
//执行的代码
},err=>{
console.log(err);
})

Promise三种状态

当我们开发中有异步操作的时候，就可以给异步操作包装一个Promise
异步操作之后会有三种状态：
pending：等待状态，比如何在呢个在进行网络请求，或者定时器没到时间
fulfill：满足状态，当我们主动调用了resolve时，就处于该状态，并且会回调.then()
reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调catch()

Promise的链式调用

new Promise((resolve,reject)=>{
seTimeout((data)=>{
//成功的时候调用resolve
resolve(data)

//失败的时候
reject('err')
},1000)
}).then((data)=>{
//执行的代码
return new Promise((resolve,reject)=>{
seTimeout((data)=>{
//成功的时候调用resolve
resolve(data)

//失败的时候
reject('err')
},1000).then(data=>{
//第二次执行的代码
})
})
})

new Promise(resolve => resolve(结果)) 简写

new Promise((resolve,reject)=>{
  seTimeout(() => {
      resolve('aaa')
    },1000)
}).then(res => {
  //1.自己处理10行代码
  console.log(res,'第一层的10行处理代码');

  //2.对结果进行第一次处理
  return Promise.resolve(res + '111')
}).then(res => {
  console.log(res,'第二层的10行处理代码');

  return Promise.resolve(res + '222')
}).then(res => {
  console.log(res,'第三层的10行处理代码');
})

省略掉Promise.resolve

new Promise((resolve,reject)=>{
  seTimeout(() => {
      resolve('aaa')
    },1000)
}).then(res => {
  //1.自己处理10行代码
  console.log(res,'第一层的10行处理代码');

  //2.对结果进行第一次处理
  return res + '111'
}).then(res => {
  console.log(res,'第二层的10行处理代码');

  return res + '222'
}).then(res => {
  console.log(res,'第三层的10行处理代码');

  //抛出异常
  throw 'err'
}).catch(err => {
  console.log(err);
})

Promise的all方法使用

Promise.all([
  new Promise((resolve,reject) => {
      $ajax({
        url:  'url1',
        success:function(data){
          resolve(data)
      }
    })
}),
  new Promise((resolve,reject) => {
      $ajax({
        url:  'url2',
        success:function(data){
          resolve(data)
      }
    })
  })
//上面两个请求都接受到了才会then
]).then(results => {
    results[0]
})