在使用 sea.js 、require.js 、 angular 的時候。
我們使用到 define 、 module（require） 的方式，定義模塊，和依賴模塊
下面給出 define 和 module 的簡單實現。 其本質，就是往一個對象上面添加方法
var F = {};F.define = function(str,fn){ var parts = str.split("."); var parent = this; // parent 當前模塊的父模塊 var i = len = 0; //如果第一個模塊是模塊單體對象,則移除 if(parts[0] == "F"){ parts = parts.slice(1); } //屏蔽對 define module 模塊方法重寫 if(parts[0] == "define" || parts[0] == "module"){ return ; } for(len = parts.length; i < len-1; i++){ //如果父模塊中不存在當前模塊 if(typeof parent[parts[i]] === 'undefined'){ //聲明當前模塊 parent[parts[i]] = {}; } //緩存下一層父模塊 parent = parent[parts[i]]; } if(fn && parts[i]){ //如果給定模塊方法,則綁定該模塊的方法, parent[parts[i]] = fn(); } return this;} F.module = function(){ var args = [].slice.call(arguments);//復制參數 var fn = args.pop(); //獲取回調 var parts = args[0] && args[0] instanceof Array ? args[0] : args; //模塊的依賴 var modules = []; //模塊的路由 var modIDs = ""; //依賴模塊的索引 var i = 0; var len = parts.length; // 依賴模塊的長度 var parent,j,jlen; //父級模塊,模塊路由層級索引,模塊路由層級長度 while(i < len){ if(typeof parts[i] == "string"){ parent = this; //解析路由,并且屏蔽掉 F modIDs = parts[i].replace(/^F/./,"").split("."); //遍歷模塊層級 for( j = 0,jlen = modIDs.length; j < jlen; j++){ //迭代 父模塊 parent = parent[modIDs[j]] || false; } modules.push(parent); //將模塊添加到依賴列表 }else{ //直接將模塊添加到依賴列表 modules.push(parts[i]); } //取下一個模塊 i++; } //執行回調,將依賴的模塊注入 fn.apply(null,modules); } //定義 string 模塊F.define("string",function(){ return { trim(str){ return str.replace(/^s+|/s+$/g,""); } }});//定義 string 模塊,的子模塊 subF.define("string.sub",function(){ return { low(str){ return str.toLowerCase(); } }});console.log(F);//使用模塊F.module(["string","string.sub",document],function(str,strSub,doc){ console.log(str,strSub,doc)});當然了，這里使用的，F 對象，實際應用中，應該寫在閉包里面。不能讓外界直接訪問，于是有如下代碼。
var Sea = (function(){ var F = {}; F.define = function(str,fn){ var parts = str.split("."); var parent = this; // parent 當前模塊的父模塊 var i = len = 0; //如果第一個模塊是模塊單體對象,則移除 if(parts[0] == "F"){ parts = parts.slice(1); } //屏蔽對 define module 模塊方法重寫 if(parts[0] == "define" || parts[0] == "module"){ return ; } for(len = parts.length; i < len-1; i++){ //如果父模塊中不存在當前模塊 if(typeof parent[parts[i]] === 'undefined'){ //聲明當前模塊 parent[parts[i]] = {}; } //緩存下一層父模塊 parent = parent[parts[i]]; } if(fn && parts[i]){ //如果給定模塊方法,則綁定該模塊的方法, parent[parts[i]] = fn(); } return this; } F.module = function(){ var args = [].slice.call(arguments);//復制參數 var fn = args.pop(); //獲取回調 var parts = args[0] && args[0] instanceof Array ? args[0] : args; //模塊的依賴 var modules = []; //模塊的路由 var modIDs = ""; //依賴模塊的索引 var i = 0; var len = parts.length; // 依賴模塊的長度 var parent,j,jlen; //父級模塊,模塊路由層級索引,模塊路由層級長度 while(i < len){ if(typeof parts[i] == "string"){ parent = this; //解析路由,并且屏蔽掉 F modIDs = parts[i].replace(/^F/./,"").split("."); //遍歷模塊層級 for( j = 0,jlen = modIDs.length; j < jlen; j++){ //迭代 父模塊 parent = parent[modIDs[j]] || false; } modules.push(parent); //將模塊添加到依賴列表 }else{ //直接將模塊添加到依賴列表 modules.push(parts[i]); } //取下一個模塊 i++; } //執行回調,將依賴的模塊注入 fn.apply(null,modules); } return { define:function(){ F.define.apply(F,arguments); }, module:function(){ F.module.apply(F,arguments); } }})(); //定義 string 模塊Sea.define("string",function(){ return { trim(str){ return str.replace(/^s+|/s+$/g,""); } }});//定義 string 模塊,的子模塊 subSea.define("string.sub",function(){ return { low(str){ return str.toLowerCase(); } }});console.log(Sea);//使用模塊Sea.module(["string","string.sub",document],function(str,strSub,doc){ console.log(str,strSub,doc)});以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
