简朴工场形式(建立单一的对象)
示例1
形貌
工场形式重要是为了建立对象实例或许类簇(笼统工场), 体贴的是终究产出(建立)的对象, 而不体贴建立的历程.
在涌现多个类的时刻, 每次建立须要找到对应的类每每比较贫苦, 这时刻平常运用一个函数举行封装来建立所须要的对象,
如许就无需关注建立这些对象究竟依靠哪些基类了, 只需晓得有这个函数就能够了, 平常这个函数被称为工场函数,
这类形式叫简朴工场形式
案例
假定一体育商品店卖东西, 内里有许多体育商品, 及其相干引见. 当你来到体育用品店买一个篮球及相干引见时,
你只须要问售货员, 她会帮你找到你所须要的东西.
完成
// 篮球基类
var Basketball = function() {
this.intro = '篮球流行于美国';
}
Basketball.prototype = function() {
getMember: function() {
console.log('每一个部队须要5名队员');
},
getBallSize: function() {
console.log('篮球很大');
}
}
// 足球基类
var Football = function() {
this.intro = '足球在世界范围内流行';
}
Football.prototype = function() {
getMember: function() {
console.log('每一个部队须要11名队员');
},
getBallSize: function() {
console.log('足球很大');
}
}
// 网球基类
var Tennis = function() {
this.intro = '每一年有许多网球系列赛';
}
Tennis.prototype = function() {
getMember: function() {
console.log('每一个部队须要1名队员');
},
getBallSize: function() {
console.log('网球很小');
}
}
// 活动工场(这边相当于征询体育东西店的售货员, 告诉她你想要买什么体育用品)
var SportFactory = function(name) {
switch(name) {
case 'basketball':
return new Basketball();
case 'football':
return new Football();
case 'tennis':
return new Tennis();
}
}
var ball = new SportFactory('tennis');
console.log(ball.intro) // 每一年有许多网球系列赛
console.log(ball.getMember()); // 每一个部队须要1名队员示例2
形貌
简朴工场形式的理念就是建立对象, 而除此之外, 简朴工场形式还能够建立类似对象. 在建立多个类的时刻, 假定每一个类都有许多类似的处所, 比如在多种弹出框上都有封闭按钮, 都有提醒案牍等. 能够经由过程将这些类似的东西提取, 不类似针对性处置惩罚即可.
案例
假定当前项目需求是须要做种种弹出框: 警示框, 确认框及提醒框.
完成
var LoginAlert = function(text) {
this.content = text;
};
LoginAlert.prototype.show = function() {
// 显现警示框
};
var LoginConfirm = function(text) {
this.content = text;
};
LoginConfirm.prototype.show = function() {
// 显现确认框
};
var LoginPrompt = function(text) {
this.content = text;
};
LoginPrompt.prototype.show = function() {
// 显现提醒框
};
function createPop(type, text) {
var o = new Object();
o.content = text;
o.show = function() {
// 显现要领
};
if(type === 'alert') {
// 警示框差别部份
}
if(type === 'confirm') {
// 确认框差别部份
}
if(type === 'prompt') {
// 提醒框差别部份
}
return o;
}
// 建立警示框
var userNameAlert = createPop('alert', '用户名只能是26个字母和数字');工场要领形式(建立多类对象)
示例
形貌
经由过程对产物类的笼统使其建立营业重要担任用于建立多类产物的实例.
案例
假定有一批关于计算机培训的广告资本须要投放, 一批是PHP请求黄色字体赤色背景, 一批JAVA绿色字体,
一批JAVASCRIPT粉色背景....
完成
var Java = function(content) {
this.content = content;
(functiont(content) {
var div = document.createElement('div');
div.innerHTML = content;
div.style.color = 'green';
document.getElementById('container').appendChild(div);
})(content);
};
var Php = function(content) {
this.content = content;
(functiont(content) {
var div = document.createElement('div');
div.innerHTML = content;
div.style.color = 'yellow';
div.style.background = 'red';
document.getElementById('container').appendChild(div);
})(content);
};
var Javascript = function(content) {
this.content = content;
(functiont(content) {
var div = document.createElement('div');
div.innerHTML = content;
div.style.background = 'pink';
document.getElementById('container').appendChild(div);
})(content);
};
// 建立学科类工场
function JobFactory(type, content) {
switch(type) {
case 'java':
return new Java(content);
case 'php':
return new Php(content);
case 'Javascript':
return new Javascript(contet);
}
}
// 又要添需求啦.....多加一批UI学科, 赤色边框.....
// 代码革新:
var Factory = function(type, content) {
if(this instanceof Factory) {
var s = new this[type] (content);
return s;
} else {
return new Factory(type, content);
}
};
// 在工场原型中设置建立一切范例数据对象的基类
Factory.prototype = {
Java: function() {
// ...
},
Php: function() {
// ...
},
Javascript: function() {
// ...
},
UI: function() {
// ...
}
};
var data = [
{type:'JavaScript', content:'javascript'},
{type:'Java', content:'java'},
{type:'PHP', content:'php'},
{type:'UI', content:'ui'}
];
for(var i = data.length; i >= 0; i--) {
Factory(data[i].type, data[i].content);
}笼统工场形式(建立类簇)
示例
形貌
笼统工场形式平常不用来建立详细对象, 笼统类中定义的要领只是显性地定义一些功用, 但没有详细的完成, 而一个对象须要具有一套完全的功用, 所以用笼统类建立的对象也是笼统的而非实在对象. 因而平常用它作为父类来建立子类.
笼统工场实际上是一个完成子类继续父类的要领, 在这个要领中须要经由过程通报子类以及要继续父类(笼统类)的称号,并且在笼统工场要领中又增加了一次对笼统存在性的一次推断, 假如存在, 则将子类继续父类的要领. 然后子类经由过程寄生式继续.继续父类的原型中须要注重一点是, 在对过渡类的原型继续时, 不是继续父类的原型, 而是经由过程new关键字复制父类的一个实例, 这么干事由于过渡类不该仅仅继续父类的原型要领, 还要继续父类的对象属性, 所以要经由过程new关键字将父类的组织函数实行一遍来复制组织函数中的属性和要领
笼统工场增加笼统类比较特别, 由于笼统工场是个要领不须要实例化对象, 故只须要一份, 因而直接为笼统工场增加类的属性即可.
完成
// 笼统工场要领
var VehicleFatory = function(subType, superType) {
// 推断笼统工场中是不是有该笼统类
if(typeof VehicleFactory[superType] === 'function') {
// 缓存类
function F() {};
// 继续父类属性和要领
F.prototype = new VehicleFactory[superType] ();
// 将子类constructor 指向子类
subType.constructor = subType;
// 子类原型继续'父类'
subType.prototype = new F();
} else {
// 不存在该笼统类抛出毛病
throw new Error('未建立该笼统类');
}
};
// 小汽车笼统类
VehicleFactory.Car = function() {
this.type = 'car';
};
VehicleFactory.Car.prototype = {
getPrice: function() { return new Error('笼统要领不能挪用'); },
getSpeed: function() { return new Error('笼统要领不能挪用'); }
};
// 公交车笼统类
VehicleFactory.Bus = function() {
this.type = 'bus';
};
VehicleFactory.Bus.prototype = {
getPrice: function() { return new Error('笼统要领不能挪用'); },
getSpeed: function() { return new Error('笼统要领不能挪用'); }
};
// 货车笼统类
VehicleFactory.Truck = function() {
this.type = 'truck';
};
VehicleFactory.Truck.prototype = {
getPrice: function() { return new Error('笼统要领不能挪用'); },
getSpeed: function() { return new Error('笼统要领不能挪用'); }
};
// 建立产物子类继续响应的产物簇笼统类
// 宝马汽车子类
var BMW = function(price, speed) {
this.price = price;
this.speed = speed;
}
//笼统工场完成对Car笼统类的继续
VehicleFactory(BMW, 'Car');
BMW.prototype.getPrice = function() { return this.price };
BMW.prototype.getSpeed = function() { return this.speed };
// 公交车...
// 货车...