一种是用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]
})
网友评论