JavaScript与设计模式———工厂模式（含ts代码）

意义

将创建产品实例的代码用工厂实例封装起来，后续若需要创建产品实例只需要调用工厂实例的方法。

将创建操作封装起来，能够对后续的操作友好。

类和UML类图

TypeScript

// 产品
class Product {
    constructor(public name: string) {
        this.name = name;
    }
    init() {
        console.log('init');
    }
    func1() {
        console.log('func1');
    }
}
// 工厂
class Creator {
    create(name: string) {
        return new Product(name);
    }
}

let creater = new Creator();
let p = creater.create('lxl');
p.init();

应用场景

将new 操作 单独封装

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

Jquery

class jQuery {
    constructor(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 || '';
    }
    who() {
        console.log(this.dom);
    }
}

window.$ = function (selector) {
    // 工厂模式
    return new jQuery(selector);
}

var $p = $('p') // 其实执行了new操作
console.log($p);
console.log($p.who);