摘要：為對象字符串時，表示模塊的接口就是該對象字符串。我們來看一個實際的例子支付寶的登陸頁面。在網(wǎng)頁支付寶收銀臺中的運用很直觀的就能看到插模塊的合并，這個合并的工作就是構建工具的功勞了。

一月份的時候，臨近放假，拿到一個需求，新增一個產(chǎn)品，我一個前端對一個java后端，兩個星期的開發(fā)時間。 因為大部分功能在別的產(chǎn)品都已經(jīng)有了，基本都是簡單處理一下拿過來，再添加一下額外需要的功能，比如選擇出行國家等。前一天拿到文檔看了下，搞清楚之后，第二天開工，基本一天就把功能做完了。這一天的大部分時間還是花在－找代碼上。無他，實在是遺留的代碼 不是很清晰。

因為系統(tǒng)比較舊，前后端也沒有分離，jsp的,代碼也很混亂，邏輯里面還有很多奇怪的注釋，在這些上面做了很多無用功。 基本做好功能，聯(lián)調測試，通過之后基本就OK了。

但是兩個周的時間才用了兩三天。還有十來天呢，怎么辦呢，看著這些混亂的代碼，本著造福別人，也為以后的方便，就想著，用模塊重新組織一下吧。因為去年有過這方面經(jīng)驗，輕車熟路。所以，就有了后來的故事和今天的這篇文字。

改造前的代碼大概是這個樣子的：

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        


        
            
            
            
            
            
            特別約定
             
            
            
            
            

            

            
            
            
            

            
            
            
        
        
            
                
                
                
                
標準保費 元/人
                
                
                
                
                
                
優(yōu)惠價 元/人
                
                
            

不多貼代碼了，大概就是這個樣子的。這種情況的原因大概是：

1.起初的頁面是后端人員寫的，沒有很好的組織各種資源。寫到一定數(shù)量之后，各種邏輯已經(jīng)耦合在一起，別的人接手之后，又不敢亂改，就按以前的做法復制粘貼，做好自己的那一塊。久而久之，頁面就越來越復雜，冗余也越來越多，形成了一個惡性循環(huán)。

2.網(wǎng)絡環(huán)境不允許。使用公司標配的聯(lián)想筆記本，標裝之后，收到公司安全策略的限制，很多技術網(wǎng)站無法訪問，查資料有時候只能看百度快照，有些同事只好用手機或者自帶電腦來解決這個問題。至于 github,google,基本是不可能的。

3.沒有代碼規(guī)范。基本每個人都是按照自己的風格來，最后歸并之后的代碼就顯得很混亂。

由于不能使用腳手架自動化工具，這種情景要做模塊化，requireJs/seaJs 是比較好的選擇。去年用過requireJs,這次就用一下seaJs.

由于項目中的樣式文件實在太多太雜，時間上不允許我重新組織一遍，所以就只對邏輯代碼做了模塊化處理。

要組織模塊，首先要弄清楚相應的規(guī)則。最好的方式當然是看 seajs文檔 了.

這里也簡單介紹下幾個常用的功能。

    
    // 頁面中包括的js
    
    

    
    

    

再看一下配置信息：

    seajs.config({
    base:"./js/",
    paths: { //當目錄比較深，或需要跨目錄調用模塊時，可以使用 paths 來簡化書寫。 
           "seajs": "seajs/2.3.0/sea.js"
    },
    alias:{ // 設置別名，方便調用 , 當模塊標識很長時，可以使用 alias 來簡化。
        "jquery" : "lib/jquery/1.10.0/jquery.min.js",
        "Hello":"mod/mod4.js",
    },
    map: [
        [".js",".js?1.0"]
    ],
    debug:true //值為 true 時，加載器不會刪除動態(tài)插入的 script 標簽。插件也可以根據(jù) debug 配置，來決策 log 等信息的輸出。
});

然后是頁面入口：

//main.js

/*
    define define(factory)

    define 接受 factory 參數(shù)，factory 可以是一個函數(shù)，也可以是一個對象或字符串。

    factory 為對象、字符串時，表示模塊的接口就是該對象、字符串。比如可以如下定義一個 JSON 數(shù)據(jù)模塊：

    define({ "foo": "bar" });
    也可以通過字符串定義模板模塊：

    define("I am a template. My name is {{name}}.");
    factory 為函數(shù)時，表示是模塊的構造方法。執(zhí)行該構造方法，可以得到模塊向外提供的接口。factory 方法在執(zhí)行時，默認會傳入三個參數(shù)：require、exports 和 module：

    define(function(require, exports, module) {

      // 模塊代碼

    });
*/
define(function (require, exports, module) {

    var $ = require("jquery");
    
    console.log($); 
            
    require("mod1");
    
    var Hello = require("Hello");
    
        Hello.init();
        
        
    // other code...
        
});

看一下模塊內的代碼：

//mod1.js
    define(function (require, exports, module) {
        console.log("mod1加載完畢");
});

//mod4.js
define("Hello",function(require,exports, module) {

    var Hello = {
            sayHello:function(){
                console.log("hello");
            }  
    }

    module.exports = Hello;
});

打開頁面控制臺，就會看到輸出的信息：

說明我們的模塊已經(jīng)被成功的被加載了。

當然 實際的工作中還要用到各種插件，這就需要知道如何改造現(xiàn)有文件為 CMD 模塊

這些在文檔中都能找到。

以上簡單介紹了使用seajs 組織模塊的方法。

當然，模塊寫完之后呢，我們還需要相應的構建工具。

玉伯說：

如果使用 Sea.js，強烈推薦采用配套的構建工具來壓縮、合并代碼。如果不這么做，可能會帶來不少額外的工作甚至隱患。

如果不合并代碼，也能運行，你會看到你的插件代碼都會以async的方式插入到頁面的頭部。而且需要你手動處理依賴關系，也產(chǎn)生了額外的請求，不是很友好。如下圖：

所以，為了避免意外的發(fā)生，也為了減少請求數(shù)，應該合并模塊。

我們來看一個實際的例子－支付寶的登陸頁面。

![clipboard.png]

很直觀的就能看到插模塊的合并，這個合并的工作就是構建工具的功勞了。

我們也來實現(xiàn)一下。

先看效果吧，執(zhí)行模塊合并之后，入口文件可以是這樣的：

這樣就實現(xiàn)了模塊的打包合并。

我這里使用了gulp來實現(xiàn)這一步， 代碼如下：

//seajs合并模式
gulp.task("seajs", function () {
    return merge(
        gulp.src(src + "/js/!(lib)/**/*.js", {base: src + "/js"})
            .pipe(transport())
            .pipe(concat({
                base: src + "/js"
            }))
            .pipe(replace({
                patterns: replace_patterns
            }))
            .pipe(gulp.dest(dist + "/js")),

        gulp.src([src + "/js/lib/**/*.js", src + "/js/common.js"], {
                base: src + "/js"
            })
            .pipe(replace({
                patterns: replace_patterns
            }))
            .pipe(gulp.dest(dist + "/js"))
    );
});

使用gulp提取模塊有其他更詳細的教程，這里提供一個我認為比較好的：

介紹一種基于gulp對seajs的模塊做合并壓縮的方式

那個支付寶的登陸頁 這里給出完整代碼，給大家觀摩：

    

        

        知道了
    



    
加載中...








            





    

        登錄支付寶    
                                                        返回
                        
    





    

        
        
        
        
                

    



        
        

            

                賬戶　
                

                    
                
            

            


    

        密碼　
        

                            
                
                    
    



                                
        

            

                下一步
            
            

                
                                    忘記密碼
                            
        
    



    
    




    

改造到最后呢,頁面邏輯清爽多了,再有新的模塊，寫好之后別人直接調用就可以了，write once, run everywhere .

define(function(require) {

    var $ = require("jquery"),
        $body = $(document.body),
        setDate = require("components/setDate"),
        selectCity = require("components/selectCity"),
        commonTools = require("tools/commonTools")，
        FastClick = require("fastClick")，
        myLayer = require("myLayer");


    //內部統(tǒng)計
    var webTrends = require("webTrends");
    webTrends.init();

    // 百度統(tǒng)計
    var baiduTrends = require("baiduTrends");
    baiduTrends.init();

    // 初始化時間選擇
    setDate.dateTime.init();
    
    //  選擇目的地
    selectCity.init();

    var actionList = {

      "applyInsurance" :function(){
          //xxx
      }
  });    

完整的代碼就不展示了，都是一些邏輯，沒什么好看的。

花了大概一個周的時間初步重構了一下項目代碼，改得很粗糙，只是做了一些大概的拆分，畢竟遺留的代碼太多，需要和小伙伴一起做這個事。

由于公司標裝的電腦用不了npm那些，最后的一步是我在mac上弄好，然后拷貝到公司電腦上，中間還出了很多問題，不過好在能跑了，至于最后能不能用起來..只能說，努力吧。

seajs 可以說是上個年代的產(chǎn)物了，不過在一些老舊項目中，依然可以發(fā)揮光和熱。

寫到這里差不多也要結束了，我呢，也算完成了給自己定的一個小目標，不算多大的貢獻，只當給自己一個交代。

以上大概就是全部內容，希望給大家?guī)硪恍﹩l(fā)和幫助，謝謝。