javascript 構建模塊化開發

在使用 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 模塊,的子模塊 sub
	F.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 模塊,的子模塊 sub
	Sea.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)
	});