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 工廠模式、簡單模式、抽象模式