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