js 工厂模式简单模式抽象模式

Posted mengna

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 工厂模式简单模式抽象模式相关的知识,希望对你有一定的参考价值。

简单工厂模式又称为静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例,主要用来创建同一类的对象。其实,工厂模式的思想主要是将相同/相似的的对象或类进行提取归类,这样的话,就可以避免写太多重复性的代码。下面通过例子讲解一下:

 


function creatBook(name, time, type) {
//创建一个对象,并对对象拓展属性和方法
var o =new Object();
o.name = name;
o.time = time;
o.type =type;
o.getName = function(){
console.log(this.name)
}
//将对象返回

return o;//这一定不能丢
}
var book1 = creatBook(‘js book‘, 2014, "js")
var book2 = creatBook(‘css book‘, 2014, "css")
book1.getName();
book2.getName();

 

当我们有很多种书时,每本书都有作者、书名、出版时间等,如果要为每一本书创建一个对象,那我们会创建大量的重复代码。我们可以建一个对象,里面包含这些书共有的属性,然后我们通过创建每本书的实例,对该函数进行调用。

工厂方法模式:通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例。就是将实际创建对象工作推迟到子类中去,工厂方法模式针对的是需求较多的时候,主要是处理创建多类对象的情况,通过在工厂原型上添加类,然后在使用的时候,直接在工厂里查找就可以了。

//安全模式创建的工厂类
        var Factory = function (type, content) {
            if(this instanceof Factory) {
                var s = new this[TypeError] (content);
                return s;
            } else {
                return new Factory(type, content)
            }
        }
        //工厂原型中设置创建所有类型数据对象的基类
        Factory.prototype = {
            java: function(content) {},
            js: function(content) {},
            ui:function(content) {
                this.content = content;
                (function(content) {
                    var div = document.createElement(div);
                    div.innerhtml = content;
                    div.style.border = 1px solid red;
                    document.getElementById(container).appendChild(div)
                })(content)
            },
            php: function(content) {}
        }
        for(var i =6;i >=0; i--) {
            Factory(s[i].type, s[i].content)
        }

抽象工厂模式:抽象类是一种声明但不能适使用的类,当你使用时就会报错。

首先声明一个抽象类作为父类,以概括某一类产品所需要的特征,继承该父类的子类需要实现父类中声明的方法而实现父类中所声明的功能,例子如下:

/**
* 实现subType类对工厂类中的superType类型的抽象类的继承
* @param subType 要继承的类
* @param superType 工厂类中的抽象类type
*/
const VehicleFactory = function(subType, superType) {
  if (typeof VehicleFactory[superType] === function) {
    function F() {
      this.type = 车辆
    } 
    F.prototype = new VehicleFactory[superType]()
    subType.constructor = subType
    subType.prototype = new F()                // 因为子类subType不仅需要继承superType对应的类的原型方法,还要继承其对象属性
  } else throw new Error(不存在该抽象类)
}

VehicleFactory.Car = function() {
  this.type = car
}
VehicleFactory.Car.prototype = {
  getPrice: function() {
    return new Error(抽象方法不可使用)
  },
  getSpeed: function() {
    return new Error(抽象方法不可使用)
  }
}

const BMW = function(price, speed) {
  this.price = price
  this.speed = speed
}
VehicleFactory(BMW, Car)        // 继承Car抽象类
BMW.prototype.getPrice = function() {        // 覆写getPrice方法
  console.log(`BWM price is ${this.price}`)
}
BMW.prototype.getSpeed = function() {
  console.log(`BWM speed is ${this.speed}`)
}

const baomai5 = new BMW(30, 99)
baomai5.getPrice()                          // BWM price is 30
baomai5 instanceof VehicleFactory.Car       // true

 















以上是关于js 工厂模式简单模式抽象模式的主要内容,如果未能解决你的问题,请参考以下文章

浅谈js抽象工厂模式

设计模式学习——简单工厂模式工厂模式抽象工厂模式

设计模式-简单工厂工厂方法模式抽象工厂模式详解

设计模式-简单工厂模式工厂模式抽象工厂模式-(创建型模式)

设计模式学习——简单工厂模式工厂模式抽象工厂模式

设计模式笔记-简单工厂模式,工厂方法模式,抽象工厂模式