目录
(一)同步和异步
同步:如果每件事情按照顺序依次进行就是同步。
异步:如果多件事情可以同时进行即异步
异步编程工作原理
JavaScript中的异步编程
异步编程: 一次性搞懂 Promise, async, await (#js #javascript)_哔哩哔哩_bilibili
1.回调函数算是异步编程
2.所有的事件绑定是异步编程 :x.onclick = function(){};
3.所有的定时器都是异步编程
4.AJAX中一般都使用异步编程处理
执行栈同步代码块依次执行完直到遇见异步任务时,异步任务进入等待状态(放到任务等待队列),通知线程,往消息队列插入一条事件消息;而当执行栈后续同步代码执行完后,读取消息队列,得到一条消息,然后将该消息对应的异步任务入栈,执行回调函数;一次事件循环就完成了,也即处理了一个异步任务。
异步任务分宏任务、微任务,微任务先执行,宏任务后执行
同步任务>微任务>宏任务
回调函数 (callback)
回调函数就是一个通过函数指针调用的函数。如果把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。
water(function(){
cup(function(){
tea(function(){
})
})
})
function water(callback){
setTimeout(()=>{
console.log("1:烧水");
callback();
},1000);
}
function cup(callback){
setTimeout(()=>{
console.log("2:洗杯子");
callback();
},500);
}
function tea(callback){
setTimeout(()=>{
console.log("3:放茶叶泡茶");
callback();
},500);
}
Promise(重要)
promise 是一个拥有 then 方法的对象或函数。
一个 promise 有三种状态:pending(等待中), rejected(拒绝了), resolved (完成了),状态一旦确定就不能改变(单向不可逆),且只能够由 pending 状态变成 rejected 或者 resolved 状态,rejected 和 resolved 状态不能相互转换。 当 promise 执行成功时,调用 then 方法的第一个回调函数,失败时调用第 二个回调函数。Promise 实现了链式调用。
promise 实例会有一个 then 方法,这个 then 方法必须返回一个新的 promise。
Promise基本用法:
// 异步操作放在 Promise 构造器中
const promise = new Promise((resolve) => {
setTimeout(() => {
resolve('hello');
}, 1000);
});
// 得到异步结果之后的操作
promise.then(value => {
console.log(value, 'world');
}, error =>{
console.log(error, 'unhappy')
});
async / await
一个函数如果加上 Async ,那么该函数就会返回一个 Promise
Async语法:
async function name([param[, param[, ... param]]])
{ statements }
返回值
async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。
Await
await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。
语法:
[return_value] = await expression;(一个 Promise 对象或者任何要等待的值。)
返回值
返回 Promise 对象的处理结果。如果等待的不是 Promise 对象,则返回该值本身。
如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果。
function move(ele,length){
return new Promise((resolve,reject)=>{
let left = parseInt(window.getComputedStyle(ele).left);
let timer=setInterval(function (){
if (left<length){
left = left+2;
ele.style.left=left+'px';
}else{
clearInterval(timer);
resolve();
}
},4)
});
}
//调用
async function f(){
await move(b1,200);
await move(b2,400);
await move(b3,600);
}
f();
(二)模块化编程
1、什么是模块化与模块 ?
2、什么是模块化项目 ?
3、模块化好处
(三)模块暴露数据
1、可以通过下面的操作步骤,快速体验模块化
//声明函数
function tiemo(){
console.log('贴膜....');
}
//暴露数据
module.exports = tiemo;
//导入模块
const tiemo = require('./me.js');
//调用函数
tiemo();
2、模块暴露数据的方式有两种:
1. module.exports = value
module.exports={
value1,
value2,
value......}
![](https://i-blog.csdnimg.cn/blog_migrate/27d68a528dcd74646686f092fb24457f.png)
(四)导入(引入)模块
在模块中使用 require 传入文件路径即可引入文件
const test = require('./me.js');
1、require 使用的一些注意事项:
1. 对于自己创建的模块,导入时路径建议写 相对路径 ,且不能省略 ./ 和 ../
(五)导入模块的基本流程
这里我们介绍一下 require 导入 自定义模块 的基本流程
![](https://i-blog.csdnimg.cn/blog_migrate/852380d3672b65361046e96af4a064fe.png)