2.設計模式的分類—精讀《JavaScript 設計模式》Addy Osmani著

Wumw發表於2018-11-11

同系列友情連結:


1.設計模式之初體驗—精讀《JavaScript 設計模式》Addy Osmani著
3.Contructor(構造器)模式—精讀《JavaScript 設計模式》Addy Osmani著

有關類(Class)的要點


JavaScript 是一種無類語言,但是可以使用函式來模擬類。

最常用的實現方式是定義一個JavaScript 函式,然後使用 new關鍵字建立新物件。使用 this來定義物件的新屬性和方法,如下所示:

// 一個 Car 'class'
function Car(model){
    this.model=model;
    this.color='silver';
    this.year="2012";
    this.getInfo=function(){
        return this.model+" "+this.year;
    }
}
複製程式碼

然後可以像這樣使用我們上面定義的 car建構函式來例項化該物件:

var myCar=new Car("ford");
myCar.year="2010";
console.log(myCar.getInfo());
// 結果
// "ford 2010"
複製程式碼

欲瞭解更多使用 JavaScript 拉斯定義“類”的方法,請檢視斯托揚·斯蒂凡諾夫釋出的帖子三種定義JavaScript類的方法

下面彙總他的三種定義的 JavaScript 類的方法如下

// 1. using a function
// This is probably one of the most common ways.
// You define a normal JavaScript function and then
// create an object by using the new keyword. To define
// properties and methods for an object created using
// function(), you use the this keyword, as seen in the
// following example.
function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}
// anti-pattern! keep reading...
function getAppleInfo() {
    return this.color + ' ' + this.type + ' apple';
}

// To instantiate an object using the Apple constructor
// function, set some properties and call methods you
// can do the following:
var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());

// result:'reddish macintosh apple'

// 1.1 Methods defined internally
// you can define your methods within
//  the constructor function, like this:
function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = function() {
        return this.color + ' ' + this.type + ' apple';
    };
}


// 1.2 Methods added to the prototype
// The way to prevent pollution of the global namespace,
// you can define your methods within the constructor function, like this:
function Apple (type) {
    this.type = type;
    this.color = "red";
}

Apple.prototype.getInfo = function() {
    return this.color + ' ' + this.type + ' apple';
};

// Again, you can use the new objects exactly
// the same way as in 1. and 1.1.

// 2. Using object literals
// Literals are shorter way to define objects
// and arrays in JavaScript. To create an empty
// object using you can do:
var o = {};
// instead of the "normal" way:
var o = new Object();
// For arrays you can do:
var a = [];
// instead of:
var a = new Array();

// So you can skip the class-like stuff and create an instance (object)
// immediately. Here's the same functionality as described in the previous
// examples, but using object literal syntax this time:

var apple = {
    type: "macintosh",
    color: "red",
    getInfo: function () {
        return this.color + ' ' + this.type + ' apple';
    }
}
// In this case you don't need to (and cannot) create an instance of the class,
// it already exists. So you simply start using this instance.

apple.color = "reddish";
alert(apple.getInfo());

// Such an object is also sometimes called singleton.
// In "classical" languages such as Java, singleton means that
// you can have only one single instance of this class at any time,
// you cannot create more objects of the same class.
// In JavaScript (no classes, remember?) this concept makes no sense anymore
// since all objects are singletons to begin with.


// 3. Singleton using a function
// The third way presented in this article is a combination of the other
// two you already saw. You can use a function to define a singleton object.
//  Here's the syntax:
var apple = new function() {
    this.type = "macintosh";
    this.color = "red";
    this.getInfo = function () {
        return this.color + ' ' + this.type + ' apple';
    };
}
// So you see that this is very similar to 1.1. discussed above,
// but the way to use the object is exactly like in 2.
apple.color = "reddish";
alert(apple.getInfo());

// `new function(){...}` does two things at the same time:
// define a function (an anonymous constructor function) and
// invoke it with new. It might look a bit confusing
// if you're not used to it and it's not too common, but hey,
// it's an option, when you really want a constructor function that
// you'll use only once and there's no sense of giving it a name.
複製程式碼

23種設計模式

設計模式中比較著名的就是“四人組”提到的23種設計模式;

以下是原始表格(由艾麗絲·尼爾森在2004年總結):

23種設計模式一

23種設計模式二

總結:

今天分享了書中第八章 設計模式的分類,主要內容:

  1. JavaScript 中的 “類”
  2. JavaScript 中三種模擬類的實現方式
  3. 23種設計模式包含哪些?
  4. 23種設計模式的簡單描述
今天的內容你 get 到了嗎????

相關文章