JavaScript設計模式

dreambei 發布于2019-08-26 11:33 / 381人閱讀

摘要：此處的構造函數使用的形式添加新屬性，但實際上新屬性的添加有四種方式，除去這一種，還有三種方括號語法，方法方法此處舉的是原文中的例子，若要使用，可參考原文。

參考書籍Learning Javascript Design Patterns

一、設計模式概述與應用場景

首先引用原書的一段話：

Patterns are proven solutions: They provide solid approaches to solving issues in software development using proven techniques that reflect the experience and insights the developers that helped define them bring to the pattern.

Patterns can be easily reused: A pattern usually reflects an out of the box solution that can be adapted to suit our own needs. This feature makes them quite robust.

Patterns can be expressive: When we look at a pattern there’s generally a set structure and vocabulary to the solution presented that can help express rather large solutions quite elegantly.

這里提到了三點：

設計模式是開發者定義的

設計模式必須具有可重用性，必須很好地處理各種異常情況

設計模式必須有自己的一套完整表述

光這樣寫可能既抽象又無趣，因而不妨從幾個小點展開說一下。

設計模式在robustness（魯棒性，我對這個翻譯一直很不滿）上的卓越表現，使得開發者可以省去一些花在代碼結構組織上的經歷，而更專于于業務邏輯開發，同時這也可以省去開發者日后重構代碼的不便。

設計模式的通用性也是它的泛用性，它不局限于特定的使用環境，也不局限于特定的語言，你用C++，C#，Java，Python，JS都能寫，語言是可以任選的。

同時好的設計模式也可以有效減小代碼體積。

設計模式分為三大類：

創造型設計模式（creational design patterns）

結構型設計模式（structural design patterns）

表現型設計模式（behaviorial design patterns）

以下將主要說說第一類設計模式，之后兩類可能會在以后的博客提及。

二、構造者模式

考慮一個最基本的JS對象構造函數：

function Car( model, year, miles ) {
 
  this.model = model;
  this.year = year;
  this.miles = miles;
 
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}

當需要使用這個構造函數構造一個對象時，只要在函數調用之前加上new操作符，JS引擎將會識別出這是一個構造函數調用，這樣，這個函數會默認返回一個this對象，這個對象的原型就是構造函數的prototype，因此，函數中對model，year等屬性的賦值，就是對這個返回的對象進行的各種操作，使得我們能得到我們想要的對象。

此處的構造函數使用this.的形式添加新屬性，但實際上新屬性的添加有四種方式，除去這一種，還有三種：

方括號語法，newObject["someKey"] = "Hello World";

Object.defineProperty方法

Object.defineProperty( newObject, "someKey", {

value: "for more control of the property"s behavior",
writable: true,
enumerable: true,
configurable: true

});

Object.defineProperties方法

Object.defineProperties( newObject, {

"someKey": {

value: "Hello World",
writable: true

"anotherKey": {

value: "Foo bar",
writable: false

}

});

此處舉的是原文中getter的例子，若要使用setter，可參考原文。

原文此處還提到了在構造函數的原型上定義公有方法的方式，這么做可以使得每次使用構造函數創建對象時不會重新創建一個屬于被創建對象的方法，而是全部使用這個公有方法。

三、模塊化模式

構造者模式的思想非常好，但是在一點上它有所欠缺，即私有變量。在Java中，聲明私有變量可以采用private關鍵字，限制變量只能被一個類使用，它的后代，它實例化出來的對象都不能訪問這個變量。

這是一種非常重要的編程思想，那么如果想用JS去實現應該怎么做呢？原文中舉的例子以IIFE（立即執行函數）為主，為了與es6接軌，下面的例子將圍繞es6的module展開。

首先介紹一下es6的module。為了處理日益增長的js文件造成的命名沖突和安全問題，ECMA引入了module，在module中聲明的變量不會添加到全局作用域中，這樣就可以避免全局污染，同時module可以指定需要輸出的變量和方法。這里只舉一個簡單的導出與導入例子：

// export data
export var color = "red";
export let name = "Nicholas";
export const magicNumber = 7;

// export function
export function sum(num1, num2) {
    return num1 + num1;
}

// export class
export class Rectangle {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
}

// this function is private to the module
function subtract(num1, num2) {
    return num1 - num2;
}

// define a function...
function multiply(num1, num2) {
    return num1 * num2;
}

// ...and then export it later
export { multiply };

代碼來自nicolas zakas所著understanding es6中“用模塊封裝代碼”一章，若對es6的模塊化感興趣，可閱讀相關章節。

回到我們剛剛說的問題上來，為了實現“私有變量”這個概念，以上的代碼中定義了一個substract方法，因為它沒有被導出，所以此方法僅在此模塊內可用，這樣es6就從標準上實現了私有變量。

原文里詳細描述了模塊化模式，它主要包裝了公有和私有方法，在上面的例子中，被導出的變量、常量、函數、類均可視為公有方法。模塊化模式的思想就是導出一部分公有api，而維持在閉包之內的變量私密。

為了詳細地說明這種思想，我們還是舉一段原文的代碼來做說明（es6的module同樣可以實現類似的效果）

var testModule = (function () {
 
  var counter = 0;
 
  return {
 
    incrementCounter: function () {
      return counter++;
    },
 
    resetCounter: function () {
      console.log( "counter value prior to reset: " + counter );
      counter = 0;
    }
  };
 
})();

請關注這里的核心var counter = 0，這個私有變量是在導出的公有方法中進行操作的，用戶獲得的對象并沒有辦法直接操作這個私有變量。看到這里你可能會聯想到閉包，沒錯，它們的思想是類似的。

模塊化模式同樣允許傳入全局變量如$，并對它進行一些操作。

模塊化也是有一些缺點的，最致命的就是私有變量不能被之后添加的方法操作，這對于debug而言絕對是一場噩夢。

了解模塊化更多相關請狠狠戳這篇文章

GPU云服務器云服務器 javascript設計模式 javascript命令模式 javascript嚴格模式 javascript框架設計

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

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

JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
2017年最好的javascript 書籍

摘要：請記住，這些書中的一些可能不是最新的，但概念和基礎仍應適用。是最好的老師之一。的秘密由部分組成。在你完成這些書后，查看書籍和最好的本土書籍。我看過三本，第1本，第二本，第四本。第一本買的的實體書，其他兩本看的是電子書。第一本是大名鼎鼎老道寫的，書很薄，但是非常經典。javascirpt忍者秘籍是jquery的作者寫的，也是非常經典。you dont kown js系列也是非常好。看了...

mingzhong 2019-08-20 15:05 評論0 收藏0
前端練級攻略(第二部分)

摘要：是文檔的一種表示結構。這些任務大部分都是基于它。這個實踐的重點是把你在前端練級攻略第部分中學到的一些東西和結合起來。一旦你進入框架部分，你將更好地理解并使用它們。到目前為止，你一直在使用進行操作。它是在前端系統像今天這樣復雜之前編寫的。本文是前端練級攻略第二部分，第一部分請看下面：前端練級攻略(第一部分) 在第二部分，我們將重點學習 JavaScript 作為一種獨立的語言，如...

BWrong 2019-08-23 16:49 評論0 收藏0
理解JavaScript的核心知識點：原型

摘要：首先，需要來理清一些基礎的計算機編程概念編程哲學與設計模式計算機編程理念源自于對現實抽象的哲學思考，面向對象編程是其一種思維方式，與它并駕齊驅的是另外兩種思路過程式和函數式編程。 JavaScript 中的原型機制一直以來都被眾多開發者（包括本人）低估甚至忽視了，這是因為絕大多數人沒有想要深刻理解這個機制的內涵，以及越來越多的開發者缺乏計算機編程相關的基礎知識。對于這樣的開發者來說 J...

iKcamp 2019-08-23 18:34 評論0 收藏0
JavaScript系列（四） - 收藏集 - 掘金

摘要：函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此，...

cfanr 2019-08-20 16:33 評論0 收藏0
JavaScript進階之路

摘要：前端入門的門檻相對較低，學習曲線是越來越陡峭，由淺入深，可以分為四個階段。第二階段高級程序設計有的書是用來成為經典的，比如犀牛書還有些書是用來超越經典的，顯然這本書就是。接下來可以看看教程，看看源代碼，嘗試著寫一寫這些效果。前端入門的門檻相對較低，學習曲線是越來越陡峭，由淺入深，可以分為四個階段。第一階段：《JavaScript DOM編程藝術》　　　看這本書之前，請先確認你對J...

Lowky 2019-08-23 11:32 評論0 收藏0