工作中使用seajs后的一些总结

时间：2022-08-08 14:39:49

工作中用seajs一段时间了，小小地总结一下。

使用seajs五部曲：

　　　　1.布置你项目的目录结构

　　　　2.设置seajs的config项，我一般是单独一个js文件--> seajs-config.js,  主要是重置一下base路径，一般比较少用paths，而用alias比较多，因为项目上线前直接把alias这些配置给grunt直接构建提取模块id　　

 /**

  * 配置项目

  *

  */

 seajs.config({

     "base": "/js",

     "paths": {

         "seajs": "sea-modules/seajs"

     },

     "alias": {

         "jquery": "sea-modules/library/jquery/1.11.1/jquery.js",

         "bindonce": "sea-modules/library/angular/1.2.20/bindonce.js",

         "handlebars": "sea-modules/library/handlebars/1.3.0/handlebars.js",

         "mustache": "sea-modules/library/mustache/0.8.1/mustache.js",

         "angular": "sea-modules/library/angular/1.3.0-beta.15/angular.min.js",

         "iscroll5": "sea-modules/library/iscroll/iscroll.js",

         "cart": "sea-modules/custom/cart/1.1.0/cart.js",

         "favorite": "sea-modules/custom/favorite/0.1.0/favorite.js",

         "cookies": "sea-modules/custom/cookies/0.1.0/cookies.js",

         "globalloading": "",

         "tipslayer": "sea-modules/custom/tipslayer/0.1.0/tipslayer.js",

         "verify": "sea-modules/custom/verify/0.1.0/verify.js",

         "slider": "sea-modules/custom/slider/0.2.0/slider.js",

         "tips": "sea-modules/custom/tips/1.2.0/tips.js",

         "share": "sea-modules/custom/share/0.2.0/share.js",

         "lazyload": "sea-modules/custom/lazyload/0.1.0/lazyload.js",

         "emoji": "sea-modules/custom/emotion/zepto_emoji.js",

         "iscroll": "sea-modules/custom/iscroll/4.2.5/iscroll.js",

         "dialog": "sea-modules/custom/dialog/1.1.1/dialog.js",

         "pageloader": "sea-modules/custom/pageloader/0.1.0/pageloader.js",

         "loading": "sea-modules/custom/loading/0.1.0/loading.js",

         "report": "sea-modules/custom/report/report.js",

         "imgbrowse": "sea-modules/custom/imgbrowse/0.1.0/imgbrowse.js",

     },

     "map": [

         // [".js", ".js?v2"]

     ],

     "debug": 2

 });

　　　　3.定义模块

define(function(require, exports, module) {

    data =  123;

    return data;                    //对外接口

    //module.exports = data;        //也可这样，对外接口

    //exports.data = data;        //也可这样，对外接口

});

　　　　4.解决依赖 ，在定义模块时，如果依赖其它的文件，直接require一下

define(function(require, exports, module) {

    var $ = require('jqeury');

    //do something...

    data =  123;

    return data;                    //对外接口

    //module.exports = data;        //也可这样，对外接口

    //exports.data = data;        //也可这样，对外接口

});

　　　　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

相关文章