JavaScript模式读书笔记第5章对象创建模式 1

首页 > 代码库 > JavaScript模式读书笔记第5章对象创建模式 1

JavaScript模式读书笔记第5章对象创建模式 1

2024-08-03 14:28:58 215人阅读

1，命名空间模式 namespace

  <script>
	
	 var myApp = {};//通过全局变量来实现命名空间
	 maApp.Parent = function (){
	 
	 };
	 myApp.Child = function(){
		
	 };
  </script>

通用命名空间函数

  <script>
	 //不安全代码
	 var myApp = {};
	 //安全代码
	 if(typeof myApp === "undefined"){
		
		var myApp = {};
	 }
	 //或者使用更短的语句
	 var myApp = myApp || {};
  </script>

使用命名空间函数

  <script>
	myApp.namespace("myApp.modules.module2");
	//等同于如下代码
	var myApp = {
		
		modules : {
			
			module2:{}
		}
	};
  </script>

<script>
	var myApp = myApp || {};
 
	myApp.namespace = function(ns_string){
 
		var parts = ns_string.split(‘.‘), parent = myApp, i;
 
		if(parent[0] === "myApp"){
			
			parts = parts.slice(1);
		}
 
		for(i = 0; i < parts.length; i++){
			
			if(typeof parent[parts[i]] === "undefined"){
				
				parent = parent[parts[i]];
			}
		}
		return parent;
	};
 
	var modules2 = myApp.namespace("myApp.modules.module2");
	console.log(modules2 === myApp.modules.module2);
 
	myApp.namespace("modules.module2");
  </script>

2，声明依赖关系

js库通常是模块化且依据命名空间组织的。

  var myFunction = function(){
  
     var event = YAHOO.util.event,
      dom = YAHOO.util.Dom;

}

3，私有属性和方法

JS并没有特殊的语法来表示私有。JS中所有对象的成员是公共的。

	var myObj = {
  
		myProp : 1,
	    getPro: function(){
	  
			return this.myProp;
	   }
	  
	};
	console.log(myObj.myProp);
	console.log(myObj.getPro());

但是可以使用闭包实现成员私有化。

  <script>
	function Gadget(){
	
		//私有成员
		var name = "iPoid";
		//共有函数
		this.getName = function(){
			
			return name;
		};
	}
 
	var toy = new Gadget();
 
	console.log(toy.name);//undefined
	console.log(toy.getName);//iPoid 
  </script>

私有性失效：因为涉及到引用传值，如果传递私有属性给外部，则外部可直接访问私有属性，如下：

 <script>
	function Gadget(){
	
		//私有成员
		var specs = {
			
			screen_width: 320,
			screen_hight: 650,
			color: ‘RED‘
		};
		//共有函数
		this.getSpecs = function(){
			
			return specs;
		};
	}
 
	var toy = new Gadget(),
		specs = toy.getSpecs();
	specs.color = "GUESS";
	console.log(specs.screen_width);//320
	console.log(specs.color);//GUESS
 
	console.dir(toy.getSpecs());
 
  </script>

4，对象字面量以及私有属性

    <script>
	var myObj = (function(){
		
		var name = "name";
 
		return {
			
			getName: function(){
				
				return name;
			}
		};
	}());
	
	console.log(myObj.getName());//name
  </script>

5，原型和私有性

通过prototype可以动态的给对象添加属性和方法。

  <script>
	function Gadget(){
		
		var name = "Ipod";
 
		this.getName = function(){
			
			return name;
		};
	}
 
	Gadget.prototype = (function(){
		
		var browser = "others";
 
		return{
			
			getBrowser: function(){
				
				return browser;
			}
		};
	}());
 
	var toy = new Gadget();
	console.log(toy.getName());//name
	console.log(toy.getBrowser());//others
  </script>

6，将私有方法揭示为公共方法

通过全局变量可以将匿名函数的私有方法公开。

  <script>
	  var myArray;
 
	  (function(){
		
		var astr = "[object Array]",
			toString = Object.prototype.toString;
 
			function isArray(s){
				
				return toString.call(s) === astr;
			}
 
			function indexOf(haystack, needle){
				
				var i = 0, 
					max = haystack.length;
				
				for(; i < max; i+= 1){
					
					if(haystack[i] === needle){
						
						return i;
					}
				}
				return -1;
			}
			 myArray = {isArray: isArray, 
						indexOf: indexOf,
						inArray: indexOf};
 
			
			console.log(myArray.isArray([1, 2]));//true
			console.log(myArray.isArray({0 : 1}));//false
			console.log(myArray.indexOf(["a", "b"], "a"));//0
			console.log(myArray.indexOf(["a", "b"], "d"));//-1
	  }());
 
		console.log(myArray.indexOf(["a", "b"], "a"));//0
		console.log(myArray.indexOf(["a", "b"], "d"));//-1
  </script>

7，模块模式

模块模式通过命名空间，完成函数变量定义和使用。

<script>
	myApp.namespace("myApp.util.array");
	myApp.util.array = (function(){
		
		var uobj = myApp.util.object, 
					ulang = myApp.util.lang,
					array_string = "[object Array]",
					ops = Object.prototype.toString;
		
		return {
			
			inArray: function(needle, haystack){
				
				for(var i = 0, max = haystack.length; i < max; i+= 1){
					
					if(haystack[i] === needle){
					
						return true;
					}
				}
			},
 
			isArray: function(s){
				
				return ops.call(a) === array_string;
			}
		};	
 
 
	}());
  </script>

通过揭示模式暴漏想暴漏的方法。

<script>
	myApp.namespace("myApp.util.array");
	myApp.util.array = (function(){
		
		var uobj = myApp.util.object, 
					ulang = myApp.util.lang,
					array_string = "[object Array]",
					ops = Object.prototype.toString;
		
			
			inArray: function(needle, haystack){
				
				for(var i = 0, max = haystack.length; i < max; i+= 1){
					
					if(haystack[i] === needle){
					
						return true;
					}
				}
			},
 
			isArray: function(s){
				
				return ops.call(a) === array_string;
			};	
 
			return {
				
				isArray: isArray,
				indexOf: inArray
			};
	}());
  </script>

创建构造函数的模块

    
 <script>
	myApp.namespace("myApp.util.array");
	myApp.util.array = (function(){
		
		var uobj = myApp.util.object, 
					ulang = myApp.util.lang;
 
		Constr;
 
		Constr = function(o){
			
			this.elements = this.toArray(o);
		};
 
		//共有API原型
		Constr.prototype = {
			
			constructor: myApp.util.array,
			version: "2.0",
			toArray: function(obj){
				
				for(var i = 0, a= [], len = obj.length; i < len; i+= 1){
					
					a[i] = obj[i];
				}
 
				return a;
			}
		};
 
		//返回要分配给新命名空间的构造函数
		return Constr;
	});
 
	var arr = new myApp.util.array([obj]);
  </script>

8，将全局变量导入到模块中

<script>
	MYAPP.util.module = (function(app, global){
		
		//
	}(MYAPP, this));
  </script>

JavaScript模式读书笔记第5章对象创建模式 1

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > JavaScript模式读书笔记 第5章 对象创建模式 1

JavaScript模式读书笔记 第5章 对象创建模式 1

看完仍有疑问？有类似问题直接问程序猿

首页 > 代码库 > JavaScript模式读书笔记第5章对象创建模式 1

JavaScript模式读书笔记第5章对象创建模式 1