前言
随着前端的发展，前端代码日益复杂庞大，此时在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模块化编程（一）：模块的写法
代码
本节代码
网友评论