模块化(之SeaJS)

刚接触的童鞋可能会有很多疑惑,比喻:什么是模块?模块的目的是干嘛呀?怎么样实现模块化呢?

   不要急,博主正是带着这三个问题来写这篇文章的。

     一,什么是模块化?

     在前端开发领域,一个模块,可以是JS 模块,也可以是 CSS 模块,或是 Template 等模块。在 Sea.js 里,我们专注于 JS 模块(其他类型的模块可以转换为 JS 模块):模块是一段 JavaScript 代码,具有统一的基本书写格式。模块之间通过基本交互规则,能彼此引用,协同工作(怎么书写以及交互规则就是SeaJS的CMD规范,我将放在第三个问题里一起总结)。                                                                                                      

     二,模块化的目的是什么?

    目的:模块化的目标是支持大规模的程序开发,处理分散愿中代码的组装,并且能让代码正确运行,哪怕包含了作者所不期望出现的模块化代码,也可以正确的执行。

     三,怎么实现模块化?

     如果要认真说起来那得是很久很久以前.....好吧!首先是CommonJS规范的问世标志着javascript模块化正式登上舞台,然后有requirejs的AMD规范以及今天讨论的Seajs的CMD规范。所谓的规范是:有基本的书写格式和基本的交互规则。

     Seajs的CMD规范中经常使用的 API 只有 definerequirerequire.asyncexports,module.exports,了解了这5个,就会基本了解了seajs以及它的使用,我们对此分别做出简单合理的解释。

define:

define的英文本来就是定义的意思。在seajs中它是一个全局的函数。在seajs中一个js文件就是一个模块,而定义一个模块就是用define。define的用法:

  define(factory);其中factory可以是对象,字符串,函数!当为字符串和对象时候,表示模块的接口就是该对象,字符串!

     factory为函数时候,表示是模块的构造函数。

      define(function(require,exports,module){

         //模块代码 

      })

   其中require是一个函数,接受模块标识作为唯一参数,用来获取其他模块提供的接口(在书写模块代码时,必须遵循规则。只要把 require 看做是语法关键字就好啦。require 的参数值必须是字符串直接量,不要重命名require 函数,或在任何作用域中给require 重新赋值.模块 factory 构造方法的第一个参数必须命名为 require )。

比喻我在94b.js文件定义一个模块接口,94a.js用requirejs获取此接口。

  94b.js:  

    

1          define(function(require,exports,module){
2             exports.sum=function(arr){
3             var sum=0;
4             for (var i = 0; i < arr.length; i++) {
5               sum+=arr[i];
6             }
7              return sum;
8           }       
9           })

 

          94a.js:

 

1
1                   define(function(reqiure,exports,module){
2                           var a=require("94b");
3                           alert(a.sum([1,4,5]));//10
4              
5                  })

 

 

      从上面看出exports是一个对象,给模块提供向外的接口的.

      对于module.exports表示当前模块向外提供的接口。对module的用法就是这样的,并且和exports含义差不多。当有多个接口时候可以用module.exports.

      94b.js:

 

 

1         define(function(require,exports,module){
 2         module.exports={
 3          sum:function(arr){
 4             var sum=0;
 5             for (var i = 0; i < arr.length; i++) {
 6               sum+=arr[i];
 7             }
 8             return sum;
 9          },
10           add:function(aa,bb){
11               return aa+bb;
12          }
13      }       
15     })

 

 

 此时,94a.js

 

1                 define(function(reqiure,exports,module){
2                           var a=require("94b");
3                          alert(a.sum([1,4,5]));//10
4                         alert(a.add(1,5));      //6            
5                  })

 

 

define('id',deps,function)

     define 也可以接受两个以上参数。字符串 id 表示模块标识,数组 deps 是模块依赖。在开发阶段,推荐不要手写 id 和 deps 参数,因为这两个参数可以在构建阶段通过工具自动生成。

1                define('hello',['jquery'],function(require,exports,module){
2                              alert($("#id"));// object
3                  })