在JS中创建对象会习惯的使用new关键字和类构造函数(也是可以用对象字面量)。

工厂模式就是一种有助于消除两个类依赖性的模式。

工厂模式分为简单工厂模式和复杂工厂模式,这篇主要讲简单工厂模式。

简单工厂模式:使用一个类来生成实例。

复杂工厂模式:使用子类来决定一个成员变量应该是哪个具体的类的实例。

简单工厂模式:

常用对象方法创建和调用

var BallShop = function(){};

BallShop.prototype = {

  sellBall : function(model){

    var ball;
switch(model){
case"tennis":
ball=new TennisBall();break;
case"bask":
ball=new BasketBall();break;
case"volly":
ball=new VollyBall();break;
default:
ball=new FootBall();break;
}
return ball;   } } var balltype = new BallShop(); balltype .sellBall("tennis");

以上方式能够满足大多数情形下使用,但扩展性就不友好了,如果需要添加一些新的球类,必须修改球类的switch部分。

把这部分单独出来交给一个简单额工厂对象:

<script type="text/javascript">
var BasketBall=function(){
console.log("baseketball is hotting at unitedstates");
}
var TennisBall=function(){
console.log("you should buy a TennisBall")
}
var VollyBall=function(){
console.log("VollyBall is very interesting");
}
var FootBall=function(){
console.log("FootBall...")
}

        
var BallFactory={
createBall:function(model){
var ball;
switch(model){
case"tennis":
ball=new TennisBall();break;
case"bask":
ball=new BasketBall();break;
case"volly":
ball=new VollyBall();break;
default:
ball=new FootBall();break;
}
return ball;
}
} var BallShop = function(){};
BallShop.prototype = {
  sellBall:function(model){
    var ball = BallFactory.createBall(model);
    return ball;
  }
} //调用
var ball1=new BallShop();
ball1.sellBall("tennis");
var ball2=new BallShop()
ball2.sellBall("balls");
</script>

BallFactory是一个脱离于BallShop的单体。能够降低耦合度。当需要新添加类型的时候,只要修改BallFactory工厂单体对象就行。

最后运行的结果为:

使用javascript完成一个简单工厂设计模式。的更多相关文章

  1. dom4j解析器 基于dom4j的xpath技术 简单工厂设计模式 分层结构设计思想 SAX解析器 DOM编程

    *1 dom4j解析器   1)CRUD的含义:CreateReadUpdateDelete增删查改   2)XML解析器有二类,分别是DOM和SAX(simple Api for xml).     ...

  2. 从零开始单排学设计模式「简单工厂设计模式」黑铁 III

    阅读本文大概需要 2 分钟. 本篇是设计模式系列的第二篇,虽然之前也写过相应的文章,但是因为种种原因后来断掉了,而且发现之前写的内容也很渣,不够系统.所以现在打算重写,加上距离现在也有一段时间了,也算 ...

  3. java简单工厂设计模式

    一.基本定义 /* *简单工厂设计模式: *文字描述理解: * 简单工厂模式属于类的创建型模式,又叫做静态工厂方法模式. * 通过专门定义一个类来负责创建其它类的实例,被创建的实例通常 * 都具有共同 ...

  4. php设计模式课程---2、为什么会用到简单工厂设计模式

    php设计模式课程---2.为什么会用到简单工厂设计模式 一.总结 一句话总结: 比如调用数据库的语句,如果调用的数据库名字改了,或者调用的数据库类型改了(比如从Mysql用到了Mysqli),那么要 ...

  5. Java反射机制(五):使用反射增强简单工厂设计模式

    关于简单工厂设计模式的讲解,可参考博文<设计模式: 简单工厂模式>,此处不再介绍:  我们先观察之前介绍的关于简单工厂: public class OperateFactory { pub ...

  6. 应用OpenMP的一个简单的设计模式

    小喵的唠叨话:最近很久没写博客了,一是因为之前写的LSoftmax后馈一直没有成功,所以在等作者的源码.二是最近没什么想写的东西.前两天,在预处理图片的时候,发现处理200w张图片,跑了一晚上也才处理 ...

  7. javascript编写一个简单的编译器(理解抽象语法树AST)

    javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...

  8. 用ES6创建一个简单工厂模式

    1 什么是工厂模式? 工厂模式是用来创建对象的一种最常用的设计模式.我们不暴露创建对象的具体逻辑,而是将将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂.工厂模式根据抽象程度的不同可以分为:简 ...

  9. 简单工厂设计模式(Simple Factory Design Pattern)

    [引言]最近在Youtub上面看到一个讲解.net设计模式的视频,其中作者的一个理解让我印象很深刻:所谓的设计模式其实就是运用面向对象编程的思想来解决平时代码中的紧耦合,低扩展的问题.另外一点比较有见 ...

随机推荐

  1. mina客户端发送消息延迟问题分析

    原文:http://www.cnblogs.com/haiq/archive/2011/08/01/2124292.html (写的蛮好,保存下来) 由于项目需要,用到了 mina 框架进行 tcp ...

  2. MacBook pro管理员变成普通用户无法解锁问题

    最近使用Mac的时候,把管理员的名字修改了一下,WTF?没有管理员权限了?然后就没有解锁权限了,这可以说是Mac的一个致命bug呀!下载软件也不可以了.具体我的解决方式在这里记录一下,以供和我遇到同样 ...

  3. vue中单选框与多选框的实现与美化

    我们在做一些页面时,可能会用到很多的单选框和复选框,但是原生的radio和checkbox前面的原型图标或方框样式不尽人意.于是,决定自己来实现单选框和复选框.我用的是vue,所以就用vue的方式实现 ...

  4. 安装java1.8.0

    安装java 1.删除自带jdk rpm -e --nodeps `rpm -qa | grep java` 2.查看yum库中有哪些jdk版本. yum search java | grep jdk ...

  5. BZOJ1123 BLO

    割点的好题. 联通图,难度降低.首先对于一个点,如果他不是割点,那它的贡献是2*(n-1),就是任何一个其他节点都少了正反两个数对,这个看样例可以看出来. 如果它是一个割点,去掉他以后会出现若干个联通 ...

  6. python中的fstring的 !r,!a,!s

    首先是fstring的结构 f ' <text> { <expression> <optional !s, !r, or !a> <optional : fo ...

  7. Docker安装Redis及Warning解决方法

    虚拟机环境:VirtualBox 操作系统:CentOS 7 宿主机: Microsoft Windows 10 家庭中文版 Docker简介 Docker是一个轻量级容器技术.Docker直接运行在 ...

  8. 统计网络time_wait连接状态及tcpip连接数

    netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' LAST_ACK 1 SYN_RECV 14 ESTABLIS ...

  9. 【React自制全家桶】二、分析React的虚拟DOM和Diff算法

    一.React如何更新DOM内容: 1.  获取state 数据 2.  获取JSX模版 3.  通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...

  10. DBCP连接池参数解释

    1.<!-- 数据源1 --> 2. <bean id="dataSource" 3. class="org.apache.commons.dbcp.B ...