- 一、async
1.ES2017标准引入了async函数，是的异步操作变得更加方便。
2.async是Generator函数的语法糖
const asyncReadFile = async function(){
const f1 = await readFile('/etc/fstab');
const f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
// await类似于generator中的yield，await一般都是一个异步操作，在现实中，后面会加异步操作; 回调地域：f2的异步操作需要f1异步操作的结果
练习1
<script>
function beiliao() {
//logic
return new Promise(function (resolve, reject) {
console.log("开始备货，大约3秒中后完成：");
//3秒（3000毫秒）之后，执行resolve函数，第三个参数"mima"是resolve的参数哦！
setTimeout(resolve, 3000, "mima");
});
}
function quhuo(pwd) {
//logic
return new Promise(function (resolve, reject) {
if (pwd != "mima") {
//如果密码不正确，直接调用reject函数，表示失败
reject("pwd is wrong!!!!!")
} else {
console.log("开始出发取货，大约2秒后完成：");
setTimeout(resolve, 2000, "xxxxxxx");
}
});
}
function huomian(p) {
return new Promise(function (resolve, reject) {
console.log("开始和面，大约2.5秒后完成：");
setTimeout(resolve, 2500, "xxxxxxx");
});
}
function huoxian(p) {
return new Promise(function (resolve, reject) {
console.log("开始和馅，大约2秒后完成：");
setTimeout(resolve, 2000, "xxxxxxx");
});
}
function baojiaozi() {
return new Promise(function (resolve, reject) {
console.log("开始包饺子，大约2.5秒后完成：");
setTimeout(resolve, 2500, "60");
});
}
// 用async来解决异步问题，模拟一个dumpling包饺子的过程
async function dp() {
// 在async这种解决异步的方法里，我们用await来提交；
//在async中可以写很多的函数，不是只能写await
try { //抓取错误一般都是写在async中
var pwd = await beiliao(); //备料
console.log("备货已完成，货物的提取码为：" + pwd); //这里的pwd可以被下一个地域调用,一般会返回另一个异步操作！！！！
var p = await quhuo(pwd); //取货的参数是上一个异步操作的返回值，这样这个异步操作就可以获得上一个异步操作的返回值。
console.log("已取货完成，可以开始下一步流程和面了");
// ********************这里是一个复杂的异步操作哟！注意一下！！！！！！**********************************
// 和面和和馅可以同时进行，都完成才进行下一步包饺子
await Promise.all([huomian(), huoxian()]);
// 这个Promise返回的是一个数组
console.log("和面、和馅完成。")
var n = await baojiaozi(); //包饺子
console.log("包饺子完成，一共包了：" + n + "个");
return "chi!"; //吃 包好了饺子，可以开始吃了
} catch (error) {
console.log(error);
}
}
//对于async来说，直接调用即可,then()中是运行成功或失败后的操作
dp().then(data => {
console.log(data) //这里会输出返回的结果 chi！
});
</script>
-
二、模块化
1.CommonJS，AMD,CMD 都是js模块化的规范。
2.CommonJS是服务器端js模块化的规范，NodeJS是这种规范的实现。
3.AMD（异步模块定义）和CMD（通用模块定义）都是浏览器端js模块化的规范
RequireJS遵循的是AMD,SeaJS遵循的是CMD。 -
①CommondJS
CommondJS加载模块是同步的，所有只有加载完成才能执行后面的操作。像Node.js主要用于服务器的编程，加载的模块文件一般都已经存在于本地硬盘，所以加载起来较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。但如果是浏览器环境，要从服务器加载模块，这时就必须采取异步模式。所以就有了AMD CMD解决方案。
//代码示例
var module = require("./module");
//可以引入异步的文件
module()
module.test();
- ②AMD
Asynchroous Module Definiition 规范其实只有一个主要接口define(id?, dependencies?, factory),它主要在声明模块的时候指定多有的依赖dependencies，并且还要当做形参传到factory中，对于依赖的模块提前执行，依赖前置，就是前面的模块必须执行完。
严格的按照顺序来
不管用不用的到，我都给你加载出来
RequireJS实现了这种规范。 - ③CMD
Common Module Definition 规范和AMD很相似，尽量保持简单，并与CommonJS和Node.js的Modules规范保持了很大的兼容性
优点：依赖就近，延迟执行，可以很容易在Node.js中运行
缺点：依赖 打包，莫魁岸的加载逻辑偏重。
什么时候用，什么时候加载 - 三、export命令
模块功能主要由两个命令构成，export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
要点！！！！！！
①每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；
②每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
③模块内部的变量或者函数可以通过export导出；
④一个模块可以导入别的模块
⑤在一个文件或模块中，export、import可以有多个，export default仅有一个
⑥通过export方式导出，在导入时要加{ }，export default则不需要
练习2
这个练习有好几个文件
第一个：(先写好) 0411random.js
// 通过export向外暴露接口
export function rani(){
return Math.floor(Math.random()*101);
// 生成0到100的随机数
}
export function now(){
// 在一个模块中，可以暴露多个接口
return new Date().toString();
// 返回一个当前的日期
}
// 这个接口可以是变量、函数、对象等
第二个：(先写好) 0411export_str.js
var str="yuan";
var name = "lei";
// 如何把一个变量传出去？
// 只输出变量的时候，我们需要加一个大括号，如果同时输出变量和函数的时候，可以不加大括号
export {str,name as mingzi};
// name as mingzi 的意思就是你看见的代码里是name，而被引用后它叫做mingzi，其他人看见的是mingzi
第三个：(先写好) 0411export_default.js
var xxxx ="default value!!!!";
export default xxxx;
// 我输出的是一个变量，用户并不需要知道我的变量名叫做什么
// 一个模块只能有一个 export default，
第四个：(先写好，import) 0411import.js
// 如何调用random那个模块,就用import即可
// 一般的import都有大括号跟着
import {
rani,
now
} from `./0411random.js`;
import {
str as xing,
mingzi
} from `./0411export_str.js`;
// 下面的import的是一个default，变量的名字suibian是随便起的，只有import default的时候不需要用大括号
import suibian from `.0411export_default.js`;
// 引入了这个模块后，我们就拥有了rani方法
console.log("随机数：", rani());
console.log("当前时间：", now());
// console.log(str);
// str也可以用as变为其他名字
console.log(xing);
console.log(mingzi);
console.log(suibian);
第五个：(展示的页面) 0411show_export&import.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>import随机数演示</title>
</head>
<body>
<!-- 因为没有其他办法，现阶段只能用网页的方式来演示export和import -->
<script type="module" src="import.js"></script>
<!-- 对于module，我们只能用localhost和www下来看，浏览器，我们只能用firefox来看 -->
</body>
</html>
总体效果：
一些注释和知识点，都放在代码中啦~
今天的笔记就这样啦，贝贝~