Common Module Definition,通用模块定义
它的实现:common.js、sea.js(淘宝玉伯)、node.js。
对比
AMD,只有require.js对AMD进行了实现 Angular1使用了AMD规范,而Angular2放弃了AMD规范,转入了CMD阵营,Angular4、5都是CMD的。
CMD总结:
- nodejs是遵循CMD规范的,可以裸奔CMD规范。所以大家已经会了CMD规范了;
- 所有的模块都要用define(function(require,exports,module){})包裹,称为“标准壳”;
- 暴露有两种途径exports.** = ** ; module.exports = ** ;
- 引用的时候用require()引用,require谁就执行谁,会死等这个文件加载完毕,没有回调函数。
- CMD规范中没有node_modules这个神奇的文件夹的概念,是nodejs自己添加的特性。
最后说一嘴:AMD、CMD规范和业务一点关系没有,就是纯粹的文件组织的形式。网页DOM开发是不会用AMD、CMD规范的,现在AMD、CMD学习的意义就是服务于Angular、React、Vue的。
上面的CMD语法是commonjs在2005年左右提出的语法,被nodejs全盘采纳。
简单的对应关系:
require变为了import
exports变为了export
module变为了default
● 基本的暴露和引入
yuan.js:
export const mianji = function(r){
return 3.14 * r * r;
}
export const zhouchang = function(r){
return 6.28 * r;
}
main.js:
import {zhouchang , mianji} from "./yuan.js";
alert(zhouchang(10));
alert(mianji(10));
暴露的名字和接收的名字必须一样。暴露的是mianji接收必须是mianji。
● 命名空间
如果两个包中都有mianji、zhouchang函数,此时用import {zhouchang,mianji}就冲突了。
所以用import * as的语法制定命名空间。
import * as yuan from "./yuan.js";
import * as fang from "./fang.js";
alert(yuan.zhouchang(10));
alert(yuan.mianji(10));
alert(fang.zhouchang(10,20));
alert(fang.mianji(10,20));
● 默认暴露
我们知道,当一个js文件是一个类的时候,此时我们只需要暴露这一个类,nodejs用module.exports=**暴露,这里改了,变为export default 类名。
class People{
constructor(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
haha(){
console.log(`我是${this.name},哈哈`);
}
}
export default People;
神奇的是,ES6中的默认暴露可以和普通暴露共存:
class People{
constructor(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
haha(){
console.log(`我是${this.name},哈哈`);
}
}
//随便一个函数
export const lajihanshu = function(){
console.log("哈哈");
}
export default People;
导入的时候,普通暴露加大括号,默认暴露不加大括号,中间用逗号隔开。
import * as yuan from "./yuan.js";
import * as fang from "./fang.js";
import People , {lajihanshu} from "./People.js";
console.log(yuan.zhouchang(10));
console.log(yuan.mianji(10));
console.log(fang.zhouchang(10,20));
console.log(fang.mianji(10,20));
var xiaoming = new People("小明",12,"男");
xiaoming.haha();
lajihanshu();
转载:https://blog.csdn.net/weixin_44978975/article/details/101610303