設(shè)計(jì)模式并非是難以理解, 或是難以應(yīng)用到實(shí)踐中的, 相反的, 設(shè)計(jì)模式恰恰代表了某些場(chǎng)景下的最佳實(shí)踐! 這些設(shè)計(jì)模式通常被有經(jīng)驗(yàn)的開(kāi)發(fā)者們所采用。
設(shè)計(jì)模式是開(kāi)發(fā)者們?cè)陂_(kāi)發(fā)過(guò)程中面臨的一般問(wèn)題的解決方案。 這些解決方案是眾多開(kāi)發(fā)者們經(jīng)過(guò)長(zhǎng)時(shí)間的實(shí)驗(yàn)和錯(cuò)誤所總結(jié)出來(lái)的
本文將講解前端 (javascript) 的設(shè)計(jì)模式概念!

工廠(chǎng)模式是程序中相當(dāng)常用的一種設(shè)計(jì)模式, 工廠(chǎng)模式在創(chuàng)建對(duì)象時(shí), 無(wú)需指定創(chuàng)建對(duì)象的具體類(lèi), 原因是 工廠(chǎng)模式中定義了一個(gè)用于創(chuàng)建對(duì)象的接口, 這個(gè)接口決定了實(shí)例化哪一個(gè)子類(lèi), 而子類(lèi)可以重寫(xiě)接口方法以便創(chuàng)建的時(shí)候指定自己的對(duì)象類(lèi)型！

另外工廠(chǎng)模式不使用new來(lái)獲取對(duì)象, 工廠(chǎng)模式分為2種, 第一種是簡(jiǎn)單工廠(chǎng)模式, 第二種是抽象工廠(chǎng)模式

抽象工廠(chǎng)模式

抽象工廠(chǎng)模式相對(duì)于簡(jiǎn)單工廠(chǎng)更加靈活, 因?yàn)樗鼘⒎椒ǘ冀唤o子類(lèi)來(lái)完成, 本身并不提供任何方法

何時(shí)使用抽象工廠(chǎng)模式

• 當(dāng)處理很多共享相同屬性的小型對(duì)象和組件時(shí)
• 當(dāng)需要根據(jù)所在不同環(huán)境來(lái)創(chuàng)建不同構(gòu)造函數(shù)的實(shí)例時(shí)
• 當(dāng)每個(gè)子類(lèi)方法的內(nèi)部實(shí)現(xiàn)不同時(shí)

下面是一個(gè)簡(jiǎn)單的例子, 可以看出抽象工廠(chǎng)類(lèi)AbstractFactory并不提供任何有效的方法, 方法都會(huì)被子類(lèi)重寫(xiě)

// 抽象工廠(chǎng)類(lèi)
function AbstractFactory() {};

// 虛方法
AbstractFactory.prototype.toName = function() {
    throw Error('抽象方法不能被調(diào)用！');
};

// 生產(chǎn)函數(shù)
AbstractFactory.factory = function(say) {
    var Say = AbstractFactory[say];
    if (Say) {
        return new Say;
    }
}

// 子類(lèi)
AbstractFactory.SayHello = function() {
    this.name = 'hello';
}

// 子類(lèi)的方法
AbstractFactory.SayHello.prototype = {
    toName: function() {
        return this.name;
    }
}

下面是一個(gè)適當(dāng)?shù)睦?/strong>, 當(dāng)工廠(chǎng)生產(chǎn)的子類(lèi)的方法實(shí)現(xiàn)都截然不同, 但總體的邏輯是相同的時(shí)候, 比較適合抽象工廠(chǎng)模式

// 抽象工廠(chǎng)類(lèi)
function Input() {};

// 虛方法
Input.prototype.getValue = function() {
    throw Error('抽象方法不能被調(diào)用！');
};

// 生產(chǎn)函數(shù)
Input.factory = function(type, option) {
    var input = Input[type];
    if (input) {
        return new input(option);
    }
}

// 子類(lèi)
Input.Text = function(option) {
    if (option) {
        this.value = option.value;
    }
}

// 子類(lèi)的方法
Input.Text.prototype = {
    getValue: function() {
        return 'text類(lèi)型的value是' + this.value;
    }
}

// 子類(lèi)
Input.Password = function(option) {
    if (option) {
        this.value = option.value;
    }
}

// 子類(lèi)的方法
Input.Password.prototype = {
    getValue: function() {
        return 'password類(lèi)型的value是' + this.value;
    }
}

var text = Input.factory('Text', {value: 'hello world!'});
var password = Input.factory('Password', {value: '123456'});
text.getValue(); // text類(lèi)型的value是hello world!
password.getValue(); // password類(lèi)型的value是123456