(譯)《學習JavaScript設計模式》(一)

原書連接Learning JavaScript Design Patterns
水平有限不少地方不通順,錯翻漏翻歡迎交流。css

什麼是模式?

模式是一種可廣泛應用於軟件設計——對咱們前端人員來說就是JavaScript網絡應用程序的可重用方案。或者說是一種可用於解決不少不一樣狀況的模板。前端

因此理解模式對咱們來講究竟有什麼好處呢?設計模式主要有三點優點:正則表達式

  1. 模式是成熟的解決方案: 它使用成熟的技術爲軟件開發中問題提供了可靠的方法,這些技術反映了爲模式定義的開發的經驗和看法。編程

  2. 模式易於重用: 模式一般反映了一個很好的可適應咱們自己需求的方法。這個特徵使得它魯棒性很好。設計模式

  3. 模式有很好的表現力: 模式一般都有一個解決方案的關鍵詞用法和語法結構,經過它咱們可讓大型的解決方案表現得更優雅。瀏覽器

模式並不就是一個具體的解決方案。咱們要記住模式的角色僅僅就是給咱們提供一個解決方案體系。模式並不能解決全部的設計問題,也不能取代一個好的設計師,但它確實能成爲設計師的好幫手。接下來咱們來討論一下模式的其餘一些優點。網絡

  • 模式能夠防患於未然: 當咱們的代碼是創建在成熟的模式上時,咱們能夠花更少的時間考慮咱們的代碼結構,而把更多的時間放在咱們的總的解決方案的質量上。這是因爲模式老是鼓勵咱們以結構化和組織化的方式來編寫代碼,很好地避免了一些將來重構代碼的需求。編程語言

  • 模式能夠提供文檔化的通用解決方案,不會被某個單獨問題所限制: 這種通用化的方式意味着咱們不須要被應用(一般是編程語言的不一樣)所限制,設計模式仍然能夠改善咱們代碼的結構。函數

  • 特定的模式確實能夠避免重複來減小代碼量: 經過鼓勵開發者在容易減小代碼重複區域更加警戒(好比用一個通用函數來取代減小執行函數)。這也就是咱們所說的讓代碼更加'DRY'設計

  • 模式添加到開發者的字典中可讓他們交流更加方便

  • 頻繁被使用的模式能夠隨着開發者在社區中交流獲得改善: 在某些狀況這能夠引領一種全新的設計模式,並讓它更好地適應更多的具體狀況。這能夠保持基於模式的解決方案保持健壯性,甚至超過點對點的解決方案。

咱們已經每天在用模式了

爲了理解模式究竟多吊,咱們來回顧一個jQuery已經幫咱們解決的元素選擇的問題。

假設咱們有個script,在DOM中爲每一個找到的class爲"foo"的元素添加一個計數器。效率最高的查詢方法是什麼?來看看下面幾種解決方案:

  1. 選擇頁面中的全部DOM元素並存儲他們的引用,而後經過正則表達式(或者其餘的方法)來過濾只存儲那些class"foo"的元素。

  2. 使用本地瀏覽器的方法好比querySelectorAll()來選擇全部class"foo"的元素。

  3. 使用原生方法好比getElementsByClassName()來相似地選擇所需集合。

因此這仨哪一個快呢?事實上是<3>,它是其餘倆的8-10倍。可是天不遂人願,<3>在IE9如下是沒用的,一次在<2>和<3>都不支持的環境下只能使用<1>了。

然而使用jQuery的開發者就不用愁了,由於它爲咱們這些使用外觀模式的把選擇器抽象出來了。咱們後面會提到,這種模式爲之後一些潛在的負載代碼提供了一些抽象接口(好比$el.css(), $el.animate())。這意味這咱們不須要花太多的時間在實現細節上了。

jQuery還自動地根據咱們的瀏覽器來挑選選擇器方法。

咱們可能都熟悉jQuery的$("selector"),一樣是選擇HTML元素,它比起getElementById(), getElementsByClassName(), getElementByTagName()等方法來講方便多了。

咱們知道querySelectorAll()也試圖作一樣的事,比較一下使用jQuery的模式VS咱們本身來選擇。後者毫無競爭力(?)。抽象使用模式有現實價值。

在本書的後面咱們將繼續討論更多的設計模式。

相關文章
相關標籤/搜索