JS设计模式之工厂模式
1 什么是工厂模式?
工厂模式是用来创建对象的一种最常用的设计模式。我们不暴露创建对象的具体逻辑,而是将将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂。工厂模式根据抽象程度的不同可以分为:
- 简单工厂模式
- 工厂方法模式
- 抽象工厂模式
1-1 简单工厂模式
简单工厂模式,又叫静态工厂方法,由一个工厂对象来决定创建某一种产品对象类的实例,主要用来创建同一类对象。
var basketball = function(){
this.title = '篮球';
}
basketball.prototype = {
getMenberNum :function(){
console.log('5个人');
},
getPlayAction:function(){
console.log('投篮')
}
}
var football = function(){
this.title = '足球';
}
football.prototype = {
getMenberNum :function(){
console.log('11个人');
},
getPlayAction:function(){
console.log('射门')
}
}
var factory = function(type){
switch(type){
case 'basketball': return new basketball();
case 'football': return new football();
}
}
//然后我们就可以这么用
oPlay = factory('basketball');
oPlay.getMenber();
oPlay2 = factory('football');
oPlay2.getPlayAction();
var factory = function(name,age,sex,national){
var obj = {};
obj.name = name;
obj.age = age;
obj.sex = sex;
switch(national){
case 'Chinese':
obj.speak = function(){
console.log('Speak Chinese');
};
break;
case 'England':
obj.speak = function(){
console.log('SpeakEnglish')
};
break;
}
return obj;
}
var person = new factory("Jack",'','Man',"Chinese");
person.speak();
1-2 工厂方法模式
工厂方法模式,通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例。
var Court = function (type, content) {
if (this instanceof Court) {
return new this[type](content);
} else {
return new Court(type, content);
}
}
Court.prototype = {
basketball : function (content) {
this.content = content;
(function (content) {
console.log(content + 'basketball');
})(content);
},
football : function (content) {
this.content = content;
(function (content) {
console.log(content + 'football');
})(content);
}
}
var data = [{
type: 'basketball',
content: '5人打'
},
{
type: 'football',
content: '11人踢'
}
];
for (var i = ; i < data.length; i++) {
Court(data[i].type, data[i].content);
}
// 5人打basketball
// 11人踢football
对于创建多类对象,简单工厂就不太实用了。
通过工厂方法模式可以轻松的创建多个类的实例对象,而且创建对象的方式避免了使用者与对象类之间的耦合,用户不必关心创建该对象的具体类,只需调用工厂方法即可。
1-3 抽象工厂模式
抽象工厂模式,通过对类的工厂抽象使其业务用于对产品类簇的创建,而不负责创建某一类产品的实例。
/*定义一个抽象类 AbsProducer(生产商),该生产商有两个行为,一个生产,一个出售,其中生产方法为抽象方法,由具体的厂家去实现*/
var AbsProducer = function(){};
AbsProducer.prototype = { sell:function(name){
var product = this.create(model);
product.showName();
return product;
},
create:function(name){
throw new Error("抽象类不支持该操作");
}
}
联想工厂:LenovoFactory.js
var LenovoFactory = function () {};
extend(LenovoFactory, AbsProducer);
LenovoFactory.prototype.create = function (name) {
var product;
switch (name) {
case "phone":
product = new LenovoPhone();
break;
case "computer":
product = new LenovoComputer();
break;
}
Interface.ensureImplements(product, ElectronicProduct);
product.showName();
return product;
}
function LenovoPhone() {};
LenovoPhone.prototype = {
showName: function () {
console.log("我是联想厂商生产的手机,取名为Lenovo-phone");
},
showCpu: function () {
console.log("联想手机cpu一般般咯");
},
showSysType: function () {
console.log("姑且认为联想手机系统为WP吧");
}
};
function LenovoComputer() {};
LenovoComputer.prototype = {
showName: function () {
console.log("我是联想厂商生产的电脑,型号为Y系列");
},
showCpu: function () {
console.log("联想电脑cpu,四代I7处理器");
},
showSysType: function () {
console.log("联想电脑系统为正版win7");
}
};
苹果工厂:AppleFactory.js
var AppleFactory = function () {};
extend(AppleFactory, AbsProducer);
AppleFactory.prototype.create = function (name) {
var product;
switch (name) {
case "phone":
product = new Iphone();
break;
case "computer":
product = new Mac();
break;
}
Interface.ensureImplements(product, ElectronicProduct);
product.showName();
return product;
};
function Iphone() {};
Iphone.prototype = {
showName: function () {
console.log("我是苹果公司生产的手机,取名为Iphone");
},
showCpu: function () {
console.log("iphone手机CPU是基于ARM架构重新设计的");
},
showSysType: function () {
console.log("iphone系统为IOS9");
}
};
function Mac() {};
Mac.prototype = {
showName: function () {
console.log("我是苹果公司生产的电脑,取名为Mac");
},
showCpu: function () {
console.log("mac cpu还不错吧");
},
showSysType: function () {
console.log("mac系统为OS X");
}
};
调用:
/*定义了一个ElectronicProduct电子产品的接口,该接口有以下几个名称*/
var ElectronicProduct = new Interface("ElectronicProduct",["showName", "showCpu", "showSysType"]);
//这里你想要哪个品牌的电子产品,直接new一个该品牌的工厂即可。
var factory = new AppleFactory();
var product = factory.create("phone");
product.showSysType();
product.showCpu();
抽象工厂其实是一个实现子类继承父类的方法,在这个方法种我我们需要传入子类以及要继承父类的名称.
过渡类的原型继承,不是继承父类的原型,而是通过new 复制一个父类的实例,过渡类不仅仅继承了父类的原型方法,还继承了父类的对象属性.
JS设计模式之工厂模式的更多相关文章
- [JS设计模式]:工厂模式(3)
简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况. 说的通俗点,就像公司茶水间的饮料 ...
- js设计模式:工厂模式、构造函数模式、原型模式、混合模式
一.js面向对象程序 var o1 = new Object(); o1.name = "宾宾"; o1.sex = "男"; o1.a ...
- JS设计模式--简单工厂模式
在JS中创建对象会习惯的使用new关键字和类构造函数(也是可以用对象字面量). 工厂模式就是一种有助于消除两个类依赖性的模式. 工厂模式分为简单工厂模式和复杂工厂模式,这篇主要讲简单工厂模式. 简单工 ...
- JS设计模式——7.工厂模式(示例-XHR)
XHR工厂 基本实现 var AjaxHandler = new Interface('AjaxHandler', ['request', 'createXHR']); var SimpleHandl ...
- JS设计模式——7.工厂模式(概念)
工厂模式 本章讨论两种工厂模式: 简单工厂模式 使用一个类(通常是一个单体)来生成实例. 使用场景:假设你想开几个自行车商店(创建自行车实例,组装它,清洗它,出售它),每个店都有几种型号的自行车出售. ...
- JS设计模式——7.工厂模式(示例-RSS阅读器)
RSS阅读器 由于我们只想跟RSS容器对象打交道,所以用一个工厂来实例化这些内部对象并把它们组装到一个RSS阅读器中. 使用工厂方法在好处在于,我们创建的RSS阅读器类不会与那些成员对象紧密耦合在一起 ...
- 设计模式——抽象工厂模式及java实现
设计模式--抽象工厂模式及java实现 设计模式在大型软件工程中很重要,软件工程中采用了优秀的设计模式有利于代码维护,方便日后更改和添加功能. 设计模式有很多,而且也随着时间在不断增多,其中最著名的是 ...
- 5. 星际争霸之php设计模式--抽象工厂模式
题记==============================================================================本php设计模式专辑来源于博客(jymo ...
- 3. 星际争霸之php设计模式--简单工厂模式
题记==============================================================================本php设计模式专辑来源于博客(jymo ...
随机推荐
- 57.搭建Vue环境
nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3 cmd命令行: node -v //显示node版本 v6.1 ...
- Spring框架的第三天
## Spring框架的第三天 ## ---------- **课程回顾:Spring框架第二天** 1. IOC的注解方式 * @Value * @Resource(name="" ...
- HDU 3033 分组背包(至少选一个)
分组背包(至少选一个) 我真的搞不懂为什么,所以现在就只能当作是模板来用吧 如果有大牛看见 希望评论告诉我 &代码: #include <cstdio> #include < ...
- rsync 远程同步 实时同步备份 两种免交互的方式实现实时备份
rsync 远程同步: 一款快速增量备份工具 Remote Sync,远程同步 支持本地复制,或者与其他SSH.rsync主机同步 作用:做数据备份 备份方式: 完全备份 增量备份 ...
- TheFatRat一般使用
利用它生成后门 第一种通常情况下速度很快,较稳定,但免杀效果极差 推荐使用第二种 免杀效果好,如下图 第一种是最新的模块,较免杀效果极好.还可伪造图标 第二种是旧的
- vue条件语句v-if、v-else、v-else-if用法
vue条件语句v-if.v-else.v-else-if用法 v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.v-if 也是惰性的:如果在初始渲 ...
- 解决 img 标签上下出现的间隙
我们在平常的开发过程中,经常需要使用多张图片,而使用多张图片的时候,一般会去使用一个列表来对我们的img进行承装.就算我们把img的外边距和内边距全部清空了,但是这时会发现图片上下单会多出一定的间隙. ...
- 【题解】Luogu P3931 SAC E#1 - 一道难题 Tree
原题传送门 题目几乎告诉你要用最大流 先进行搜索,将树的叶子节点都连到一个虚拟点T上,流量为inf(这样不会干扰到前面部分的最大流) 其他边按树的形态连边,以根节点为S,跑一变最大流即可求出答案 #i ...
- 设计模式理解(九)结构型——外观(Facade)
等了好久,终于想起来开写了,这次写的是外观模式,记得大学时弄课程设计,外观模式搞得我比较混乱,因为单词不认识,后来觉得有点蛋疼,感觉是一坨混乱的东西然后加个壳再弄几个外部调用的接口而已.个人认为,Fa ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 合并单元格
jQuery EasyUI 数据网格 - 合并单元格 数据网格(datagrid)经常需要合并一些单元格.本教程将向您展示如何在数据网格(datagrid)中合并单元格. 为了合并数据网格(datag ...