筆者做前端開發已經三年了，各種類型的項目都有經驗，jQuery的PC電商項目經驗，App的Vue全家桶項目經驗，微信小程式經驗，背景管理系統的React全家桶經驗，React結合TS的項目經驗。。。項目雖然做了很多，但是有些時候在各種前端交流群的時候看到别人說什麼設計模式什麼的就很懵，剛開始看到感覺沒什麼卵用，知道這些概念有啥用，能實戰才是真正的好程式員。
可是後來我發現我可能錯了，因為我發現更進階的程式員是根據自己的項目經驗去決定某某項目采用什麼架構，運用什麼設計模式。這個人就是技術總監（每個公司可能此角色不同，大家别太較真哈，有可能是架構師，也有可能是啥啥啥的，筆者的公司是由技術總監決定的）。
設計模式其實就是開發經驗，解決通用問題的套路
是以我決定好好的研究一下這些設計模式，結果發現我以前的每一個項目都是有涉及到這些模式的，接下來就與大家分享出來，大家看一看你用過哪些涉及模式呢？
一：子產品模式
在立即執行函數表達式中定義的變量和方法在外界是通路不到的，隻有通過其向外部提供的接口，“有限制”地通路。通過函數作用域解決了屬性和方法的封裝問題。
現在的主流架構筆者認為都是屬于子產品模式，還有筆者之前做jQuery結合requireJS的項目也是屬于子產品模式。
二：構造函數模式：
在構造函數的prototype上增加屬性和方法。
就是建立一個構造函數然後加屬性和方法，使用的時候就在其他地方去調用這個構造函數裡面的東西。
三：工廠模式：
建立一個函數，通過接收參數來生成不同的對象。
來結合代碼就一目了然了：
function Person(name, age) {
let person = new Object();
person.name = name;
person.age = age;
person.printName = function() {
console.log(this.name)
};
person.printAge = function() {
console.log(this.age)
};
return person;
}
let person = Person('xin', 22);
四：單例模式：
一句話，全局隻有一個執行個體。
var Singleton = (function() {
var instance;
function init() {
return {
};
}
return {
getInstance: function() {
if(!instance) {
instace = init();
}
return instance;
}
}
})();
五：釋出-訂閱模式（觀察者模式）：
定義了對象之間一對多的依賴關系，當一個對象的狀态發生改變時，所有依賴于它的對象都将得到通知。
觀察者模式廣泛應用于異步程式設計中，是一種替代回調函數的方案，多個事件處理函數可以訂閱同一個事件，當該事件發生後，與其相對應的多個事件處理函數都會運作。
取代對象之間寫死的通知機制，一個對象不用再顯示的調用另外一個對象的某個接口，降低子產品之間的耦合程度，雖然不清楚彼此的細節，但是不影響他們之間的互相通信。
應用：
DOM事件是一種典型的釋出-訂閱模式，對一個dom節點的一個事件進行監聽，當操作dom節點時，觸發響應的事件，響應函數執行，事件函數對dom節點完全未知，不用去理會時什麼事件，如何觸發，執行就好。