工厂模式

我之前讲原型的时候就讲过，构造函数，一种认为的规定的函数，一般首字母大写，为大家共用

function User(name, age, career) {
    this.name = name;
    this.age = age;
    this.career = career;
}

以上的 User , 就是一个构造器（构造函数）。

介绍

将 new 操作单独封装

遇到 new 时，就要考虑是否该使用工厂模式

示例

你去购买汉堡，直接点餐，取餐，不会自己亲手做

商店要“封装”做汉堡的工作，做好直接给买着

代码演示

class Product {
    constructor(name) {
        this.name = name;
    }
    init() {
        alert('init');
    }
    fun1() {
        alert('fun1');
    }
    fun2() {
        alert('fun2');
    }
}
class Creator {
    create(name) {
        return new Product(name);
    }
}

let creator = new Creator();
let p = creator.create('p1');
p.init();
p.fun1();

场景

jquery - ${'div'}

React.createElement

vue 异步组件

jQuery

${'div'} 和 new $('div') 有何区别？

第一：书写麻烦，jQuery 的链式操作将成为噩梦

第二：一旦 jQuery 名字变化，将是灾难性的

class jQuery {
    consturctor(selector) {
        let slice = Array.prototype.slice;
        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) {}
    // ...
}
window.$ = function (selector) {
    return new jQuery(selector);
};
// 工厂函数的应用

React.createElement

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

参考资料

• 深入设计模式