zoukankan      html  css  js  c++  java
  • 工作中使用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

  • 相关阅读:
    .gitignore
    composer安装tp各版本(旧版本不能安装)
    教你用Fiddler在电脑上抓手机上的包
    EF 实现Mysql IN功能的两种方式
    C# foreach 底层原理分析及自定义 MyList
    VS2019 控制台程序调试, 报FatalExecutionEngineError错误
    服务器 IIS发布C# webapi网站报404
    C# 实现Get/Post请求
    VS2015 启动本地webapi项目 ,报503
    count(字段) 、count(主键 id)、 count(1)、count(*)
  • 原文地址:https://www.cnblogs.com/Ivangel/p/4304781.html
Copyright © 2011-2022 走看看