JavaScript设计模式之工厂方法模式介绍


Posted in Javascript onDecember 28, 2014

1. 简单工厂模式

说明:就是创建一个工厂类,里面实现了所对同一个接口的实现类的创建。

但是好像JavaScript 好像没有 接口 这号东西,所以我们去掉接口这个层; 当然,我们这里的 实现类 下的成员变量,方法应该都是一样的;

例如:这时举短信发送跟邮件发送的例子;

1>. 邮件发送[实现]类

function MailSender() {

    this.to = '';

    this.title = '';

    this.content = '';

}
MailSender.prototype.send = function() {

    //send body

}

2>. 短信发送[实现]类

function SmsSender() {

    this.to = '';

    this.title = '';

    this.content = '';

}
SmsSender.prototype.send = function() {

    //send body

}

3>. 创建一个工厂类:

function SendFactory() {

    this.sender = null;

}
SendFactory.prototype.produce = function(type) {

    var me = this;

    if (type == 'mail') {

        me.sender = new MailSender();

    } else if (type == 'sms') {

        me.sender = new SmsSender();

    }

 return me.sender;

}

4>. 使用这个工厂类:

var factory = new SendFactory();

var sender = factory.produce('mail'); //sms

sender.to = 'toName#mail.com';

sender.title = '邮件测试标题!';

sender.content = '发送内容';

sender.send();

2. 多个工厂方法模式

说明:多个工厂模式方法,是对普通工厂方法的改进,因为返回实现是依据传进去的字符返回,当字符输入错误,可能就无法处理,或是处理成错误的方式; 而多个工厂模式方法,就可以避免这样的错误;

我们对上面的工厂类进行改进:

function SendFactory() {

    this.sender = null;

}
SendFactory.prototype.produceMail = function() {

    var me = this;

    me.sender = new MailSender();

    return me.sender;

}
SendFactory.prototype.produceSms = function() {

    var me = this;

    me.sender = new SmsSender();

    return me.sender;

}

使用方法:

var factory = new SendFactory();

var sender = factory.produceSms(); //produceMail

sender.to = 'toName#xxxxx';

sender.title = '短信发送方法标题';

sender.content = '发送内容';

sender.send();

3. 静态工厂方法模式

说明:将上面的 多个工厂方法模式 的方法改为静态标识即可,使之不必对 SendFactory 进行实例化;

将工厂类代码修改如下:

var SendFactory = {

    produceMail : function() {

        return new MailSender();

    },

    produceSms : function() {

        return new SmsSender();

    }

}

使用方法:

var sender = SendFactory.produceMail();

sender.to = 'toName#mail.com';

sender.title = '邮件发送标题';

sender.content = '发送内容';

sender.send();

工厂方法模式说明

在面向对象思想编程说明,在具有很多产品(现实世界模型,名称:类名,成员属性,及操作方法等)需要初始化,即产品需要创建,并且[实现同一接口时],可以使用工厂方法模式; 第一种模式,有输入类型错误的可能,第二模式,需要用时即创建工厂实例;

Javascript 相关文章推荐
JS 自动安装exe程序
Nov 30 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
vue 如何使用递归组件
Oct 23 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 #Javascript
JavaScript设计模式之单件模式介绍
Dec 28 #Javascript
理解javascript回调函数
Dec 28 #Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 #Javascript
如何编写高质量JS代码
Dec 28 #Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 #Javascript
javascript中定义类的方法汇总
Dec 28 #Javascript
You might like
php处理restful请求的路由类分享
2014/02/27 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
js实现简单点赞操作
2020/03/17 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
由面试题加深对Django的认识理解
2019/07/19 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
自主实习接收函
2014/01/13 职场文书
公司拓展活动方案
2014/02/13 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
测控技术自荐信
2014/06/05 职场文书
中队活动总结
2014/08/27 职场文书
老人与海读书笔记
2015/06/26 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python