js 设计模式

　　首先咱们须要知道JavaScript与传统的面向对象编程（oop）不一样，它没有传统意义上的类，该语言的一切都是基于对象，依靠的是一套原型（prototype）系统。JavaScript经过原型委托的方式实现对象与对象之间的继承，而不是传统面向对象语言中的类式继承。

　　动态类型语言的变量类型要到程序运行时，待变量赋值后，才能肯定某种类型，而JavaScript就是一门典型的动态类型语言。

1、原型模式

　　原型模式是用于建立对象的一种模式，可经过克隆来建立一个对象，最新的ECMAScript5提供了Object.create 方法来克隆对象：

<script>
var fruit={price:15,name:"apple"}
var demo=Object.create(fruit);
alert(demo.name);//apple

//或者：
function sch(){
　　this.name="hube";
　　this.age=100;
}
var tt=new sch(); 
var t=Object.create(tt);
　　alert(t.age);//100


//在不支持的该方法的浏览器中，则能够使用以下polyfill代码：
Object.create=function(obj){
　　var F=function(){};//定义了一个隐式的构造函数
　　F.prototype=obj;
　　return new F();  //仍是经过new来实现的
}
</script>

　　Object.create()方法会使用指定的原型对象及其属性去建立一个新的对象。事实上JavaScript有一个根对象的存在，它就是Object.prototype对象，Object.prototype是一个空对象，咱们建立的每个对象都是从Object.prototype克隆而来：

var t={};// 以字面量方式建立的空对象就至关于:var t= Object.create(Object.prototype);
var s=new Object();
alert(Object.getPrototypeOf(t)===Object.prototype);//true
alert(Object.getPrototypeOf(s)===Object.prototype);//true

　　上面建立二个”空“对象，利用了ECMAScript5的Object.getPrototypeOf方法查看到了二个对象的原型。这里的”空“加引号不是真正的空对象，它还继承了Object的一些属性及方法。建立一个空对象使用Object.create()便可：

var o = Object.create(null);//建立一个原型为null的空对象

　　该模式不限于此，它更多的是提供了一种便捷的方式去建立某个类型的对象。

原型继承：

　　实际上经过对对象构造器的原型动态赋值给其余对象来实现”类“与”类“之间的原型继承：

var A=function(){};
A.prototype.sayName=function(){alert("hi");}

var B=function(){};
B.prototype=new A();//这是核心代码：它重写了B的原型，它和把B.prototype直接赋值给字面量对象相比没有本质区别，
                    //都是将对象构造器的原型指向另外一个对象，而继承老是发生在对象与对象之间。
var b=new B();
b.sayName();//hi 

 2、单例模式

　　单例模式定义：保证一个类只有一个实例，并提供一个访问它的全局访问点。

　　不过在js中并没有“类”这一说，单例模式的核心是确保只有一个实例，并提供全局访问。咱们常常会把全局变量当成单例来使用，例如这样的形式：

　var d={};

　　不过这样使用全局变量会很容易形成命名空间的污染。咱们有必要尽可能减小全局变量的使用，将污染下降到最低为止。

如下二种方法能够相对下降全局变量带来的命名污染：

一、使用命名空间

　　最简单的方式是使用对象字面量的形式：

var nameSpace={
　　a:"jack",
　　b:function(){}
};

　　这里咱们将a和b做为nameSpace的属性，这样能够减小变量和全局做用域碰面的机会。此外咱们还能够动态的建立命名空间。

二、使用闭包来封装私有变量

　　咱们能够使用当即执行函数，来模拟块级做用域，把变量封装在闭包的内部，只暴露一些接口跟外界通讯：

<button id="btn">click</button> 

var demo=(function(){
    var name="jack",age=18;
 
 return {
    getInfo:function(){    
        return name+"-"+age;    
    }     
 }
 })();
 alert(demo.getInfo());//jack-18

　　惰性单例：是指只在须要的时候才建立对象的实例。比较实用。

下面是一个惰性单例的例子：

<button id="btn">click</button>
<script>
 var creatediv=(function(){
 var div;
 return function(){
    if(!div){
    div=document.createElement("div");
    div.style.width="200px";
    div.style.height="200px";
    div.style.border="1px solid red";
    div.style.display="none";
    document.body.appendChild(div);
    }
    return div;
 }
 })();
 document.getElementById("btn").onclick=function(){
 
 var show=creatediv();
    show.style.display="block";
 };
</script>

 

3、策略模式

4、代理模式

待续