为了使得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等。
新闻热点
疑难解答