JS模块:初学者指南
如果你是一个学习js的新手,一些专业的术语:模块化打包与模块化载入,webpack与browserify,AMD和CommonJS.这些问题会让人很迷惑.
js模块化系统可能比较难以理解,但是这些对于网络开发者确实必须的.
在这片文章中,我会尽量用平实的语言来解释这些抽象的词汇,希望对你有所帮助!
第一部分:能有人给我解释一下什么是模块化?
好的作者会把他们的书分为章节和段落,而好的码农会把他们的程序模块化.
就像一片文章的章节,模块就是一组单词.
对于一个好的模块,是具有完备的,不同的功能的,他们可以被拖拽,移除,添加而不会使系统分裂.
为什么使用模块
针对不规则的,相互依赖的代码使用模块化会有很多的好处,我认为最重要的点:
-
可维护性:定义了一个完备的模块,一个好的模块旨在于减少各个部分的依赖关系,他可以独立的成长和发展.更新一个单独的模块儿会更容易,当其已经从其他代码解耦后,
回到书的例子,如果你想要更新书的一个章节,如果一个小的章节变化需要你去更改相关的每个章节,name这将是一个噩梦,但是,如果你以模块化的方式去写每个章节会改善而不影响其他的章节
-
命名空间:在JavaScript中,外层函数作用域外的变量是全局的(意味着每个人可以访问),由于这一点就很容易造成命名污染:完全不相关的代码共享使用了全局变量.
在不相关的代码之间共享全局变量在开发当中是万万不适用的.
在之后我们将看到模块化允许我们通过创建变量的私人空间避免命名污染.
-
可重用性:这里是事实:我们都会复制我们之前所写的代码到新的项目当中,举个例子,我们假设你复制了你之前所写的所有的工具方法到你当前的项目.
这都是很好的,但是如果你找到了一个更好的方法去更新这些代码,你得去回顾并且熟记跟新他,
显然这个是非常浪费时间的,难道没有更容易的方法--等等--一个模块我们可以不断的重复使用吗?
如何合并模块
有很多方法去合并模块到你的代码当中,来大概浏览一下:
模块化模型
模块化模型常被用作模拟类的概念,我们可以存储公共和私用的方法和变量在一个单独的项目当中,就像在Java和python当中使用class一样,允许我们创建一个们想要展示的公共的API方法,仍然可以封装私人变量和方法在一个闭包的作用域.
有几种方法去实现模块化模型,在第一个例子当中,我将要用一个匿名的闭包,这将帮助我们达成我们的目标通过放置我们的到吗在匿名函数当中(记住:在JavaScript当中,函数是唯一的方法创建新的作用域)
例子1:匿名闭包
(
function(){
//保存这些变量在这个闭包的作用域当中
var myGrades = [ 93,95,88,0,55,91];
var average = function(){
var totle = myGrades.reduce(function(acu,item){
return acu + item;
},0);
return 'Your average gride is '+totle/myGrades.length+',';
}
var failing = function(){
var failingGrade = myGrades.filter(function(item){
return item<70;
});
return 'You failed'+failingGrade.length+'times.';
}
console.log(failing());
}());
//You failed 2 times.
通过这个构造器,我们的匿名函数有了他自己的运行环境or闭包,然后立即执行.我们隐藏了变量从全局的命名空间.
这种方法最好的一点是你可以使用本地的变量inside这个函数不会偶然的复写全局变量,但是仍然可以访问全局变量,就像:
var global = 'Hello,I am a global variable :)';
(function(){
var myGrades = [93,95,98,0,55,91];
var average = function() {
var total = myGrades.reduce(function(accumulator, item) {
return accumulator + item}, 0);
return 'Your average grade is ' + total / myGrades.length + '.';
}
var failing = function(){
var failingGrades = myGrades.filter(function(item) {
return item < 70;});
return 'You failed ' + failingGrades.length + ' times.';
}
console.log(failing());
console.log(global);
}())
// 'You failed 2 times.'
// 'Hello, I am a global variable :)'
记得匿名函数的括号是必须的,因为语句开始的关键词function重视被认为是函数声明,因此,包裹的圆括号创建了一个函数表达式.
例子2:全局导入
另一个比较流行的方法使用库就像jq的全局导入,和我们刚刚看到的匿名闭包是一样的,以参数的形式传入全局:
(function(globalVariable){
var privateFunction = function(){
console.log('shhhh,this is private')
}
globalVariable.each = function(collection,iterator){
if(Array.isArray(collection)){
for(var i=0;i< collection.length;i++){
iterator(collection[i],i,collection);
}
}else{
for(var key in collection){
iterator(collection[key],key,collection);
}
}
};
globalVariable.filter = function(collection,test){
var filtered = [];
globalVariable.each(collection,function(item){
if(test(item)){
filter.push(item);
}
});
return filtered;
};
globalVariable.map = function(collection,iterator){
var mapped = [];
globalUtils.each(collection,function(value,key,collection){
mapped.push(iterator(value))
});
return mapped;
};
globalVariable.reduce = function(collection,iterator,accumulator){
var startingValueMissing = accumulator === undefined;
globalVariable.each(collection,function(item){
if(startingValueMissing){
accumulator = item;
startingValueMissing = false;
}else{
accumulator = iterator(accumulator,item);
}
});
return accumulator;
}
}(globalVariable))
在这个例子中,globalVariable是唯一一个全局变量,这种方法的好处在于可以先声明全局变量,使他更容易被辨认.
例子3:对象接口
另外一种方法是创建一个模块使用自备的对象接口,下面这样子:
var myGradesCalculate = (function(){
var myGrades = [93, 95, 88, 0, 55, 91];
return {
average:function(){
var total = myGrades.reduce(function(acc,item){
return acc + item;
},0);
return 'Your average grade is'+total/myGrade.length+'.';
},
failing:function(){
var failingGrades = myGrades.filter(function(item){
return item<70;
});
return 'You"ve failed'+failingGrades.length + 'times.'
}
}
})();
myGradesCalculate.failing();
myGradesCalculate.average();
正如你所看到的,这种方法让我们决定了什么变量/方法是我们想要保持private,什么方法使我们想要返回并暴露的.
例子4:显示模块模型
这个和以上的方法是非常的相似的,除了他确信让所有的方法和变量保持私有直到explicitly exposed:
var myGradesCalculate = (function(){
var myGrades = [93, 95, 88, 0, 55, 91];
var average = function(){
var total = myGrades.reduce(function(acc,item){
return acc+item;
},0);
return 'Your average grade is '+total/myGrades.length+'.';
};
var failing = function(){
var failingGrades = myGrades.filter(function(item){
return item<70;
});
return 'you failed'+failingGrades.length+'times.';
};
return {
average:average,
failing:failing
}
})();
myGradesCalculate.failing();
myGradesCalculate.average();
看上去有很多东西需要掌握,但是这只是冰山一角.
CommonJS 和AMD
以上的方法都有一个共同点:一个全局变量包裹他的代码在函数内,因此创建私人命名空间为他自己使用一个封闭的作用域.
然而每个方法都按自己的方式是生效,他们有自己的downsides.
首先,作为一个开发者,你需要直到你的文件载入的顺序和依赖,例如:你正在使用backbone到你的项目,所以你在你的文件中包含了backbone的源码.
但是,由于backbone对underscoreJS有很深的依赖,所以backbone的script的标签不能放在underscore的script的标签的前面.
作为一个开发者,管理依赖并把这些弄正确也是一个头疼的问题.
另一个缺憾就是他们仍然会引起命名空间的冲突,比如万一你的两个模块有相同的名字怎么办?或者说你有同一个模块的两个不同的版本,但是你两个都需要?
所以,你会疑惑:我们可以设置一种方式去请求模块的接口而不是直接通过全局作用域?
幸运的是,答案是yes,
有两种比较流行的方式:commonJS和AMD
CommonJS
AMD