模块化开始现在已经很流行了,方便代码的管理,通常一个文件就是一个模块,有自己的作用域,只是向外暴露特定的变量或者函数
目前流行的js模块化规范就有 CommonJS AMD CMD ES6 模块系统,这个总结 是看别人的原始出处在 掘金APP 上;
一: CommonJS
Node.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module exports require global
用module.exprots定义当前模块对外输出的借口 用require加载模块
定义math.js文件
var basicNum = 0;
function add(a,b){
return a+b;
};
module.exports = {add:add,basicNum:basicNum}; //对象输出特定变量
//文件引入
var math = require('./math');
math.add(2,3);
//文件引入核心模块时候不需要带路径
var http = require('http');
http.createSevise(...).listen(3000);
CommonJS 用同步的方式加载模块,在服务器端模块文件都是在本地磁盘上,读取非常快,但是在浏览器端限于网络原因,更适合用异步加载
二: AMD和require.js
AMD规范采用异步方式加载模块,模块的加载不影响它后面的语句执行,所有依赖这个模块语句都定义在一个函数回调中,
等到加载完成之后,才开始执行回调函数,用require.config()指定引用路径 用define()定义模块 用require加载模块
首先我们需要引入require.js文件和一个入口文件main.js 在main.js中配置require.config()并规定项目中用到的基础模块
//在网页中引入require.js和main.js
<script src="js/require.js" data-main="js/main"></script>
//在main.js入口文件 首先定义config()指定各模块路径和引用名
require.config({
baseUrl: 'js/lib',
paths: {
'require': 'jquire.main' //实际路径为 js/lib/jquire.main.js
'underscore': 'underscore.main'
}
});
//执行基本操作
require(['jquire','underscore'],function($,...){
//some code here
});
引用模块时候,我们讲模块名放在[]中作为require()第一参数,如果我们定义的模块本身也依赖其他模块,那就需要将他们放在[]中作为define()第一参数,
如果我们定义的模块本身也依赖其他模块,那就需要将他们放在
//定义main.js模块
define(function(){
var basicNum = 0;
var add = function(x,y){
return x+y;
};
return {
add : add,
basicNum : basicNum
};
});
//定义一个依赖underscore.js模块
define(['underscore'],function(_){
var classify = function(list){
-.countBy(list,function(num){
return num > 20 ? 'old' : 'young';
});
}
return {
classify:classify
}
});
//引用模块,将模块放在[]内
require(['jquire','main'],function($,math){
var sum = math.add(2,3);
$("#sum").html(sum);
});
三:CMD和sea.js
require.js在声明依赖模块时会第一之间加载并执行模块内的代码;
define(['a','b','c'],function(a,b,c){
//等于在最前面声明并初始化要用到的所有模块
if(false){
//即便没有用到某个模块b,但b还是提前执行了
b.foo();
}
});
CMD是另一个js模块化方案,和AMD很相识,不同点在于:AMD推崇依赖前置,提前执行,CMD推崇依赖就近,延迟执行,在sea.js中推广中产生的
//CMD写法:
define(function(require,exports,module){
var a = require('./a'); //在需要时候声明
a.doSomething();
if(false){
var b = require('./b');
b.doSomething()
}
});
//sea.js
//定义模块main.js
define(function(require,exports,module){
var $ = require('jquire.js');
var add = function(a,b){
return a+b;
};
exports.add = add;
});
//加载模块
seajs.use(['main.js'],function(){
var sum = math.add(1+1);
});
四:ES6 Module
ES6在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在浏览器和服务器通用的模块解决方案,
其主要构成是:export和import,export命令用于规定模块的对外接口,import命令用于输入其他模块提供功能
//定义模块main.js
var basicNum = 0;
var add = function(a,b){
return a+b;
};
export({basicNum,add});
//引用模块
import {basicNum,add} from './main'
function test(ele){
ele.testCont = add(2+basicNum);
};
如果用export default{basicNum,add}; 不用使用大括号
//定义输出
export default{basicNum,add};
//引入
import math from './main';
function test(ele){
ele.testCont = math.add(99+math.basicNum);
}
ES6模块不是对象,import命令会被javascript引擎静态分析,在编译时引入模块代码,而不是在代码运行时候加载,所以无法实现条件加载
也是这个原因,使得静态分析成为可能
五:ES6模块与CommonJS模块的差异
1.CommonJS模块输出的是一个值得拷贝,ES6模块输出的值得引用
CommonJS模块输出是一个值得拷贝,也就是说一旦输出一个值,模块内部变化就影响不到这个值
ES6模块运行机制,JS引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用,等到脚本真正执行时,再根据
这个只读引用到被加载的那个模块里面去取值, import加载的值也会跟着变,因此ES6模块是动态引用,并且不会缓存值
2.CommonJS模块是运行时加载,ES6模块是编译时输出接口
运行时加载:CommonJS模块就是对象,即在输入时是先加载整个对象,生成一个对象,然后再从这个对象上读取方法,这种称为:运行时加载
编译时加载:ES6模块不是对象,而是通过exprot命令显示指定输出的代码,import时采用静态命令形式,而不是加载整个模块 这种称为:编译时加载
CommonJS加载是一个对象 (module.exprots属性) 而ES6模块不是对象,它的对外接口是一种静态定义,在代码静态解析阶段会生成