成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript設(shè)計(jì)模式

dreambei / 397人閱讀

摘要：此處的構(gòu)造函數(shù)使用的形式添加新屬性，但實(shí)際上新屬性的添加有四種方式，除去這一種，還有三種方括號(hào)語(yǔ)法，方法方法此處舉的是原文中的例子，若要使用，可參考原文。

參考書籍Learning Javascript Design Patterns

一、設(shè)計(jì)模式概述與應(yīng)用場(chǎng)景

首先引用原書的一段話：

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.

這里提到了三點(diǎn)：

設(shè)計(jì)模式是開發(fā)者定義的

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

設(shè)計(jì)模式必須有自己的一套完整表述

光這樣寫可能既抽象又無(wú)趣，因而不妨從幾個(gè)小點(diǎn)展開說(shuō)一下。

設(shè)計(jì)模式在robustness（魯棒性，我對(duì)這個(gè)翻譯一直很不滿）上的卓越表現(xiàn)，使得開發(fā)者可以省去一些花在代碼結(jié)構(gòu)組織上的經(jīng)歷，而更專于于業(yè)務(wù)邏輯開發(fā)，同時(shí)這也可以省去開發(fā)者日后重構(gòu)代碼的不便。

設(shè)計(jì)模式的通用性也是它的泛用性，它不局限于特定的使用環(huán)境，也不局限于特定的語(yǔ)言，你用C++，C#，Java，Python，JS都能寫，語(yǔ)言是可以任選的。

同時(shí)好的設(shè)計(jì)模式也可以有效減小代碼體積。

設(shè)計(jì)模式分為三大類：

創(chuàng)造型設(shè)計(jì)模式（creational design patterns）

結(jié)構(gòu)型設(shè)計(jì)模式（structural design patterns）

表現(xiàn)型設(shè)計(jì)模式（behaviorial design patterns）

以下將主要說(shuō)說(shuō)第一類設(shè)計(jì)模式，之后兩類可能會(huì)在以后的博客提及。

二、構(gòu)造者模式

考慮一個(gè)最基本的JS對(duì)象構(gòu)造函數(shù)：

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";
  };
}

當(dāng)需要使用這個(gè)構(gòu)造函數(shù)構(gòu)造一個(gè)對(duì)象時(shí)，只要在函數(shù)調(diào)用之前加上new操作符，JS引擎將會(huì)識(shí)別出這是一個(gè)構(gòu)造函數(shù)調(diào)用，這樣，這個(gè)函數(shù)會(huì)默認(rèn)返回一個(gè)this對(duì)象，這個(gè)對(duì)象的原型就是構(gòu)造函數(shù)的prototype，因此，函數(shù)中對(duì)model，year等屬性的賦值，就是對(duì)這個(gè)返回的對(duì)象進(jìn)行的各種操作，使得我們能得到我們想要的對(duì)象。

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

方括號(hào)語(yǔ)法，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

}

});

此處舉的是原文中g(shù)etter的例子，若要使用setter，可參考原文。

原文此處還提到了在構(gòu)造函數(shù)的原型上定義公有方法的方式，這么做可以使得每次使用構(gòu)造函數(shù)創(chuàng)建對(duì)象時(shí)不會(huì)重新創(chuàng)建一個(gè)屬于被創(chuàng)建對(duì)象的方法，而是全部使用這個(gè)公有方法。

三、模塊化模式

構(gòu)造者模式的思想非常好，但是在一點(diǎn)上它有所欠缺，即私有變量。在Java中，聲明私有變量可以采用private關(guān)鍵字，限制變量只能被一個(gè)類使用，它的后代，它實(shí)例化出來(lái)的對(duì)象都不能訪問(wèn)這個(gè)變量。

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

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

// 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 };

代碼來(lái)自nicolas zakas所著understanding es6中“用模塊封裝代碼”一章，若對(duì)es6的模塊化感興趣，可閱讀相關(guān)章節(jié)。

回到我們剛剛說(shuō)的問(wèn)題上來(lái)，為了實(shí)現(xiàn)“私有變量”這個(gè)概念，以上的代碼中定義了一個(gè)substract方法，因?yàn)樗鼪](méi)有被導(dǎo)出，所以此方法僅在此模塊內(nèi)可用，這樣es6就從標(biāo)準(zhǔn)上實(shí)現(xiàn)了私有變量。

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

為了詳細(xì)地說(shuō)明這種思想，我們還是舉一段原文的代碼來(lái)做說(shuō)明（es6的module同樣可以實(shí)現(xiàn)類似的效果）

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

請(qǐng)關(guān)注這里的核心var counter = 0，這個(gè)私有變量是在導(dǎo)出的公有方法中進(jìn)行操作的，用戶獲得的對(duì)象并沒(méi)有辦法直接操作這個(gè)私有變量。看到這里你可能會(huì)聯(lián)想到閉包，沒(méi)錯(cuò)，它們的思想是類似的。

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

模塊化也是有一些缺點(diǎn)的，最致命的就是私有變量不能被之后添加的方法操作，這對(duì)于debug而言絕對(duì)是一場(chǎng)噩夢(mèng)。

了解模塊化更多相關(guān)請(qǐng)狠狠戳這篇文章

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107128.html

相關(guān)文章

  • JS程序

    摘要：設(shè)計(jì)模式是以面向?qū)ο缶幊虨榛A(chǔ)的，的面向?qū)ο缶幊毯蛡鹘y(tǒng)的的面向?qū)ο缶幊逃行┎顒e，這讓我一開始接觸的時(shí)候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續(xù)了解設(shè)計(jì)模式必須要先搞懂面向?qū)ο缶幊?，否則只會(huì)讓你自己更痛苦。 JavaScript 中的構(gòu)造函數(shù) 學(xué)習(xí)總結(jié)。知識(shí)只有分享才有存在的意義。 是時(shí)候替換你的 for 循環(huán)大法了~ 《小分享》JavaScript中數(shù)組的那些迭代方法~ ...

    melody_lql 評(píng)論0 收藏0

  • 2017年 最好的javascript 書籍

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

    mingzhong 評(píng)論0 收藏0

  • 前端練級(jí)攻略(第二部分)

    摘要：是文檔的一種表示結(jié)構(gòu)。這些任務(wù)大部分都是基于它。這個(gè)實(shí)踐的重點(diǎn)是把你在前端練級(jí)攻略第部分中學(xué)到的一些東西和結(jié)合起來(lái)。一旦你進(jìn)入框架部分，你將更好地理解并使用它們。到目前為止，你一直在使用進(jìn)行操作。它是在前端系統(tǒng)像今天這樣復(fù)雜之前編寫的。 本文是 前端練級(jí)攻略 第二部分，第一部分請(qǐng)看下面： 前端練級(jí)攻略(第一部分) 在第二部分，我們將重點(diǎn)學(xué)習(xí) JavaScript 作為一種獨(dú)立的語(yǔ)言，如...

    BWrong 評(píng)論0 收藏0

  • 理解JavaScript的核心知識(shí)點(diǎn)：原型

    摘要：首先，需要來(lái)理清一些基礎(chǔ)的計(jì)算機(jī)編程概念編程哲學(xué)與設(shè)計(jì)模式計(jì)算機(jī)編程理念源自于對(duì)現(xiàn)實(shí)抽象的哲學(xué)思考，面向?qū)ο缶幊淌瞧湟环N思維方式，與它并駕齊驅(qū)的是另外兩種思路過(guò)程式和函數(shù)式編程。 JavaScript 中的原型機(jī)制一直以來(lái)都被眾多開發(fā)者（包括本人）低估甚至忽視了，這是因?yàn)榻^大多數(shù)人沒(méi)有想要深刻理解這個(gè)機(jī)制的內(nèi)涵，以及越來(lái)越多的開發(fā)者缺乏計(jì)算機(jī)編程相關(guān)的基礎(chǔ)知識(shí)。對(duì)于這樣的開發(fā)者來(lái)說(shuō) J...

    iKcamp 評(píng)論0 收藏0

  • JavaScript系列（四） - 收藏集 - 掘金

    摘要：函數(shù)式編程前端掘金引言面向?qū)ο缶幊桃恢币詠?lái)都是中的主導(dǎo)范式。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。 JavaScript 函數(shù)式編程 - 前端 - 掘金引言 面向?qū)ο缶幊桃恢币詠?lái)都是JavaScript中的主導(dǎo)范式。JavaScript作為一門多范式編程語(yǔ)言，然而，近幾年，函數(shù)式編程越來(lái)越多得受到開發(fā)者的青睞。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。因此，...

    cfanr 評(píng)論0 收藏0

  • JavaScript進(jìn)階之路

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

    Lowky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<