模块化编程：阮一峰 模块化编程

由于一个页面写的js太多了，都写在一个文件中，不好调试。所以我的目标就是如何能把所需的js文件，分割成易于维护的代码块，之间能相互调用方法和属性。虽然采用命名空间也能应付，但是不知道什么才是最好的做法。

看了这一系列文章，感觉是处理模块间的依赖关系。这也确实是需要做的事情，比如使用jquery UI，bootstrap等好用的库时，就需要处理好模块的关系。

javascripts模块化编程（一）：模块的写法

一、原始写法：函数的堆积

二、对象写法：会暴露所有的模块成员

三、立即执行函数：不暴露私有成员

四、放大模式：一个模块很大，需要分成几个部分；一个模块需要继承另一个模块

var module1 = (function (mod){
　　mod.m3 = function () {
　　　　//...
　　};
　　return mod;
})(module1);  //module1模块添加了一个新方法m3()，然后返回新的module1模块。分成几部分写的话，从第二部分起，就不用加var了吧？

五、宽放大模式：与"放大模式"相比，就是"立即执行函数"的参数可以是空对象。

var module1 = ( function (mod){
　　//...
　　return mod;
})(window.module1 || {});

六、全局变量：为了在模块内部调用全局变量，必须显式地将其他变量输入模块

var module1 = (function ($, YAHOO) {
　　//...
})(jQuery, YAHOO);   //其实可以传一个对象：module1_argu，包含需要的参数。

　　

javascripts模块化编程（二）：AMD规范

node使用CommonJS规范，由于它是同步加载，不适合浏览器端，所以在浏览器上使用AMD规范。

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式。

 

问题：server和client不是用同一套规范，不统一呀。

 

Javascript模块化编程（三）：require.js的用法

目标：js异步加载，管理模块的依赖关系。

加载：

<script src="js/require.js" defer async="true" ></script>
<script src="js/require.js" data-main="js/main"></script>

主模块的写法：

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　// some code here
});

模块的加载：

require.config({
　　baseUrl: "js/lib",
　　paths: {
　　　　"jquery": "jquery.min",
　　　　"underscore": "underscore.min",
　　　　"backbone": "backbone.min"
　　}
});  //如果这些模块与main.js不在一个目录时。

AMD模块的写法：

// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

加载非规范的模块：

require.config({
　　　　shim: {

　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。