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

JS模块化编程

标签：

原文地址：http://www.cnblogs.com/pingchuanxin/p/5885504.html