我們在日常開發過程中，可能有重復加載同一個資源例如:1.js,為了提高性能和用戶體驗這里我們用原生JS實現同一個資源只加載一次。
下面是 common.js里的JS代碼
//使用沙箱模式防止污染外面的變量 ; (function () { //讓外面可以只能訪問到require變量 window.require = require; //定義一個加載模塊的方法 function require(moduleName, callback) { //創建加載模塊的具體實現類 var requireHelper = new RequireHelper(moduleName, callback); //調用加載模塊類的load方法加載模塊 requireHelper.load(); } //存儲已加載模塊的信息 var moduleList = []; //創建一個實體類,給傳進來的屬性賦值 function RequireHelper(moduleName, callback) { this.moduleName = moduleName; this.callback = callback; } //給模塊加載實現類的原型添加方法 RequireHelper.prototype = { //加載模塊 load: function () { var that = this; var moduleName = that.moduleName; if (that.isLoad()) {//模塊已被加載(資源優化:已經請求的模塊不要再次加載) var moduleInfo = that.getModuleInfo();//獲取模塊的描述信息 if (moduleList.isLoad) {//如果模塊資源已加載完成 that.callback();//可以放心的調用模塊對應的回調函數 } else {//模塊資源沒加載完 var oldCallback = moduleInfo.callback;//取出之前的回調函數 moduleInfo.callback = function () {//追加回調函數 oldCallback(); that.callback(); }; } } else {//模塊沒有加載 var script = document.createelement("script"); script.src = that.modulename; document.getelementsbytagname("head")[0].appendchild(script);//加載模塊 var moduleInfo = { moduleName: that.moduleName, isLoad: false, callback: function () { that.callback(); } };//添加模塊的描述信息 script.onload = function () { moduleInfo.callback();//執行模塊對應的回調函數 moduleInfo.isLoad = true;//標識模塊資源被加載完成 } } }, //判斷指定模塊是否加載 isLoad: function () { return this.getModuleInfo() == null ? false : true; }, //根據模塊名稱獲取模塊信息 getModuleInfo: function () { for (var i = 0; i < moduleList.length; i++) { if (that.moduleName == moduleList[i].name) { return moduleList; } } return null; } }; })(window)
下面是xd1.js
function say() { alert("111111"); }
下面是html代碼
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <script src="Common.js"></script> <script type="text/javascript"> require("xd1.js", function () { say(); }); require("xd1.js", function () { alert(222); }); </script> </body> </html>