1. 程式人生 > >js模組化例項!!!!!

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);

});