js模組化例項!!!!!
阿新 • • 發佈:2019-02-16
//立即執行函式寫法
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);
});