設計模式的簡單介紹

是一套經過反覆使用、多人知曉的、經過分類的、**設計經驗的總結

為什麼使用設計模式：

為了**的可重用性、讓**更容易被他人理解、保證**的可靠性。設計模式使**的編寫真正的工程化；設計模式是軟體工程的基石脈絡，如同大廈的結構

有哪些設計模式（來自w3cschool，23種）：

構造器模式，模組化模式，暴露模組模式，單例模式，中介者模式，原型模式，命令模式，外觀模式，工廠模式，mixin模式，裝飾模式，亨元(flyweight)模式，mvc模式，mvp模式，mvvm模式，組合模式，介面卡模式，外觀模式，觀察者模式，迭代器模式，惰性初始模式，**模式，建造者模式

單個例項，只有乙個物件

//多次建立，返回同乙個物件
function fn();
}return fn.obj;
}var obj1 = new fn();
var obj2 = new fn();
console.log(obj1 == obj2);
//例如我們建立乙個資訊提示框，每一次執行toast方法，如果都建立乙個新的元素，這樣做太浪費了。
//因此，我們採取單例模式，確保無論呼叫多少次toast方法，都只建立乙個dom元素。
//我們只控制它的顯示和隱藏，而不是每次建立每次銷毀。

function toast(),1000)
}obtn.onclick = function()
function toast(),1000)
}else,1000)
}return toast;
}obtn.onclick = function()

組合模式：把多個物件組成樹狀結構來表示區域性與整體，使得使用者可以同時操作單個物件和物件的組合。

1.可以以相同的方法處理物件的集合與其中的特定子物件。組合物件與組成該物件的物件可實現同一批的操作，對組合物件執行的操作會向下傳遞到所有的組成物件，使得所有組成物件都會執行同樣的操作。

2.可以將物件組織成樹狀結構，並且使整棵樹可被遍歷，所有組合物件都實現乙個用來獲取其子物件的方法，借助該方法可以隱藏實現的細節，組織子物件，使子物件內部的實現不形成依賴。

對於建立動態使用者介面來說，組合模式可以算是為其量身定做的，因為html結構正好符合組合模式適用場景的結構。

1.存在一批組織成某種層次體系的物件

2.希望對這批物件或者其中某一部分物件實施乙個操作

組合模式擅長對大批量物件進行操作，轉為組織這類物件把操作從乙個層次向下乙個層次傳遞設計，藉此可以弱化物件間的耦合關係並且可以互換使用一些類或者例項，使**模組化程度更高，維護更容易。

function imagesstore( id )
imagesstore.prototype = ,
remove:function( child )
}this.element.removechild( child.getelement() );
},getchild:function( i ),
show:function()
},hide:function()
this.element.style.display = 'none';
},getelement:function()
} //上面的組合物件中我們可以看出，原型上的hide和show方法不單單是對於當前element進行處理，還延伸到其包含的每乙個葉物件上執行。這邊就體現了組合模式的執行機制，一條命令在多個物件上激發複雜的或者遞迴的行為。
function imageitem( src )
imageitem.prototype = ,
remove:function( child ),
getchild:function( i ),
show:function(),
hide:function(),
getelement:function()
}

使用組合模式組織起來的物件具有出色的層次結構，每當對頂層組合物件執行乙個操作的時候，實際上是在對整個結構進行深度優先的節點搜尋。但是這些優點都是用操作的代價換取的，比如每次頂級執行一次show方法，實際的操作就是整個樹形結構的節點都會被遍歷一次。但是組合物件的每個物件之間的耦合非常鬆散，可以簡單的操作處理複雜的結果。

簡單的說，組合模式是講一批子物件組織為樹形結構，一條頂層的命令會在操作樹中所有的物件。提高了**的模組化程度，對於動態的html介面具有很強的適用性

觀察者模式又叫發布訂閱模式（publish/subscribe），它定義了一種一對多的關係，讓多個觀察者物件同時監聽某乙個主題物件，這個主題物件的狀態發生變化時就會通知所有的觀察者物件，使得它們能夠自動更新自己。

使用觀察者模式的好處：

1.支援簡單的廣播通訊，自動通知所有已經訂閱過的物件。

2.頁面載入後目標物件很容易與觀察者存在一種動態關聯，增加了靈活性。

3.目標物件與觀察者之間的抽象耦合關係能夠單獨擴充套件以及重用。

mvc模式

mvc模式，全名：model view controller，模型檢視控制器

檢視：使用者直**到的頁面

模型：按照要求來取出資料

控制器：向系統發出指令的工具

工作流程： 1.瀏覽器，呼叫控制器，對他發出指令 2.控制器，按指令選取乙個合適的模型 3.模型，按控制器指令取出相應的資料 4.控制器，按指令取出相應的檢視

5.把第三步取到的資料按照使用者想要的樣子在檢視顯示出來

還有許多模式就不一一簡單介紹了。

設計模式的簡單介紹

設計模式簡單介紹

設計模式與UML（簡單介紹）

設計模式常用的設計模式介紹

設計模式的簡單介紹

設計模式簡單介紹

設計模式與UML（簡單介紹）

設計模式 常用的設計模式介紹

相關推薦

設計模式常用的設計模式介紹