前端模块化规范,CommonJS,AMD,CMD,ES6 mod
前言
随着前端的发展,前端代码日益复杂庞大,此时在JS方面就会考虑使用模块化规范去管理。下面主要介绍开发中流行的几种前端模块化规范。
一、什么是模块化
1.1、什么是模块?
- 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
- 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
1.2、模块化的好处
- 避免命名冲突(减少命名空间污染)
- 更好的分离, 按需加载
- 更高复用性
- 高可维护性
二、模块规范
2.1、CommonJS
2.1.1、简述
Node是CommonJS规范的主要实践者,每个文件就是一个模块,有自己的作用域,并且对其他文件都是不可见的,是私有的。
2.1.2、特点
- 所有代码都运行在模块作用域,不会污染全局作用域。
- 模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。
- 同步的方式加载模块
2.1.3、基本变量
它有四个重要的环境变量为模块化的实现提供支持:module
、exports
、require
、global
。每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。
- 暴露模块:
module.exports=value
或者exports.xxx=value
。 - 引入模块:
require(xxx)
let x=1;
let addx=function(value){
return value+1;
}
module.exports.expx=x;
module.exports.expaddx=addx;
上面代码通过module.exports输出变量x和函数addX。
let demox=require("./demo.js");
console.log(demox.expx);//1
用require命令加载模块文件。
CommonJS模块的加载机制是,输入的是被输出的值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。
当然导出方法也可以这样写
module.exports = {
expx:x,
expaddx:addx
}
2.2、AMD (Asynchronous Module Definition)
2.2.1、简述
AMD主要提供了异步加载的功能,不过随着打包工具和Babel在前端工程化的世界里大放异彩,其也在逐步退出历史舞台。RequireJS是其主要践行者
2.2.2、基本语法
- 暴露模块:
//定义没有依赖的模块
define(function(){
return 模块
})
//定义有依赖的模块
define(['module1','module2'],function(m1,m2){
return 模块
})
- 引入模块
require(['moudle1','moudle2'],function(m1,m2){
//使用m1/m2
})
2.2.3、实例
//hello.js
define(function() {
console.log('hello');
return {
getMessage: function() {
return 'hello';
}
};
});
//worlld.js
define(function() {
console.log('world');
});
//index.js
define(['./hello.js', './worlld.js'], function(hello) {
return {
sayHello: function() {
console.log(hello.getMessage());
}
};
});
//hello
//world
2.3、CMD(Common Module Definition)
2.3.1简述
CMD规范专门用于浏览器端,模块的加载是异步的,模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。Sea.js是其实践者。
2.3.2、基本语法
- 暴露模块:
//定义没有依赖的模块
define(function(require, exports, module){
exports.xxx = value
module.exports = value
})
//定义有依赖的模块
define(function(require, exports, module){
//引入依赖模块(同步)
var module2 = require('./module2')
//引入依赖模块(异步)
require.async('./module3', function (m3) {
})
//暴露模块
exports.xxx = value
})
- 引入使用模块:
define(function (require) {
var m1 = require('./module1')
var m4 = require('./module4')
m1.show()
m4.show()
})
2.3.3、实例
/hello.js
define(function(require, exports) {
console.log('hello');
exports.getMessage = function() {
return 'hello';
};
});
//worlld.js
define(function(require, exports) {
console.log('worlld');
exports.getMessage = function() {
return 'world';
};
});
//index.js
define(function(require) {
var message;
if (true) {
message = require('./hello').getMessage();
} else {
message = require('./worlld').getMessage();
}
});
//hello
AMD和CMD的区别:
- 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。
解释:
(1)提前执行:参考RequireJS的异步模块加载迎合了浏览器端JS程序员固有的异步思维
(2)延迟执行:加载完某个依赖模块后并不执行,只是下载而已,在所有依赖模块加载完成后进入主逻辑,遇到require语句的时候才执行对应的模块 - CMD 推崇依赖就近,AMD 推崇依赖前置
解释:
(1)依赖就近:可以把依赖写进你的代码中的任意一行
(2)依赖前置:解析和执行当前模块之前,模块作者必须指明当前模块所依赖的模块
2.4、ES6 module
ES6提供了import和export命令,分别对应模块的导入和导出功能。
2.4.1、实例
//demo.js
let name="agam";
var sayName=name=>console.log(name);
export {name ,sayName};
//index.js
import { name } from './demo';
sayName("aga");
console.log(name);
//aga
//agam
如上例所示,使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。
export default name;
export default sayName;
import names from './demo.js';
模块默认输出, 其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。
ES6模块与CommonJS模块的差异:
① CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
② CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
三、模块工具介绍
3.1、Webpack
总结
- CommonJS规范主要用于服务端编程,加载模块是同步的。
- AMD规范在浏览器环境中异步加载模块,而且可以并行加载多个模块。不过,AMD规范开发成本高,代码的阅读和书写比较困难。
- CMD规范与AMD规范很相似,都用于浏览器编程,依赖就近,延迟执行,不过,依赖SPM 打包,模块的加载逻辑偏重
- ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
参考:
CommonJS,AMD,CMD区别
理解CommonJS、AMD、CMD三种规范
Javascript模块化编程(一):模块的写法
代码
本节代码