工做中使用seajs後的一些總結

工做中用seajs一段時間了，小小地總結一下。

使用seajs五部曲：

　　　　1.佈置你項目的目錄結構

　　　　2.設置seajs的config項，我通常是單獨一個js文件--> seajs-config.js,  主要是重置一下base路徑，通常比較少用paths，而用alias比較多，由於項目上線前直接把alias這些配置給grunt直接構建提取模塊id　　

 1 /**
 2  * 配置項目
 3  *
 4  */
 5 seajs.config({
 6     "base": "/js",
 7     "paths": {
 8         "seajs": "sea-modules/seajs"
 9     },
10     "alias": {
11         "jquery": "sea-modules/library/jquery/1.11.1/jquery.js",
12         "bindonce": "sea-modules/library/angular/1.2.20/bindonce.js",
13         "handlebars": "sea-modules/library/handlebars/1.3.0/handlebars.js",
14         "mustache": "sea-modules/library/mustache/0.8.1/mustache.js",
15         "angular": "sea-modules/library/angular/1.3.0-beta.15/angular.min.js",
16         "iscroll5": "sea-modules/library/iscroll/iscroll.js",
17         "cart": "sea-modules/custom/cart/1.1.0/cart.js",
18         "favorite": "sea-modules/custom/favorite/0.1.0/favorite.js",
19         "cookies": "sea-modules/custom/cookies/0.1.0/cookies.js",
20         "globalloading": "",
21         "tipslayer": "sea-modules/custom/tipslayer/0.1.0/tipslayer.js",
22         "verify": "sea-modules/custom/verify/0.1.0/verify.js",
23         "slider": "sea-modules/custom/slider/0.2.0/slider.js",
24         "tips": "sea-modules/custom/tips/1.2.0/tips.js",
25         "share": "sea-modules/custom/share/0.2.0/share.js",
26         "lazyload": "sea-modules/custom/lazyload/0.1.0/lazyload.js",
27         "emoji": "sea-modules/custom/emotion/zepto_emoji.js",
28         "iscroll": "sea-modules/custom/iscroll/4.2.5/iscroll.js",
29         "dialog": "sea-modules/custom/dialog/1.1.1/dialog.js",
30         "pageloader": "sea-modules/custom/pageloader/0.1.0/pageloader.js",
31         "loading": "sea-modules/custom/loading/0.1.0/loading.js",
32         "report": "sea-modules/custom/report/report.js",
33         "imgbrowse": "sea-modules/custom/imgbrowse/0.1.0/imgbrowse.js",
34     },
35     "map": [
36         // [".js", ".js?v2"]
37     ],
38     "debug": 2
39 });
40     

View Code

　　　　3.定義模塊

define(function(require, exports, module) {

    data =  123;

    return data;                    //對外接口
    //module.exports = data;        //也可這樣，對外接口
    //exports.data = data;        //也可這樣，對外接口
    
});

View Code

　　　　4.解決依賴 ，在定義模塊時，若是依賴其它的文件，直接require一下

define(function(require, exports, module) {

    var $ = require('jqeury');

    //do something...

    data =  123;

    return data;                    //對外接口
    //module.exports = data;        //也可這樣，對外接口
    //exports.data = data;        //也可這樣，對外接口
    
});

View Code

　　　　5.調用模塊， 在html文件用seajs.use來調一下主文件

<script type="text/javascript">
        seajs.use('web/feedback_chat.js');
</script>

實際工做中通常都是在重複這幾步，第一個項目的目錄的目錄結構定下來就不變了， config文件中base通常是不變的了，就是不斷的加alias， 而後定義模塊，  在模塊裏require解決依賴,  最後在html文件裏 seajs.use調用。

而後再把seajs的路徑問題解決基本就OK了-->  這是seajs官網的解釋 https://github.com/seajs/seajs/issues/258

以前也小小寫了下總結，有點亂沒時間整理，也發上來吧--> http://www.cnblogs.com/Ivangel/p/4304811.html

最後就是在項目上線以前用grunt構建一下。這是我寫的一個小demo-->  https://github.com/ivan403704409/seajs-transport-demo