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、代理模式

待續