為了使得js代碼更加規劃,以及更加有結構感。很多大神就開發了一套又一套的js庫。比如requireJs, commonJs, seajs等。
模塊化主要分為AMD以及CMD 2種類型,具體什么含義呢,可以自行百度一下了解,我主要是花費一點時間,模擬一下js的模塊化依賴實現。
(function(global){ //緩存 所有的模塊 var modules = new Object(); //模塊方法的定義實現 var defined = function(moduleName, dependNames, moduleFn){ if(isArray(dependNames)){ var dependModules = resolveDepend(dependNames); if(dependModules != undefined){ modules[moduleName] = moduleFn.apply(undefined, dependModules); } }else{ modules[moduleName] = dependNames.apply(undefined); } }; //調用模塊方法 var use = function(dependNames, fn){ var dependModules = resolveDepend(dependNames); if(dependModules != undefined){ fn.apply(undefined, dependModules); } }; var resolveDepend = function(dependNames){ var dependModules = new Array(); for(var d in dependNames){ var module = modules[dependNames[d]]; if(module == undefined){ console.error("Not Found " + dependNames[d]); return ; } dependModules.push(module); } return dependModules; } //采用閉包形式, 判斷類型方法調用 var typeOf = function(){ var a = Object.PRototype.toString; return function(o){ return a.call(o); } }(); //判斷是否是一個數組 var isArray = function(a){ var typeStr = typeOf(a); return typeStr == "[object Array]" ? true : false; } /**對外暴露接口**/ global.defined = defined; global.use = use; })(window); defined("D", function(){ return function(a, b){ return a + b ; }; }); defined("C", function(){ return function(a, b){ return a - b; } }); defined("B", ["D"], function(D){ return function(a, b){ return D(a, b); }; }); defined("A", ["B", "C"],function(B, C){ return function(a, b, c, d){ return B(B(a, b), C(c, d)) } }); use(["A"], function(A){ console.info(A(1, 2, 4, 3)); }); </script>這里只是簡單的模擬,真正要達到模塊化框架,還有很多東西需要編寫,比如異步加載js等。
新聞熱點
疑難解答