This website requires JavaScript.

js设计模式-工厂模式

2018.11.09 09:22字数 2807阅读 64喜欢 0评论 0

在工作中往往总会忽略设计模式的重要性,虽然有意无意会使用到,但也不知道是哪种设计模式,设计模式算是一种前人留下的智慧结晶,一种经验,每种设计模式都会有他存在的意义,学习设计模式能在日常工作中更加高效的设计和架构我们的项目

工厂模式的目的就是创建对象,根据不同的场景又可以衍生出四种实现方式

第一类 由一个工厂对象来创建一种产品类的实例,主要用来创建同一类对象

function Pingpang () {
    this.info = "在中国十分流行"
}
Pingpang.prototype = {
    getPopPerson: function () {
        console.log('刘国梁,马龙,王励勤...')
    }
}

function Basketball () {
    this.info = "2019年篮球世界杯,中国队发挥失常,有待进步"
}
Basketball.prototype = {
    getPopPerson: function () {
        console.log('姚明,易建联,王治郅...')
    }
}
// 工厂函数返回对应类的实例
var sportsFactory = function (type) {
    switch (type) {
        case 'pingpang':
            return new Pingpang();
        case 'basketball':
            return new Basketball();
    }
}

该方式下,如果这些类继承同一个父类,那么父类原型上的方法是可以共用的,是一种最简单的代码复用


第二类 创建相似的对象,将相同的东西提取,不同的部分单独处理

// 创建一个弹窗的工厂函数,都包含显示的内容,show方法,不同的是结构不相同
function createPoptext, type{
    let o = new Object()
    o.content = text
    o.show = function() {...}
    // 不同的地方单独处理
    if (type === 'alert') {
        // 处理弹窗
    }
    if (type === 'confirm') {
        //处理确认框
    }
}

该方式下,创建的对象都是一个新个体,不能共用父类方法,但是可以处理相似对象共用一些资源又私有一些资源


第三类 创建多类产品, 统一的工厂方法,仅需增加产品类型即可

// 页面增加不同公司的广告位
var Factory = function (type, content) {
    // 使用一种安全模式,保证能有正确的实例返回
    if (this instanceof Factory) {
        return new this[type](content)
    } else {
        return new Factory(type, content)
    }
}

Factory.prototype = {
    baidu: function (content) {
        this.content = content
        (function (content) {
            let div = document.createElement('div')
            div.innerHTML = content
            div.style.border = "1px solid red"
            document.getElementById('contener').appendchild(div)
        })(content)
    },
    alibaba: function (content) {...},
    tencent: function (content) {...}
}

该方法可以轻松创建多类的实例对象,同时避免了使用者与对象类之间的耦合,用户不必关心对象的具体类,啊用工厂函数即可,而安全模式能够保证new调用或者直接调用产生的问题,能够返回正确的实例


第四类 创建一个产品簇(核心是抽象出基本属性,方法当做基类,仅作为继承使用)

var VehicleFactory = function (subType, superType) {
       if (typeof VehicleFactory[superType] === 'function') {
            function F () {}
            F.prototype = new VehicleFactory[superType]()
            subType.prototype = new F()
            subType.constructor = subType
       } else {
            throw new Error('未找到该抽象类')
       }
}

// 定义汽车基类
VehicleFactory.car = function () {}
VehicleFactory.car.prototype = {
    getPrice: function () {
        throw new Error('抽象方法不能直接调用')
    }
}


//使用
var BMW = function () {
    this.price = price
}
VehicleFactory(BMW, 'car')
BMW.prototype.getPrice = function() {
    return this.price
}

var BMWcar = new BMW()

BMWcar.getprice()

这种相对比较抽象,主要是定义了类的结构,定义必备属性跟方法,让子类去继承相应产品簇抽象类,对于忘记重写子类的错误遗漏,父类也能有一个友好的提示