JavaScript模块化编程之require.js与sea.js

  为何要模块化：当今，网站以再也不是一个简单的页面，JavaScript也再也不是作一些简单的脚本验证，随着WEB.20时代到来，前端工程师面临的必将是愈来愈庞大的JavaScript代码，愈来愈复杂的内部逻辑。   从而，团队化的合做开发成为必然，各类软件工程技术的引进使得JavaScript的模块化开发成为必然与必须。

  本文将主要讨论require.js(AMD)以及sea.js(CMD)

      AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出。

      CMD 是 SeaJS 在推广过程当中对模块定义的规范化产出。

sea.js(CMD)就近依赖： 即在代码运行时，首先是不知道依赖的，须要遍历全部的require关键字，从而找出依赖(使用字符串的正则表达式匹配)，与AMD的依赖引入方法相比，确实有其方便之处，但前提是以性能为代价的。  下面举一个简单的例子，

  文件目录结构：

--------------------------------------------------------------------------------------------------------------------------------------------------------------

  在index页面中进行配置入口模块的加载，

固然，对于一些sea.js行为的配置，远远不止这些，有兴趣的同窗能够查一下做者的github上的对应部分：Sea.js配置

--------------------------------------------------------------------------------------------------------------------------------------------------------------

模块的搭建：  可分为：模块定义(define)，依赖引入，接口暴漏

define(function(require, exports, module) {
    // 经过 require 引入依赖
    //var $ = require('jquery');
    //var Spinning = require('./spinning');

    // type1
    // 经过 exports 对外提供接口
    exports.doSomething3 = function(){
        console.log("do3");
    };

    //type2
    var a = {};
    a.doSomething = function(){
        console.log("MyOk");
    };

    a.doSomething2 = function(){
        console.log("MyOk2");
    };
    // 或者经过 module.exports 提供整个接口
    module.exports = a;
});

     入口的定义其实和模块的定义同样，只是通常不会对外暴漏接口且只负责引入与执行(开启执行)，如C中的main函数同样。

 

 

require.js(AMD,依赖前置，即在执行当前模块时，咱们必须指定当前模块所依赖的模块项，并逐个按循序引入)，这样的一种依赖引入模式，相比于CMD，js引擎无需遍历整个工程去找相应的依赖，而是直接引入便可。  下面以一个require的实例为例，我想读者应该很快就能get it。  其实

项目目录：

--------------------------------------------------------------------------------------------------------------------------------------------------------------

加载require.js

data-main:就是咱们整个模块总体的入口点。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

在main.js中使用require.config()方法，对模块的加载行为进行自定义。

与sea.js相似，baseUrl定义了整个require.js的基础路径，全部模块的引入都将依赖这个路径或者说：文件夹。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

重头戏，require.js中的模块的定义：

require是经过define函数的参数中匿名函数前面的一个String数组来存储咱们所要引入的依赖，如此处要使用的car模块，那么就必须将car这个模块的就baseUrl色路径以字符串数组一个元的形式给出，  与sea.js相比(require('jquery'))，确实比较麻烦，但我前面也说过，方便必须是创建在性能代价的基础上. 关于require在软依方面的使用，请移步高人微博。

 

其实每种技术的优点都不是绝对的，sea.js也只有其独特魅力，只是做者理解的过于肤浅，我想，只有最合适的业务逻辑，没有最合适的技术。

 

That’s   all