如果你是JavaScript的新手,诸如模块捆绑器与模块加载器,Webpack与浏览器,AMD与CommonJS之类的术语,可能会变得不知所措,但了解它对Web开发人员至关重要,下面千锋重庆web前端培训机构的小编就带大家一起来看看。
什么是模块?
好的作者将他们的书分为章节,优秀的程序员将其程序分为模块,好的模块是高度独立的,具有独特的功能,可以根据需要对它们进行改组,删除或添加,而不会破坏整个系统。
为什么要使用模块?
可维护性
模块是独立的。设计良好的模块旨在尽可能减少对代码库各部分的依赖,从而使其能够独立增长和改进。当模块与其他代码解耦时,更新单个模块要容易得多。
命名空间
在JavaScript中,顶级函数范围之外的变量是全局变量。因此,普遍存在命名空间污染,这是一大禁忌,模块允许我们通过为变量创建私有空间来避免名称空间污染。
可重用性
可以将以前编写的代码复制到一个新的项目中使用。
模块模式
Module模式用于模仿类的概念(因为JavaScript本身不支持类),因此我们可以将公共方法和私有方法以及变量存储在单个对象中-类似于在Java等其他编程语言中使用类的方式或Python。这使我们可以为要公开的方法创建面向公众的API,同时仍将私有变量和方法封装在闭包范围内。
下面介绍几种方法可以完成模块模式:
匿名闭包
(function () {
//在封闭范围内,我们将这些变量设为私有
var myGrades = [93, 95, 88, 0, 55, 91];
var failing = function(){
var failingGrades = myGrades.filter(function(item) {
return item < 70;});
return '你失败了 ' + failingGrades.length + ' 次.';
}
console.log(failing());
}());
// 你失败了2次.
引入全局
jQuery类库使用的另一种流行方法是全局导入。它类似于我们刚刚看到的匿名闭包,只不过现在我们将全局变量作为参数传递
(function ($, HELLO) {
// 当前域有权限访问全局jQuery($)HELLO
}(jQuery, HELLO));
模块出口
有时你不只想用全局变量,但你需要先声明他们(模块的全局调用)。我们用匿名函数的返回值,很容易输出他们,这样做就完成了基本的模块模式。
var Module = (function () {
var my = {},
privateVariable = 1;
function privateMethod() {
// ...
}
my.moduleProperty = 1;
my.moduleMethod = function () {
// ...
};
return my;
}());
CommonJS、AMD、UMD
CommonJS
CommonJS是一个志愿者工作组,负责设计和实现用于声明模块的JavaScript API。 CommonJS模块本质上是一段可重用的JavaScript,它可以导出特定的对象,使它们可用于其他模块在其程序中需要。如果你使用Node.js编程,你将非常熟悉这种格式。
function myModule() {
this.hello = function() {
return 'hello!';
}
this.goodbye = function() {
return 'goodbye!';
}
}
module.exports = myModule;
想要使用myModule时,他们可以在文件中要求它,如下所示:
var myModule = require('myModule');
var myModuleInstance = new myModule();
myModuleInstance.hello(); // 'hello!'
myModuleInstance.goodbye(); // 'goodbye!'
AMD
CommonJS很好,但是如果我们要异步加载模块怎么办?答案称为异步模块定义,简称AMD。
使用AMD加载模块如下所示`
define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) {
console.log(myModule.hello());
});
与CommonJS不同,AMD采用了浏览器优先的方法以及异步行为来完成工作,,AMD的另一个好处是你的模块可以是对象,函数,构造函数,字符串,JSON和许多其他类型,而CommonJS仅支持将对象作为模块
UMD
对于要求同时支持AMD和CommonJS功能的项目,还有另一种格式:通用模块定义(UMD)。 UMD本质上创建了一种使用这两种方法之一的方式,同时还支持全局变量定义。所以,UMD模块能够在客户端和服务器上工作。
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['myModule', 'myOtherModule'], factory);
} else if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('myModule'), require('myOtherModule'));
} else {
// 浏览器全局变量(注意:root是window)
root.returnExports = factory(root.myModule, root.myOtherModule);
}
}(this, function (myModule, myOtherModule) {
// 方法
function notHelloOrGoodbye(){}; // 私有方法
function hello(){}; // 一个公共方法,因为它已返回
function goodbye(){}; //一个公共方法,因为它已返回
// 公开的公共方法
return {
hello: hello,
goodbye: goodbye
}
}));
ES6
以上所有模块都不是JavaScript固有的。相反,我们通过使用模块模式CommonJS或AMD创建了模拟模块系统的方法,幸运的是,TC39(定义ECMAScript语法和语义的标准机构)引入了ECMAScript 6(ES6)内置模块。
ES6为导入和导出模块提供了各种各样的可能性,相对于 CommonJS 或 AMD,ES6模块的优势在于它提供了两全其美的功能: 紧凑声明语法和异步加载,以及更好的循环依赖支持。
下面是一个例子
CommonJS方式:
// lib/counter.js
var counter = 1;
function increment() {
counter++;
}
function decrement() {
counter--;
}
module.exports = {
counter: counter,
increment: increment,
decrement: decrement
};
// src/main.js
var counter = require('../../lib/counter');
counter.increment();
console.log(counter.counter); // 1
在这个示例中,我们基本上复制了两个模块: 一个在导出时复制,另一个在需要时复制。
main.js 中的副本与原始模块断开了连接。这就是为什么即使我们增加我们的计数器,它仍然返回1ーー因为我们导入的计数器变量是从模块中断开的计数器变量的副本。
因此,递增计数器将在模块中递增它,但不会递增所复制的版本。修改计数器变量复制版本的唯一方法是手动修改:
counter.counter++;
console.log(counter.counter); // 2
我们使用ES6模块来重写:
// lib/counter.js
export let counter = 1;
export function increment() {
counter++;
}
export function decrement() {
counter--;
}
// src/main.js
import * as counter from '../../counter';
console.log(counter.counter); // 1
counter.increment();
console.log(counter.counter); // 2
这就是CommonJS与ES6 modules的区别之一。
总结
我想看了这么多内容你心里一定对JavaScript modules有了大致了解。在大多数情况下(不管是web还是node)我都更愿意使用ES6 Modules来写我的JavaScript代码。千锋重庆web前端培训机构的小编也希望这篇文章能让你更好的理解JavaScript的模块。