requirejs與seajs

AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。
CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。 javascript

對於依賴的模塊,AMD 是提早執行,CMD 是延遲執行java

// CMD  
define(function(require, exports, module) {  
var a = require('./a')  
a.doSomething()  
// 此處略去 100 行  
var b = require('./b') // 依賴能夠就近書寫  
b.doSomething()  
// ...   
})  
  
// AMD 默認推薦的是  
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好  
a.doSomething()  
// 此處略去 100 行  
b.doSomething()  
...  
}) 

寫法對比:jquery

配置文件bootstrap

require.config({
    baseUrl:'/js',  //根路徑
    path:{
        'jquery':'./query.js',
        'bootstrap':'./bootstrap',
        'backone':'./backone',
        'modernizr':',.modernizr'
    },
    shim:{
        'modernizr':{
            exports:'modernizr'  //不支持amd
        },
        'bootstrap':['jquery']  //依賴
    },
    map:{
        '*':{
            'jquery':'./jquery1.2.4'    //默認版本
        },
        'jq2':{
            'jquery':'./jquery2.2.4'    //升級版本
        }
    },
    waitSecound:0,  //下載js等待時間默認7s,0爲一直等待,不然報失敗信息
})
seajs.config({
    //設置路徑
 paths: { 'gallery': 'https://a.alipayobjects.com/gallery' }, // 設置別名,方便調用  alias: { 'underscore': 'gallery/underscore' }, debug:false, // 文件編碼 charset: 'utf-8' });

模塊定義:app

  //app.js   require
    define([],function(){
        var add = function(msg, callback) {
                        console.log(msg);
                        callback();
                      };
        return add;
    });
    //app.js   seajs
    define(function(require,exports,module){
        module.exports = {
            add : function(msg, callback) {
                console.log(msg);
                callback();
            }
        }
    });

使用模塊:requirejs

  //requirejs
    define(['app'], function(app) {
        app.add("Hello World", function () {
            console.log("成功");
        });
    });
    //seajs
    seajs.use(['app'],function(app){
        app.add("Hello World", function () {
            console.log("成功");
        });
    })
相關文章
相關標籤/搜索