首先我們需要知道JavaScript與傳統(tǒng)的面向?qū)ο缶幊?#xff08;oop）不同，它沒有傳統(tǒng)意義上的類，該語言的一切都是基于對(duì)象，依靠的是一套原型（prototype）系統(tǒng)。JavaScript通過原型委托的方式實(shí)現(xiàn)對(duì)象與對(duì)象之間的繼承，而不是傳統(tǒng)面向?qū)ο笳Z言中的類式繼承。

　　動(dòng)態(tài)類型語言的變量類型要到程序運(yùn)行時(shí)，待變量賦值后，才能確定某種類型，而JavaScript就是一門典型的動(dòng)態(tài)類型語言。

一、原型模式

　　原型模式是用于創(chuàng)建對(duì)象的一種模式，可通過克隆來創(chuàng)建一個(gè)對(duì)象，最新的ECMAScript5提供了Object.create 方法來克隆對(duì)象：

<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(){};//定義了一個(gè)隱式的構(gòu)造函數(shù)F.prototype=obj;return new F(); //還是通過new來實(shí)現(xiàn)的 } </script>

　　Object.create()方法會(huì)使用指定的原型對(duì)象及其屬性去創(chuàng)建一個(gè)新的對(duì)象。事實(shí)上JavaScript有一個(gè)根對(duì)象的存在，它就是Object.prototype對(duì)象，Object.prototype是一個(gè)空對(duì)象，我們創(chuàng)建的每一個(gè)對(duì)象都是從Object.prototype克隆而來：

var t={};// 以字面量方式創(chuàng)建的空對(duì)象就相當(dāng)于:var t= Object.create(Object.prototype); var s=new Object(); alert(Object.getPrototypeOf(t)===Object.prototype);//true alert(Object.getPrototypeOf(s)===Object.prototype);//true

　　上面創(chuàng)建二個(gè)”空“對(duì)象，利用了ECMAScript5的Object.getPrototypeOf方法查看到了二個(gè)對(duì)象的原型。這里的”空“加引號(hào)不是真正的空對(duì)象，它還繼承了Object的一些屬性及方法。創(chuàng)建一個(gè)空對(duì)象使用Object.create()即可：

var o = Object.create(null);//創(chuàng)建一個(gè)原型為null的空對(duì)象

　　該模式不限于此，它更多的是提供了一種便捷的方式去創(chuàng)建某個(gè)類型的對(duì)象。

原型繼承：

　　實(shí)際上通過對(duì)對(duì)象構(gòu)造器的原型動(dòng)態(tài)賦值給其他對(duì)象來實(shí)現(xiàn)”類“與”類“之間的原型繼承：

var A=function(){}; A.prototype.sayName=function(){alert("hi");}
var B=function(){}; B.prototype=new A();//這是核心代碼：它重寫了B的原型，它和把B.prototype直接賦值給字面量對(duì)象相比沒有本質(zhì)區(qū)別，//都是將對(duì)象構(gòu)造器的原型指向另一個(gè)對(duì)象，而繼承總是發(fā)生在對(duì)象與對(duì)象之間。 var b=new B(); b.sayName();//hi

?二、單例模式

　　單例模式定義：保證一個(gè)類只有一個(gè)實(shí)例，并提供一個(gè)訪問它的全局訪問點(diǎn)。

　　不過在js中并無“類”這一說，單例模式的核心是確保只有一個(gè)實(shí)例，并提供全局訪問。我們經(jīng)常會(huì)把全局變量當(dāng)成單例來使用，例如這樣的形式：

　var d={};

　　不過這樣使用全局變量會(huì)很容易造成命名空間的污染。我們有必要盡量減少全局變量的使用，將污染降低到最低為止。

以下二種方法可以相對(duì)降低全局變量帶來的命名污染：

1、使用命名空間

　　最簡(jiǎn)單的方式是使用對(duì)象字面量的形式：

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

　　這里我們將a和b作為nameSpace的屬性，這樣可以減少變量和全局作用域碰面的機(jī)會(huì)。此外我們還可以動(dòng)態(tài)的創(chuàng)建命名空間。

2、使用閉包來封裝私有變量

　　我們可以使用立即執(zhí)行函數(shù)，來模擬塊級(jí)作用域，把變量封裝在閉包的內(nèi)部，只暴露一些接口跟外界通信：

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

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

　　惰性單例：是指只在需要的時(shí)候才創(chuàng)建對(duì)象的實(shí)例。比較實(shí)用。

下面是一個(gè)惰性單例的例子：

<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").οnclick=function(){var show=creatediv();show.style.display="block";}; </script>

?

三、策略模式

四、代理模式

待續(xù)

轉(zhuǎn)載于:https://www.cnblogs.com/rain-null/p/7803005.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的js 设计模式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。