模块化（一）:模块化的简单了解

看别人的技术博客，总是免不了会看到一些模块化编程的实例。所以这个词相信已经不新鲜了，但是之前只停留在了表面上，只是知道，并没有深刻的去了解，觉得不过是so so,知直到后面学了require.js才重新去了解了这个AMD.

那么，首先我们得知道，为什么需要模块化编程？

1. JavaScript本身不是一种模块化语言，以前js的代码还比较简单，而现在越来越多的JavaScript库和框架的出现，webApp的流行以及Node.js的发展，如果我们还不对自己的JS代码进行一些模块化的组织的话，开发过程会越来越困难，运行性能也会越来越低
   

   本宝宝之前的一个项目

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <title>城市环境监测系统</title> ......//省略css <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <!-- 用了来显示最上角的数据文件 --> <script src="API/WSNRTConnect.js" type="text/javascript" charset="utf-8"></script> <!-- 绘图 --> <script src="highstock/highstock.js" type="text/javascript" charset="utf-8"></script> <script src="highstock/modules/exporting.js" type="text/javascript" charset="utf-8"></script> <!-- 获取历史数据 --> <script src="API/WSNHistory.js" type="text/javascript" charset="utf-8"></script> <!-- 调取动态最上角和下拉框数据 --> <script src="API/history-1.0.min.js" type="text/javascript" charset="utf-8"></script> <!-- 存放用户密钥之类的信息 --> <script src="js/config.js" type="text/javascript" charset="gb2312"></script>

   是不是很可怕，重点是这可能还不是最多文件的

2. 有了同样的模块化编写代码的方式，就可以在开发过程中根据功能引用别人的代码。

FOR EXAMPLE

1
2
3
4
5
6

function max(a, b) {
  return a>b?a:b;
}
function divide(a, b) {
  return a / b;
}

这两个函数就可以组合成一个简单的模块，模块里面有一些简单的功能。
但是，根据我们的开发经验，这个好像没特别的啊？函数还存在全局中。。。当然现在这样的写法的确看不出模块特点。所以我们应该提供一个命名空间，避免全局。

1
2
3
4
5
6
7
8

var math = {
  max: function(a, b) {
     return a>b?a:b;
  },
  divide: function(a, b) {
    return a / b;
  }
}

这个时候就有点feel了吧，但是又根据我们的经验，这个代码是暴露的，在开发过程中是很有可能被外部修改滴。so，这个时候就应该去将其闭包。

1
2
3
4
5
6
7
8
9
10
11
12

var math = (function() {
  var _hi = 0;

  return {
    max: function(a, b) {
     return a>b?a:b;
    },
    divide: function(a, b) {
      return a / b;
    }
  };
})();

这段代码，运行可知，_hi变量并不能被外部访问，而且外部只能访问不能修改 max与divide方法。
闭包了解请狠戳。

为模块添加方法

1
2
3
4
5

var math = (function(module) {
  module.subtract = function(a, b) {
    return a - b;
  }
})(math);

模块在全局变量中的名称可能会与其他的模块产生冲突，例如$符号，虽然使用方便，但多个模块可能都会用它作为自己的简写，例如jQuery我们可以在模块的组织代码中用$作为形参，将模块的全名变量作为参数传入，可起到防冲突的效果。

1
2
3

var math = (function($) {
  // 这里的$指的就是Math
})(math);

比较流行的js模块化规范

• CommonJS
• AMD

参考文献

1.浅谈 JavaScript 模块化编程
2.阮一峰博客