現在web前端也是一個(gè)非常熱門(mén)的行業(yè)，想要學(xué)習web前端開(kāi)發(fā)的同學(xué)請看這里北京web前端常見(jiàn)的設計模式 ，通過(guò)對前端領(lǐng)域中的設計模式（二）?? 的了解，希望以上信息可以幫助到您
1.前端領(lǐng)域中的設計模式（二）
繼續我們上文設計模式前端相關(guān)實(shí)現3.2、結構型設計設計模式3.2.1、裝飾器模式裝飾器模式： 允許向一個(gè)現有的對象添加新的功能，同時(shí)又不改變其結構，為現有的對象(類(lèi))的一個(gè)包裝。主要基本原則：開(kāi)放封閉原則和單一職責模式模式介紹：在了解模式之前，我們先來(lái)聊一下前端中的高階函數。高階函數就是一個(gè)函數A可以接收函數B為參數。如： 常見(jiàn)應用場(chǎng)景：三大框架中的高高階組件設計、ES7以后的裝飾器、vue mixins（vue 替代）、core-包等3.2.2、適配器模式適配器模式：兩個(gè)不兼容的接口之間的橋梁，它涉及一個(gè)單一的類(lèi)，該類(lèi)負責加入獨立的或不兼容的接口功能。簡(jiǎn)單理解： 接口（方法）轉換器。舉例說(shuō)明： 美國電器 110V，在*使用美國電器需要220V 的轉換器。主要基本原則：開(kāi)放封閉原則模式介紹： 該種設計模式提高了類(lèi)的透明度、靈活性、復用度等，但是在大型項目開(kāi)發(fā)中，不易過(guò)多的使用適配器原則，會(huì )使項目錯綜復雜，不易整體把握控制。前端中實(shí)際場(chǎng)景實(shí)現：常見(jiàn)應用場(chǎng)景：babel實(shí)現思想，npm/瀏覽器兼容等3.2.3、代理模式代理模式: 一個(gè)類(lèi)代表另外一個(gè)類(lèi)的功能，創(chuàng )建一個(gè)具有現有對象的對象，為外界提供訪(fǎng)問(wèn)接口。實(shí)際理解：如windows的快捷打開(kāi)方式。主要基本原則：開(kāi)放封閉原則、里氏替換原則模式介紹：該種模式就是為對象提供一個(gè)代理，控制對這個(gè)對象的訪(fǎng)問(wèn)，在開(kāi)發(fā)中我們經(jīng)常遇到的代理可分為四種類(lèi)型： 事件代理，虛擬代理、緩存代理和保護代理。事件代理：前端中應該大家都很熟悉事件代理和事件委托。前端中，通過(guò)事件冒泡，制定一個(gè)時(shí)間處理程序，就可以管理某一類(lèi)型的所有事件，有效的提升性能與操作。瀏覽器端的實(shí)現如： 虛擬代理：圖片預加載功能，先給 img 標簽展示一個(gè)占位圖，然后創(chuàng )建一個(gè) Image 實(shí)例，讓這個(gè)實(shí)例的 src 指向真實(shí)的目標圖片地址，當其真實(shí)圖片加載完成之后，再將 DOM 上的 img 標簽的 src 屬性指向真實(shí)圖片地址。簡(jiǎn)單實(shí)現：緩存代理：一般使用在計算量較大的場(chǎng)景中,如去重優(yōu)化，計算緩存，實(shí)現如下：保護代理：也可以稱(chēng)為代理拒絕，保護代理用于控制不同權限的對象對目標對象的訪(fǎng)問(wèn)，在js中場(chǎng)景不算多，大家知道起原理便可。3.2.4、橋接模式橋接模式：抽象化和實(shí)現話(huà)解耦，使得二者可以獨立變化，前端簡(jiǎn)單理解，函數的封裝，提升代碼的可維護性。在多維變化的編程中比較實(shí)用。舉一個(gè)簡(jiǎn)單的例子： N個(gè)操作系統 、M個(gè)電腦。主要基本原則：開(kāi)放封閉原則模式介紹：分離接口和實(shí)現部分，將抽象和實(shí)現充分解耦，產(chǎn)生更好的結構話(huà)系統，提高了系統的可擴展性，對用戶(hù)隱藏了實(shí)現細節。簡(jiǎn)單實(shí)現：使用場(chǎng)景：前端各大框架和npm包中都有或多或少的使用場(chǎng)景，大家可自行尋找學(xué)習。3.2.5、外觀(guān)模式外觀(guān)模式：隱藏系統的復雜性，向使用方提供一個(gè)可以訪(fǎng)問(wèn)系統的接口，它涉及到一個(gè)單一的類(lèi)，該類(lèi)提供了客戶(hù)端請求的簡(jiǎn)化方法和對現有系統類(lèi)方法的委托調用。主要涉及模式：開(kāi)放封閉原則、單一匹配原則模式介紹：該模式對出口進(jìn)行了統一封裝，提高了系統的安全性和統一性。簡(jiǎn)單實(shí)現通過(guò)調用stopEvent簡(jiǎn)化了對冒泡事件和默認事件的調用。統一了調用接口。使用場(chǎng)景：不用同步得到結果的編程思路， 如webpack打包思想等。3.2.6、組合模式組合模式: 部分整體模式，把相識的對象當做一個(gè)單一的對象，與橋接模式區別在于，組合模式是一個(gè)樹(shù)形結構為基準的設計模式。主要設計原則：接口封閉開(kāi)放原則模式介紹：該種設計模式具有高層模塊調用簡(jiǎn)單、底層模塊自由添加的特點(diǎn)，不過(guò)從設計結構來(lái)說(shuō)，這種樹(shù)形結構設計違反了依賴(lài)反轉原則。具體實(shí)現：常見(jiàn)場(chǎng)景： 具有樹(shù)形結構的業(yè)務(wù)場(chǎng)景。3.2.7、享元模式享元模式：減少創(chuàng )建對象的數量，減少對內存的消耗和提升性能，屬于優(yōu)化編程的設計模式。模式介紹：該模式運用共享技術(shù)來(lái)有效支持大量細粒度的對象，系統中如果創(chuàng )建了大量類(lèi)似的對象，，占用了大量的內容，思考享元模式優(yōu)化方案就非常有必要了。下面我們思考一個(gè)場(chǎng)景：100套女裝、100套男裝，需要尋找模特來(lái)試妝，怎樣創(chuàng )建最少的model。簡(jiǎn)單設計思想：該模式核心為找到多個(gè)對象的共性問(wèn)題，及多個(gè)類(lèi)似對象的共同點(diǎn)，具體場(chǎng)景具體分析。該模式的設計思路與對象池設計類(lèi)似，也可使用對象池優(yōu)化具體可參考工廠(chǎng)模式，設計一個(gè)對象池工廠(chǎng)。下一篇：前端領(lǐng)域中的設計模式（三）
看了以上有關(guān)前端領(lǐng)域中的設計模式（二）??的講解，如果還有什么疑問(wèn)可以直接來(lái)電咨詢(xún)
