將new操作單獨封裝，遇到new時，就要考慮是否該用工廠模式

示例
你去購買漢堡，直接點餐，取餐，沒必要自己親手做（這就是一個初始化實例的封裝）
商店要‘封裝’做漢堡的工作，做好直接給買者

class Product {
    constructor(name) {
        this.name = name;
    }
    init() {
        alert('init');
    }
    fn1() {
        alert('fn1');
    }
    fn2() {
        alert('fn2');
    }
}

class Creator{
    create(name){
        return new Product(name);
    }
}

// 測試
let creator = new Creator();
let p = creator.create('p1');
p.init();
p.fn1();

這個Creator就是個工廠，里面有create函數，工廠通過create函數創建product。這樣通過create已經把真正的構造函數封裝起來，外部只需要知道create能生成一個實例就行

其他場景
jquery-$('div')
$('div')和new$('div')。會發現前面的工廠使用方便，如果每次都要加個new會比較麻煩。jQuery的鏈式操作將稱為噩夢。一旦jquey名字變化，將是災難性的。

class jQuery{
    constructor(selector){
        let slice = Array.prototype.slice;
        // 返回一個數組,將arguments對象的數組提出來轉化為數組，arguments本身并不是數組而是對象
        let dom = slice.call(document.querySelectorAll(selector));
        let len = dom ? dom.length : 0;
        for(let i = 0; i < len; i++) {
            this[i] = dom[i];
        }
        this.length = len;
        this.selector = selector || ''
    }
    append(node){

    }
    addClass(name){

    }
    html(data) {

    }
    // 此處省略n個API
}

window.$ = function(selector) {
    return new jQuery(selector);
}
$p = $('p');
console.log($p);
console.log($p.addClass);

returnnewjQuery(selector)。這個就是工廠模式，不開放出去。

React.createElement

var profile = `
    <div>
        <img src='avatar.png' className='profile' />
        <h3>{[user.firstName, user.lastName].join(' ')}</h3>
    </div>
`

var profile = React.createElement('div', null, 
    React.createElement('img', {src:'avatar.png', className:'profile'}),
    React.createElement('h3', null, [user.firstName, user.lastName].join(' '))
)

React.createElement就是一個工廠模式，后面實例我們不知道。被封裝好了，想知道是什么，除非看源碼

class Vnode {
    constructor(tag, attrs, children){
        // ...
    }
    // ...
}
React.createElement = function (tag, attrs, children) {
    return new Vnode(tag, attrs, children)
}

如果不是通過createElement,把newVnode直接給用戶，這樣用戶會比較麻煩

設計原則驗證
1、構造函數和創建者分離
2、符合開放封閉原則

總結

以上是生活随笔為你收集整理的前端设计模式 工厂模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。