js模塊化實例!!!!!


//立即執行函數寫法
var module1 = (function () {
    var _count = 0;
    var m1 = function () {
        //....
    };
    var m2 = function () {
        //....
    };
    return {
        m1:m1,
        m2:m2
    }
})();//閉包
console.info(module1.m1);

//放大模式,添加方法
var module2 = (function (mod) {
    mod.m3 = function () {

        //...
    }

    return mod;
})(module1);

module2.m3;

//寬放大模式
var module3 = (function (mod) {
  //.....

})(window.module1 || {});

//輸入全局變量jquery, YAHOO
var module4 = (function ($, YAHOO) {

    //...


})(jQuery, YAHOO);

//math.js   require()用於加載模塊
//同步加載
var math = require('math');
math.add(2, 3);

//異步加載模塊
require(['math'], function (math) {
    math.add(3, 4);
   
});
//對模塊的加載行爲進行自定義
require.config({
    baseUrl: "js/lib",
    paths: {
        "jquery": "jquery.min",
        "baidu":"http://www.baidu.com"
    }

});

//AMD模塊的寫法
//main.js文件代碼如下:
define(function () {
    var add = function (x, y) {

        return x + y;
    }
    return {
        add: add
    };
});
//加載上面main.js模塊:
define(["main"], function (main) {
    function foo() {
        main.add(2, 3);
    }
    return {
        foo: foo
        };
});
//加載非規範的模塊
//比如underscore和backbone這兩個庫,都沒有采用AMD規範編寫
require.config({
    shim: {
        'underscore': {
             exports: '_'//外部調用undersocore的名稱
        },
        'backbone': {
            deps: ['underscore','jquery'],//表明該模塊的依賴性
            exports: 'Backbone'
        }

    }

});
//加載插件DOM
require(['domready!'], function (doc) {

    // called once the DOM is ready

});
//加載text和image插件,
define(['text!review.txt','image!cat.jpg'],function (review, cat) {
    console.log(review);
    document.body.appendChild(cat);

});








發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章