Skip to content

不要关注

工厂模式

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

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

以上的 User , 就是一个构造器(构造函数)。

介绍

将 new 操作单独封装

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

示例

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

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

代码演示

javascript
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 - $

React.createElement

vue 异步组件

jQuery

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

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

第二:一旦 jQuery 名字变化,将是灾难性的

javascript
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

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

参考资料