JS 與設計模式初解

xorpay 發布于2019-08-20 12:35 / 474人閱讀

摘要：關于的設計模式，強力推薦這本書設計模式與開發實踐，來自騰訊的大牛所著。講解設計模式之前，我們先接觸一個重要的概念鴨子類型什么叫鴨子類型呢需求如果我們想聽鴨子的嘎嘎嘎叫聲情況如果有一只狗不是鴨子，它也能發出嘎嘎嘎的叫聲。

當一個項目的代碼量比較多，或者多人開發的時候，就需要引入一些設計模式來讓我們更好的構建項目。否則代碼就會變得亂糟糟，像一團面條一樣了。
講解設計模式比較好的書有：
1、設計模式
2、Head First設計模式

不過以上兩本書主要是關于靜態語言、面向對象的具體實現，因為靜態面向對象語言（比如C++ 和 Java）代碼寫法限制的是比較多的。不能給類動態的添加屬性、方法，函數的參數限制了類型等。

JS 雖然也是面向對象，但是同時支持函數式編程，函數本身是一種值可以傳遞。JS的動態特性也不會限制變量類型。
所以Java 中的多態對JS 來說，那都不叫事。
對于 JS ，設計模式也應該更加靈活，不應該把靜態語言的設計模式生搬硬套到 JS 上，而應該根據語言特性靈活應用。
關于 JS 的設計模式，強力推薦這本書：JavaScript設計模式與開發實踐，來自騰訊的大牛所著。

講解設計模式之前，我們先接觸一個重要的概念 鴨子類型
什么叫鴨子類型呢？

需求：如果我們想聽鴨子的 嘎嘎嘎 叫聲

情況：如果有一只狗（不是鴨子），它也能發出 嘎嘎嘎 的叫聲。也就是說這條狗也能達到我們的目的，那這條狗就是可以用的。

思考：我們不再管這個對象到底是不是 instanceof Duck， 而是看它有沒有 嘎嘎嘎 叫的能力。就是說我們不再是面向對象，而是面向接口。管它是什么類型，什么對象，只要實現了 嘎嘎嘎 叫的這個接口，能達到我們的目的，就可以了。

舉個例子：

// aDiv 不是數組，而是 HTMLCollection 對象
var aDiv = document.getElementsByTagName("div");

// 但是由于 aDiv 也有 length 屬性，因此我們可以像數組一樣遍歷它
for (var i=0, len=aDiv.length; i
接下來一個重要的概念是 封裝，把一個對象、方法或模塊的內部實現隱藏起來，只暴露接口供外部使用。
JS 最常見的是用立即執行函數封裝局部變量，局部函數，暴露出部分函數或變量。
// 對 ming 這個對象進行了封裝，privateName 只能在立即執行函數的內部使用，外部獲取不到的。
var ming = (function() {
  // 乳名，外人不知道的
  var privateName = "狗蛋";
  // 學名
  var publicName = "王小明";
  var publicAge = 24;

  return {
    age: publicAge,
    getName: function() {
      return publicName;
    }
  };
}());
JS 面向對象采用的是原型克隆方式，而不是 Java 類和對象的模式。
因此 JS 生產對象的方式更像是 細胞分裂，Object.prototype 作為第一個細胞，然后分裂出 Function.prototype 、Array.prototype 、String.prototype 等，分裂出來的細胞可以添加自己的屬性和方法。而且 JS 是沒有 類 這個東東的。
Java 中的類像是一個模具，對象則是用這個模具印出來的，
第一篇文先說這么多，后續再把設計模式一一過一遍。最重要的是，推薦大家看看騰訊大牛的書。

GPU云服務器云服務器初解 python與設計模式軟件設計與開發網絡規劃與設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81066.html

前端Http協議緩存初解

摘要：而緩存就是為了解決用戶請求速度與釋放服務器壓力而生的。瀏覽器緩存則是另外的如個人見解。緩存的判斷規則過期機制過期機制就是瀏覽器根據緩存的有效期進行判斷，如果在有效期內就使用緩存，否則就拋棄這個緩存。否則會進入其他緩存依據判斷。 [TOC] 簡介用戶獲取網絡資源，需要通過非常長的網絡去服務器上請求資源,另外服務端為了應對大量的用戶請求而不斷的提升硬件性能與帶寬。這對用戶與服務端都非常的...

AlienZHOU 2019-08-23 14:44 評論0 收藏0
正則與JS中的正則

摘要：注意本文將正則與中的正則分開討論。正則零寬斷言更多參考各種語言對于正則不同支持參考單行模式與多行模式通過設置正則表達式后的修飾符可開啟對應的匹配模式單行模式和多行模式。最近這段時間幫同學處理一些文檔，涉及到一些結構化文檔的工作大部分都得使用正則表達式，之前對于正則的認識大多來源于語言書上那幾頁的介紹，自己也沒有用過幾次。這里將我之前感到模糊的概念作個整理。因為對JS了解多點，所...

firim 2019-08-19 17:11 評論0 收藏0
js設計模式--組合模式

摘要：文章系列設計模式單例模式設計模式策略模式設計模式代理模式設計模式迭代器模式設計模式發布訂閱模式設計模式命令模式概念組合模式就是用小的子對象來構建更大的對象，而這些小的子對象本身也許是由更小的孫對象構成的。前言本系列文章主要根據《JavaScript設計模式與開發實踐》整理而來，其中會加入了一些自己的思考。希望對大家有所幫助。文章系列 js設計模式--單例模式 js設計模式--策略...

blankyao 2019-08-23 14:31 評論0 收藏0
javascript知識點

摘要：模塊化是隨著前端技術的發展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化目前 Vue.js 的火爆不亞于當初的 React，本人對寫代碼有潔癖，代碼也是藝術。此篇是準備篇，工欲善其事，必先利其器。我們先在代...

Karrdy 2019-08-26 11:34 評論0 收藏0
JS 橋接模式

摘要：簡介橋接模式將抽象部分與它的實現部分分離，使它們都可以獨立地變化。同時橋接模式也有自己的缺點大量的類將導致開發成本的增加，同時在性能方面可能也會有所減少。 1. 簡介橋接模式（Bridge）將抽象部分與它的實現部分分離，使它們都可以獨立地變化。其實就是函數的封裝，比如要對某個DOM元素添加color和backgroundColor，可以封裝個changeColor函數，這樣可以在多個...

chemzqm 2019-08-21 18:19 評論0 收藏0