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);
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.