JS模块化编程

开头内容：

模块化编程：将有利于咱们的代码的功能的单一可复用性，因此不少的书本中将模块化编程定位编程路途上的一个高点。

学习内容：

什么事模块化编程呢，为何咱们须要模块化的编程方式呢。

1. 随着前段程序的组件的复杂化，咱们的代码的阅读维护和测试的工做将会变得愈来愈困难而且耗时间。这样就迫使咱们对于前端的编程须要更多的考虑程序的各个功能之间的耦合性的下降，和内聚性的增长，由于只有这样才会简化咱们的后期维护的工做，并使得开发的速度大大的增长（由于模块化编写的代码能够被复用，从而简化了咱们的开发步骤）。这边是为何咱们须要模块化的编程。

2. 那到底什么是模块话的编程呢。模块化编程，在我我的的感受中，更像是使得部分功能函数脱离出对页面的需求，抽象化的一套对于或者几个模块的功能性强，的功能代码。并进行适当的封装。固然在与此同时咱们也应该考虑到函数之间的关联不该该太过于紧密，而是应该使得它们的自身的功能属性更为的内聚。

 

在js当中想要作到模块化的编程是比较困难的，虽然其版本的不断的更替，其中体现的面相对象的思想愈来愈清晰，可是因为在js中咱们是没有真真的类的概念（虽然有思想）和模块的概念，因此比较难完成模块化编程的任务。

在js权威指南中有这样一句话描述模块的概念。模块就是一个能够独立的js的文件，其中能够包含一个类的定义，或是一组相关的类，一个实用函数库或者是一些待执行的代码。

 

针对于模块化咱们其实能够有许多种的实现的方式：

1.最为原始的方法，功能函数的写法。

1 function test1(){
2     /*.......*/
3 }
4 
5 var test2 = function(){
6     /*.......*/  
7 }

以上是直接经过在全局变量中定义功能函数的方式编写功能性质的模块，可是咱们实际上不推崇这样作的，由于这样污染了全局环境，在函数化编程规范中，咱们应该听从不污染全局变量的原则（由于污染全局变量可能会使得当前的声明的函数与其余模块声明的函数有冲突。）

 

2.使用对象的概念：

将功能性的函数存储在对象之中能够必定程度上避免上述的问题。

1 var testone = {
2     name: "Arvin";
3     showTime:function(){
4         alert(name);
5     }    
6 };

上面能够看见，咱们将功能函数的封装见有效的减小当前的全局变量中的内容，而且使得相关的功能更为的内聚。可是与此同时是存在问题的，由于js中并无公私有的声明，因此实际上在对象中咱们不论公有属性或者是私有属性将会对用户尽收眼底。因此这也是一个安全隐患所在。

 

3.使用即执行函数对模块进行封装：

 1 var testtwo = (function(){
 2     
 3     var name = "Arvin";
 4 
 5     return {
 6         showTime:function(){
 7             alert(name);
 8         }
 9 
10 })();    

以上代码中咱们能够看到，name变量时定义在匿名函数中的，因此在返回的额对象中咱们是查找不到相应的属性内容的，可是因为js的数据链的原理，咱们的在testTwo对象的方法中其实是能够访问这一属性内容的，因此这样就造就成了一种私有属性的形式。禁止了用户对于这一属性的访问，可是与此同咱们又能够经过对象的方法来进行属性的访问。这样就很好的规避了上面的两个问题内容。

 

4.方法3的进阶

对于方法3中的对象的声明其实是有的时候咱们须要对于它在额外的添加一些内容是的其更为的复合咱们的需求。

1 var module = (function(mod){
2 
3     /*......*/
4     return mod;
5 
6 })(window.module || {})

经过传递如相关的组件的内容并以此来进行方法函数或是属性的定义，以此来进行相关的内容的添加，固然咱们当前的对象中进行了元素的传入，这是由于在网络加载组件的时候并不知道组件加载的前后顺序，若是直接使用当前的对象单是组件文件尚未加载完成的话，则会形成添加的变量报错。

 

5.在咱们编写的模块的时候模块的独立性将会是十分钟要的一个属性，咱们在编写的时候应该对其进行仔细的考量。独立性好的对象能够很好的实现复用并方便进行单元的功能测试。

在许多的文章中介绍到。在咱们编写模块并在其中使用到全集变量的时候，咱们应该吧全局变量做为参数传递进入当前模块。代码以下：

1 var module1 = (function ($, YAHOO) {
2         //...
3 })(jQuery, YAHOO);

由上方可见，模块函数中传递了jquery和YAHOO的全局变量，当咱们在模块中使用的时候，是经过形参进行调用的。

 

以上只是一些模块化的简单的说明，若是想要更深刻的了解模块化的话，咱们仍是应该在去看一看其余的模块化规范或者是工具。

实际上如今就有许多的模块化的规范例如CommonJS（大名鼎鼎的node.js就是使用了这一规范）， AMD和CMD等等。请参考其它文章谢谢。

文章连接：http://www.cnblogs.com/dolphinX/p/4381855.html