为什么有模块概念
理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。
但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也就没有”模块”(module)了。
require时代
Javascript社区做了很多努力,在现有的运行环境中,实现”模块”的效果。
模块就是实现特定功能的一组方法。
只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。
上面的函数m1()和m2(),组成一个模块。使用的时候,直接调用就行了。
这种做法的缺点很明显:”污染”了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。
为了解决上面的缺点,可以把模块写成一个对象,所有的模块成员都放到这个对象里面
module就是Javascript模块的基本写法。
主流模块规范
在es6以前,还没有提出一套官方的规范,从社区和框架推广程度而言,目前通行的javascript模块规范有两种:CommonJS 和 AMD
CommonJS规范
2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程。
这标志”Javascript模块化编程”正式诞生。前端的复杂程度有限,没有模块也是可以的,但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程。
node编程中最重要的思想之一就是模块,而正是这个思想,让JavaScript的大规模工程成为可能。模块化编程在js界流行,也是基于此,随后在浏览器端,requirejs和seajs之类的工具包也出现了,可以说在对应规范下,require统治了ES6之前的所有模块化编程,即使现在,在ES6 module被完全实现之前,还是这样。
在CommonJS中,暴露模块使用module.exports和exports,很多人不明白暴露对象为什么会有两个,后面会介绍区别
在CommonJS中,有一个全局性方法require(),用于加载模块。假定有一个数学模块math.js,就可以像下面这样加载。
第二行math.add(2, 3),在第一行require(‘math’)之后运行,因此必须等math.js加载完成。也就是说,如果加载时间很长,整个应用就会停在那里等。
这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。但是,对于浏览器,这却是一个大问题,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于”假死”状态。
因此,浏览器端的模块,不能采用”同步加载”(synchronous),只能采用”异步加载”(asynchronous)。这就是AMD规范诞生的背景。
AMD是”Asynchronous Module Definition”的缩写,意思就是”异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
模块必须采用特定的define()函数来定义。
math.add()与math模块加载不是同步的,浏览器不会发生假死。所以很显然,AMD比较适合浏览器环境。
目前,主要有两个Javascript库实现了AMD规范:
require.js
和
curl.js
。
CMD规范
CMD (Common Module Definition), 是seajs推崇的规范,CMD则是依赖就近,用的时候再require。它写起来是这样的:
define(
function(
require, exports, module) {
var clock = require('clock')
clock.start()
CMD与AMD区别
AMD和CMD最大的区别是对依赖模块的执行时机处理不同,而不是加载的时机或者方式不同,二者皆为异步加载模块。
AMD依赖前置,js可以方便知道依赖模块是谁,立即加载;
而CMD就近依赖,需要使用把模块变为字符串解析一遍才知道依赖了那些模块,这也是很多人诟病CMD的一点,牺牲性能来带来开发的便利性,实际上解析模块用的时间短到可以忽略。
现阶段的标准
ES6标准发布后,module成为标准,标准使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们依然采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。
export导出模块
export语法声明用于导出函数、对象、指定文件(或模块)的原始值。
注意:在node中使用的是exports,不要混淆了
export有两种模块导出方式:
命名式导出(名称导出)
和
默认导出(定义式导出)
,命名式导出每个模块可以多个,而默认导出每个模块仅一个。
export { name1, name2, …, nameN };
export { variable1
as name1, variable2
as name2, …, nameN };
export
let name1, name2, …, nameN;
export
let name1 = …, name2 = …, …, nameN;
export
default expression;
export
default
function (
…) { … }
export
default
function
name1(
…) { … }
export { name1
as
default, … };
export *
from …;
export { name1, name2, …, nameN }
from …;
export { import1
as name1, import2
as name2, …, nameN }
from …;
name1… nameN-导出的“标识符”。导出后,可以通过这个“标识符”在另一个模块中使用import引用
default-设置模块的默认导出。设置后import不通过“标识符”而直接引用默认导入
-继承模块并导出继承模块所有的方法和属性
as-重命名导出“标识符”
from-从已经存在的模块、脚本文件…导出
命名式导出
模块可以通过export前缀关键词声明导出对象,导出对象可以是多个。这些导出对象用名称进行区分,称之为命名式导出。
import引入模块
import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件(或模块)的原始值。
import模块导入与export模块导出功能相对应,也存在两种模块导入方式:命名式导入(名称导入)和默认导入(定义式导入)。
import的语法跟require不同,而且import必须放在文件的最开始,且前面不允许有其他逻辑代码,这和其他所有编程语言风格一致。
import defaultMember from
"module-name";
import *
as
name from
"module-name";
import { member } from
"module-name";
import { member
as alias } from
"module-name";
import { member1 , member2 } from
"module-name";
import { member1 , member2
as alias2 , [...] } from
"module-name";
import defaultMember, { member [ , [...] ] } from
"module-name";
import defaultMember, *
as
name from
"module-name";
import
"module-name";
member, memberN-从导出模块,导入指定名称的多个成员
defaultMember-从导出模块,导入默认导出成员
alias, aliasN-别名,对指定导入成员进行的重命名
module-name-要导入的模块。是一个文件名
as-重命名导入成员名称(“标识符”)
from-从已经存在的模块、脚本文件等导入
命名式导入
我们可以通过指定名称,就是将这些成员插入到当作用域中。导出时,可以导入单个成员或多个成员:
注意,花括号里面的变量与export后面的变量一一对应
function
getJSON(
url, callback) {
let xhr =
new XMLHttpRequest();
xhr.onload =
function (
) {
callback(
this.responseText)
xhr.open(
"GET", url,
true);
xhr.send();
export
function
getUsefulContents(
url, callback) {
getJSON(url,
data => callback(
JSON.parse(data)));
import { getUsefulContents }
from
"file";
getUsefulContents(
"http://itbilu.com",
data => {
doSomethingUseful(data);
这个语法糖的好处就是import的时候,可以省去花括号{}。
简单的说,如果import的时候,你发现某个变量没有花括号括起来(没有*号),那么你在脑海中应该把它还原成有花括号的as语法。
所以,下面这种写法你也应该理解了吧:
如果在b.js中同时使用a和c这两个模块,就必须想办法解决接口重名的问题,as就解决了。
CommonJS中module.exports 与 exports的区别
Module.exports
The module.exports object is created by the Module system. Sometimes this is not acceptable; many want their module to be an instance of some class. To do this, assign the desired export object to module.exports. Note that assigning the desired object to exports will simply rebind the local exports variable, which is probably not what you want to do.
译文:module.exports对象是由模块系统创建的。 有时这是难以接受的;许多人希望他们的模块成为某个类的实例。 为了实现这个,需要将期望导出的对象赋值给module.exports。 注意,将期望的对象赋值给exports会简单地重新绑定到本地exports变量上,这可能不是你想要的。
Module.exports
The exports variable is available within a module’s file-level scope, and is assigned the value of module.exports before the module is evaluated. It allows a shortcut, so that module.exports.f = … can be written more succinctly as exports.f = …. However, be aware that like any variable, if a new value is assigned to exports, it is no longer bound to module.exports:
译文:exports变量是在模块的文件级别作用域内有效的,它在模块被执行前被赋于 module.exports 的值。它有一个快捷方式,以便 module.exports.f = … 可以被更简洁地写成exports.f = …。 注意,就像任何变量,如果一个新的值被赋值给exports,它就不再绑定到module.exports(其实是exports.属性会自动挂载到没有命名冲突的module.exports.属性)
从
Api文档
上面的可以看出,从require导入方式去理解,关键有两个变量(全局变量module.exports,局部变量exports)、一个返回值(module.exports)
function some_func(
) {};
exports = some_func;
module.exports = some_func;
})(
module,
module.exports);
// 不管是
exports还是
module.
exports,最后返回的还是
module.
exports
return
module.
exports;
console.log(exports);
console.log(
module.exports);
console.log(exports ===
module.exports);
console.log(exports ==
module.exports);
console.log(
module);
Module {
id:
'.',
exports: {},
parent:
null,
filename:
'/Users/larben/Desktop/demo.js',
loaded:
false,
children: [],
paths:
[
'/Users/larben/Desktop/node_modules',
'/Users/larben/node_modules',
'/Users/node_modules',
'/node_modules' ] }