前端設計模式（1）--工廠模式

時間 2019-11-08

標籤前端設計模式工廠简体版

原文原文鏈接

設計模式清單

沒有連接的是尚未寫的，計劃要寫的，歡迎閱讀交流~
前端設計模式（0）面向對象&&設計原則
 前端設計模式（1）--工廠模式
 前端設計模式（2）--單例模式
前端設計模式（3）--適配器模式
前端設計模式（4）--裝飾器模式
前端設計模式（5）--代理模式
前端設計模式（6）--外觀模式&&觀察者模式
前端設計模式（7）--狀態和策略模式
前端設計模式（8）--原型模式
...html

寫在前面

設計模式有23種，按大類歸類的話能夠分爲三大類：建立型（如：工廠模式、單例模式、原型模式等），結構型模式（如裝飾器模式、代理模式等），行爲型（如：觀察者模式、迭代器模式等）；今天咱們講的是工廠模式，其分爲工廠方法模式、抽象工廠模式、簡單工廠模式，好的，咱們一步一步來分析。前端

簡單工廠模式

來來來，咱們從簡單的開始。簡單工廠模式是由一個工廠對象決定建立出哪種產品類的實例類圖：蘋果和梨都是繼承植物java

代碼：jquery

class Plant {
    constructor (name) {
        this.name = name
    }
    grow () {
        console.log('我有生長的功能哦~~')
    }
}
class Apple extends Plant {
    constructor (name, color) {
        super(name)
        this.color = color
        console.log(this.color)
    }
}
class Pear extends Plant {
    constructor (name, color) {
        super(name)
        this.color = color
        console.log(this.color)
    }
}
new Apple('蘋果', '紅色')
new Pear('梨子', '黃色')



// 經典案例-那些年一塊兒用過的jquery
class jQuery{
    constructor(selector){
        let elements = Array.from(document.querySelectorAll(selector));
        let length = elements?elements.length:0;
        for(let i=0;i<length;i++){
            this[i]=elements[i];
        }
        this.length = length;
    }
    html(){

    }
}
window.$ = function(selector){
   return new jQuery(selector);
}
複製代碼

簡單工廠的好處在於，咱們能夠在不動以前原邏輯的基礎上，繼承和拓展新的功能，這樣咱們就能夠提升效率，以前大神寫好的功能能夠複用，並且能夠站在巨人的肩膀上，不斷拓展。固然，其實這些大家平時應該都有寫過或者用過，只是如今由一個名詞規範起來，是否是以爲忽然高大尚了。上面代碼直接new 的缺點是，耦合和依賴於具體的實現。windows

工廠方法模式

同先上個類圖，需求變了須要添加個橘子：設計模式

上代碼：bash

class Plant{
    constructor(name) {
        this.name=name;
    }
    grow() {
        console.log('growing~~~~~~');    
    }
}
class Apple extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
class Orange extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
class AppleFactory{
    create() {
        return new Apple('蘋果'，'紅色');
    }
}
class OrangeFactory{
    create() {
        return new Orange('桔子', '橙色');
    }
}
const settings={
    'apple': AppleFactory,
    'orange':OrangeFactory
}
let apple=new settings['apple']().create();
console.log(apple);
let orange=new settings['orange']().create();
console.log(orange);
複製代碼

這樣寫的好處是咱們能夠隨意添加不一樣的水果，咱們不用關心如何實現，新增同一個水果類，拿來就用，還有一個好處就是，假如AppleFactory有改動新增新的功能，可是引用的地方不少，咱們只須要新增一個AppleFactory，修改不影響老代碼。上面的代碼修改一下，引入相似於java接口概念app

class Plant{
    constructor(name) {
        this.name=name;
    }
    grow() {
        console.log('growing~~~~~~');    
    }
}
// 新增Factory
class Factory {
    create() { }
}
class Apple extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
class Orange extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
// 子類繼承父類 並實現create 方法
class AppleFactory extends Factory{
    static create() {
     return new Apple('蘋果'，'紅色');
    }
}
class OrangeFactory extends Factory{
    static create() {
        return new Orange('桔子', '橙色');
    }
}
// 經過配置文件來解耦合
const settings={
    'apple': AppleFactory,
    'orange':OrangeFactory
}
let apple=new settings['apple']().create();
console.log(apple);
let orange=new settings['orange']().create();
console.log(orange);
複製代碼

說明一下類Factory

工廠通常是接口，規定子類必須實現的方法
依賴抽象，而不依賴實現
接口只有方法定義，沒有具體實現,若是一個類要實現該接口，就必須實現該接口中的全部方法

抽象工廠模式

抽象工廠模式是指當有多個抽象角色時，使用的一種工廠模式抽象工廠模式能夠向客戶端提供一個接口，使客戶端在沒必要指定產品的具體的狀況下，建立多個產品族中的產品對象.函數

爲了好展現咱們來舉個例子：好比如今用java來寫個軟件要運行在不一樣系統window、mac等，可是他們的icon和button是不一樣的post

類圖

代碼

class Factory {
    // 公共的方法是有必定的關聯
    createButton() {//建立按鈕
    }
    createIcon() {// 建立圖標
    }
}
class Icon { }
class AppleIcon {
    render() {
        console.log(`繪製蘋果圖標`)
    }
}
class WindowsIcon {
    render() {
        console.log(`繪製window圖標`)
    }
}
class Button { }
class AppleButton {
    render() {
        console.log(`繪製蘋果按鈕`)
    }
}
class WindowsButton {
    render() {
        console.log(`繪製windows按鈕`)
    }
}
class AppleFactory extends Factory {
    createButton() {//建立按鈕
        return new AppleButton();
    }
    createIcon() {// 建立圖標
        return new AppleIcon();
    }
}
class WindowsFactory extends Factory {
    createButton() {//建立按鈕
        return new WindowsButton();
    }
    createIcon() {// 建立圖標
        return new WindowsIcon();
    }
}
/**
 * Java是跨平臺的
 * 1.畫一個圖標
 * 2.畫一個按鈕
 */
let windowsFactory = new WindowsFactory();
windowsFactory.createIcon().render();
windowsFactory.createButton().render();
//=========================================
let appleFactory = new AppleFactory();
appleFactory.createIcon().render();
appleFactory.createButton().render();
複製代碼