前端模块化,AMD,CMD,ES6 Module,CommonJS,ES6 模块与CommonJS 模块的差异
前端模块化
问题: 为什么前端要使用模块化?
模块化: 是具有特定功能的一个对象( 广义理解 )
模块定义的流程:
1.定义模块(对象)
2.导出模块
3.引用模块
好处:
-
可以存储多个独立的功能块
-
复用性高
分类
1. AMD
-
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: { "jquery": "jquery.min", //实际路径为js/lib/jquery.min.js "underscore": "underscore.min", } }); // 执行基本操作 require(["jquery","underscore"],function($,_){ // some code here });
引用模块的时候,我们将模块名放在[]
中作为reqiure()
的第一参数;如果我们定义的模块本身也依赖其他模块,那就需要将它们放在[]
中作为define()
的第一参数。
// 定义math.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 > 30 ? 'old' : 'young';
})
};
return {
classify :classify
};
})
// 引用模块,将模块放在[]内
require(['jquery', 'math'],function($, math){
var sum = math.add(10,20);
$("#sum").html(sum);
});
2. CMD
- require.js在申明依赖的模块时会在第一之间加载并执行模块内的代码:
CMD是另一种js模块化方案,它与AMD很类似,不同点在于:AMD 推崇依赖前置、提前执行,CMD推崇依赖就近、延迟执行。此规范其实是在sea.js推广过程中产生的。define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { // 等于在最前面声明并初始化了要用到的所有模块 if (false) { // 即便没用到某个模块 b,但 b 还是提前执行了 b.foo() } });
/** AMD写法 **/ define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { // 等于在最前面声明并初始化了要用到的所有模块 a.doSomething(); if (false) { // 即便没用到某个模块 b,但 b 还是提前执行了 b.doSomething() } }); /** CMD写法 **/ define(function(require, exports, module) { var a = require('./a'); //在需要时申明 a.doSomething(); if (false) { var b = require('./b'); b.doSomething(); } }); /** sea.js **/ // 定义模块 math.js define(function(require, exports, module) { var $ = require('jquery.js'); var add = function(a,b){ return a+b; } exports.add = add; }); // 加载模块 seajs.use(['math.js'], function(math){ var sum = math.add(1+2); });
3.ES6 Module
-
ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案。其模块功能主要由两个命令构成:
export
和import
。export
命令用于规定模块的对外接口,import
命令用于输入其他模块提供的功能。/** 定义模块 math.js **/ var basicNum = 0; var add = function (a, b) { return a + b; }; export { basicNum, add }; /** 引用模块 **/ import { basicNum, add } from './math'; function test(ele) { ele.textContent = add(99 + basicNum); }
如上例所示,使用
import
命令的时候,用户需要知道所要加载的变量名或函数名。其实ES6还提供了export default
命令,为模块指定默认输出,对应的import
语句不需要使用大括号。这也更趋近于ADM的引用写法。/** export default **/ //定义输出 export default { basicNum, add }; //引入 import math from './math'; function test(ele) { ele.textContent = math.add(99 + math.basicNum); }
ES6的模块不是对象,
import
命令会被 JavaScript 引擎静态分析,在编译时就引入模块代码,而不是在代码运行时加载,所以无法实现条件加载。也正因为这个,使得静态分析成为可能。
4. Common.js
Node.js使用了Common.js的规范
易错的理解:
common.js是属于node的 ×
node属于common.js ×
//common.js
/*
目录结构:
name.js
index.js
*/
//模块的定义 name.js
const nameObj = {
name: 'Zhixjs'
}
//模块的导出 name.js
module.exports = nameObj
//模块的引用
const nameObj = require('./name.js')
Node.js中Common.js规范的使用有三种类型:
-
内置模块( 内置模块指的是挂载在Node.js全局对象身上的api )
-
自定义模块
-
模块的定义
//举例 const student = { id: 1, name: 'Yhk' } const fn = function(){}
-
模块的导出
// 第一种导出 module.exports = student // 安全性不高 默认导出一个 //第二种导出 module.exports = { //批量导出,按需引用 student,fn }
-
模块的引用
// 这种引用对应第一种导出 const student = require('./xxx.js') // 这种引用对应第二种导出 const { student , fn } = require( './xxx.js ' )
注意:
在自定义模块引用时,require一定要写好路径
-
-
第三方模块
1. 别人已经封装好的模块 2. 这个模块具备一些特定的功能 3. 这些模块存放在 www.npmjs.com 这个网站中 这些模块的文档也记录在内 格式: var/let/const 变量名 = require( 模块名称 ) 总结: 第一步,使用npm/cnpm 安装 第二部,在文件中引入 第三部,在www.npmjs.com这个网站中找到这个模块的文档,根据文档来使用
5.ES6 模块与 CommonJS 模块的差异
-
1. CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
- CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。
- ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令
import
,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。换句话说,ES6 的import
有点像 Unix 系统的“符号连接”,原始值变了,import
加载的值也会跟着变。因此,ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。
-
- CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
- 运行时加载: CommonJS 模块就是对象;即在输入时是先加载整个模块,生成一个对象,然后再从这个对象上面读取方法,这种加载称为“运行时加载”。
- 编译时加载: ES6 模块不是对象,而是通过
export
命令显式指定输出的代码,import
时采用静态命令的形式。即在import
时可以指定加载某个输出值,而不是加载整个模块,这种加载称为“编译时加载”。
CommonJS 加载的是一个对象(即
module.exports
属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成
推荐阅读
-
JavaScript模块化-CommonJS、AMD、CMD、UMD、ES6
-
前端模块化:CommonJS,CMD,AMD,ES6
-
前端模块化小总结—commonJs,AMD,CMD, ES6 的Module
-
javascript模块化之CommonJS、AMD、CMD、UMD、ES6
-
javascript模块化之CommonJS、AMD、CMD、UMD、ES6
-
前端模块化:AMD, CMD, CommonJS, ES6 Module
-
前端模块化详解(CommonJS、AMD、CMD、ES Module)
-
模块化之CommonJs、AMD、CMD和ES6模块化
-
前端模块化之CommonJS,ES6,AMD,CMD
-
JavaScript模块化-CommonJS、AMD、CMD、UMD、ES6