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

看了以上有關(guān)前端領(lǐng)域中的設(shè)計(jì)模式（二）??的講解，如果還有什么疑問(wèn)可以直接來(lái)電咨詢(xún)