資訊專(zhuān)欄INFORMATION COLUMN
摘要：模式并不就是一個(gè)具體的解決方案。我們要記住模式的角色僅僅就是給我們提供一個(gè)解決方案體系。使用本地瀏覽器的方法比如來(lái)選擇所有為的元素。后者毫無(wú)競(jìng)爭(zhēng)力。在本書(shū)的后面我們將繼續(xù)討論更多的設(shè)計(jì)模式。
原書(shū)鏈接Learning JavaScript Design Patterns
水平有限很多地方不通順，錯(cuò)翻漏翻歡迎交流。
模式是一種可普遍應(yīng)用于軟件設(shè)計(jì)——對(duì)我們前端人員來(lái)講就是JavaScript網(wǎng)絡(luò)應(yīng)用程序的可重用方案?；蛘哒f(shuō)是一種可用于解決很多不同情況的模板。
所以理解模式對(duì)我們來(lái)說(shuō)究竟有什么好處呢？設(shè)計(jì)模式主要有三點(diǎn)優(yōu)勢(shì)：
模式是成熟的解決方案： 它使用成熟的技術(shù)為軟件開(kāi)發(fā)中問(wèn)題提供了可靠的方法，這些技術(shù)反映了為模式定義的開(kāi)發(fā)的經(jīng)驗(yàn)和見(jiàn)解。
模式易于重用： 模式通常反映了一個(gè)很好的可適應(yīng)我們本身需求的方法。這個(gè)特征使得它魯棒性很好。
模式有很好的表現(xiàn)力： 模式通常都有一個(gè)解決方案的關(guān)鍵詞用法和語(yǔ)法結(jié)構(gòu)，通過(guò)它我們可以讓大型的解決方案表現(xiàn)得更優(yōu)雅。
模式并不就是一個(gè)具體的解決方案。我們要記住模式的角色僅僅就是給我們提供一個(gè)解決方案體系。模式并不能解決所有的設(shè)計(jì)問(wèn)題，也不能取代一個(gè)好的設(shè)計(jì)師，但它確實(shí)能成為設(shè)計(jì)師的好幫手。接下來(lái)我們來(lái)討論一下模式的其他一些優(yōu)勢(shì)。
模式可以防患于未然： 當(dāng)我們的代碼是建立在成熟的模式上時(shí)，我們可以花更少的時(shí)間考慮我們的代碼結(jié)構(gòu)，而把更多的時(shí)間放在我們的總的解決方案的質(zhì)量上。這是由于模式總是鼓勵(lì)我們以結(jié)構(gòu)化和組織化的方式來(lái)編寫(xiě)代碼，很好地避免了一些未來(lái)重構(gòu)代碼的需求。
模式可以提供文檔化的通用解決方案，不會(huì)被某個(gè)多帶帶問(wèn)題所限制： 這種通用化的方式意味著我們不需要被應(yīng)用（通常是編程語(yǔ)言的不同）所限制，設(shè)計(jì)模式仍然可以改善我們代碼的結(jié)構(gòu)。
特定的模式確實(shí)可以避免重復(fù)來(lái)減少代碼量： 通過(guò)鼓勵(lì)開(kāi)發(fā)者在容易減少代碼重復(fù)區(qū)域更加警惕（比如用一個(gè)通用函數(shù)來(lái)取代減少執(zhí)行函數(shù)）。這也就是我們所說(shuō)的讓代碼更加"DRY"。
模式添加到開(kāi)發(fā)者的字典中可以讓他們交流更加方便
頻繁被使用的模式可以隨著開(kāi)發(fā)者在社區(qū)中交流得到改善： 在某些情況這可以引領(lǐng)一種全新的設(shè)計(jì)模式，并讓它更好地適應(yīng)更多的具體情況。這可以保持基于模式的解決方案保持健壯性，甚至超過(guò)點(diǎn)對(duì)點(diǎn)的解決方案。
我們已經(jīng)天天在用模式了為了理解模式究竟多吊，我們來(lái)回顧一個(gè)jQuery已經(jīng)幫我們解決的元素選擇的問(wèn)題。
假設(shè)我們有個(gè)script，在DOM中為每個(gè)找到的class為"foo"的元素添加一個(gè)計(jì)數(shù)器。效率最高的查詢方法是什么？來(lái)看看下面幾種解決方案：
選擇頁(yè)面中的所有DOM元素并存儲(chǔ)他們的引用，然后通過(guò)正則表達(dá)式（或者其他的方法）來(lái)過(guò)濾只存儲(chǔ)那些class為"foo"的元素。
使用本地瀏覽器的方法比如querySelectorAll()來(lái)選擇所有class為"foo"的元素。
使用原生方法比如getElementsByClassName()來(lái)類(lèi)似地選擇所需集合。
所以這仨哪個(gè)快呢？事實(shí)上是<3>，它是其他倆的8-10倍。但是天不遂人愿，<3>在IE9以下是沒(méi)用的，一次在<2>和<3>都不支持的環(huán)境下只能使用<1>了。
然而使用jQuery的開(kāi)發(fā)者就不用愁了，因?yàn)樗鼮槲覀冞@些使用外觀模式的把選擇器抽象出來(lái)了。我們后面會(huì)提到，這種模式為以后一些潛在的負(fù)載代碼提供了一些抽象接口(比如$el.css(), $el.animate())。這意味這我們不需要花太多的時(shí)間在實(shí)現(xiàn)細(xì)節(jié)上了。
jQuery還自動(dòng)地根據(jù)我們的瀏覽器來(lái)挑選選擇器方法。
我們可能都熟悉jQuery的$("selector")，同樣是選擇HTML元素，它比起getElementById(), getElementsByClassName(), getElementByTagName()等方法來(lái)說(shuō)方便多了。
我們知道querySelectorAll()也試圖做同樣的事，比較一下使用jQuery的模式VS我們自己來(lái)選擇。后者毫無(wú)競(jìng)爭(zhēng)力(?)。抽象使用模式有現(xiàn)實(shí)價(jià)值。
在本書(shū)的后面我們將繼續(xù)討論更多的設(shè)計(jì)模式。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79399.html
摘要：全文為這些年，我曾閱讀深入理解過(guò)或正在閱讀學(xué)習(xí)即將閱讀的一些優(yōu)秀經(jīng)典前端后端書(shū)籍。當(dāng)然，如果您喜歡這篇文章，可以動(dòng)手點(diǎn)點(diǎn)贊或者收藏。 全文為這些年，我曾閱讀、深入理解過(guò)（或正在閱讀學(xué)習(xí)、即將閱讀）的一些優(yōu)秀經(jīng)典前端/Java后端書(shū)籍。全文為純?cè)瓌?chuàng)，且將持續(xù)更新，未經(jīng)許可，不得進(jìn)行轉(zhuǎn)載。當(dāng)然，如果您喜歡這篇文章，可以動(dòng)手點(diǎn)點(diǎn)贊或者收藏。 基礎(chǔ) 基礎(chǔ)書(shū)籍 進(jìn)階 進(jìn)階階段，深入學(xué)習(xí)的書(shū)...
摘要：全文為這些年，我曾閱讀深入理解過(guò)或正在閱讀學(xué)習(xí)即將閱讀的一些優(yōu)秀經(jīng)典前端后端書(shū)籍。當(dāng)然，如果您喜歡這篇文章，可以動(dòng)手點(diǎn)點(diǎn)贊或者收藏。 全文為這些年，我曾閱讀、深入理解過(guò)（或正在閱讀學(xué)習(xí)、即將閱讀）的一些優(yōu)秀經(jīng)典前端/Java后端書(shū)籍。全文為純?cè)瓌?chuàng)，且將持續(xù)更新，未經(jīng)許可，不得進(jìn)行轉(zhuǎn)載。當(dāng)然，如果您喜歡這篇文章，可以動(dòng)手點(diǎn)點(diǎn)贊或者收藏。 基礎(chǔ) 基礎(chǔ)書(shū)籍 進(jìn)階 進(jìn)階階段，深入學(xué)習(xí)的書(shū)...
摘要：全文為這些年，我曾閱讀深入理解過(guò)或正在閱讀學(xué)習(xí)即將閱讀的一些優(yōu)秀經(jīng)典前端后端書(shū)籍。當(dāng)然，如果您喜歡這篇文章，可以動(dòng)手點(diǎn)點(diǎn)贊或者收藏。 全文為這些年，我曾閱讀、深入理解過(guò)（或正在閱讀學(xué)習(xí)、即將閱讀）的一些優(yōu)秀經(jīng)典前端/Java后端書(shū)籍。全文為純?cè)瓌?chuàng)，且將持續(xù)更新，未經(jīng)許可，不得進(jìn)行轉(zhuǎn)載。當(dāng)然，如果您喜歡這篇文章，可以動(dòng)手點(diǎn)點(diǎn)贊或者收藏。 基礎(chǔ) 基礎(chǔ)書(shū)籍 進(jìn)階 進(jìn)階階段，深入學(xué)習(xí)的書(shū)...
摘要：全文為這些年，我曾閱讀深入理解過(guò)或正在閱讀學(xué)習(xí)即將閱讀的一些優(yōu)秀經(jīng)典前端后端書(shū)籍。當(dāng)然，如果您喜歡這篇文章，可以動(dòng)手點(diǎn)點(diǎn)贊或者收藏。 全文為這些年，我曾閱讀、深入理解過(guò)（或正在閱讀學(xué)習(xí)、即將閱讀）的一些優(yōu)秀經(jīng)典前端/Java后端書(shū)籍。全文為純?cè)瓌?chuàng)，且將持續(xù)更新，未經(jīng)許可，不得進(jìn)行轉(zhuǎn)載。當(dāng)然，如果您喜歡這篇文章，可以動(dòng)手點(diǎn)點(diǎn)贊或者收藏。 基礎(chǔ) 基礎(chǔ)書(shū)籍 進(jìn)階 進(jìn)階階段，深入學(xué)習(xí)的書(shū)...
摘要：學(xué)習(xí)模式設(shè)計(jì)的過(guò)程中，我們遇到原生模式這玩意兒也不是啥大驚小怪的事。最好的設(shè)計(jì)模式通常不直接給出問(wèn)題的答案，這被人認(rèn)為是解決困難問(wèn)題的必要步驟。 原書(shū)鏈接Learning JavaScript Design Patterns水平有限很多地方不通順，錯(cuò)翻漏翻歡迎交流。 模式測(cè)試，原生模式&約法三章 記住并不是所有的算法啊，最佳實(shí)踐啊，解決方案啊什么的都可以被稱(chēng)為一個(gè)完整的模式的。很可能它...
閱讀 2994·2021-09-26 10:18
閱讀 5312·2021-09-22 15:02
閱讀 2812·2019-08-30 15:53
閱讀 1862·2019-08-29 18:41
閱讀 2710·2019-08-27 10:58
閱讀 2643·2019-08-26 13:49
閱讀 2767·2019-08-26 12:17
閱讀 915·2019-08-26 11:49
