《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析


Posted in Javascript onApril 08, 2020

本文实例讲述了Javascript面向对象程序设计工厂模式。分享给大家供大家参考,具体如下:

工厂模式和单例模式(https://3water.com/article/184230.htm)应该是设计模式中应用最多的模式了,工厂模式的定义:提供创建对象的接口(来自百度百科:http://baike.baidu.com/view/1306799.htm),意思就是根据领导(调用者)的指示(参数),生产相应的产品(对象)。

1.简单工厂模式

    简单工厂也就是按照上面的定义,根据不同的参数返回不同的结果。

//定义通用的对象类
  var car = function(){};
  //定义对象,对象内容省略,对象必须实现car定义的成员函数(yy一下车^_^)
  var benz = function(){};
  var bmw = function(){};
  var audi = function(){};

  //工厂方法
  var CarFactory = {
    createCar: function(brand){
       //private member of CarFactory
       var car;
       switch(brand){
        case 'benz':
          car = new benz();
          break;
        case 'bmw':
          car = new bmw();
          break;
        case 'audi':
          car = new audi();
          break;
        default:
          car = new bmw();
       }
       //可以不用理会下面这行代码,这里是为了确保所有的品牌汽车都实现了car类的方法
       Interface.ensureImplements(car, Car);
       //返回对象
       return car;
     }
};
//如果我们要获取一部汽车,只需要调用:
var mycar = CarFactory.createCar('bmw');
//不论是什么牌子的汽车,他应该都具有car的所有方法,因此即使不是同样的对象,我们可以“透明”的调用他的方法

2.工厂模式

工厂模式与简单工厂模式的区别在于工厂模式使用子类来创建对象,而不是一个独立的类

//创建一个通用的工厂
var factory = function(){};
factory.prototype = {
  sellcar: function(brand){
    var car = this.createCar(brand);
    return car;
  },
  createCar: function(){
    throw new Error('unsupported operation on an abstract class');
  }
}

//北汽集团
var BJfactory = function(){};
//继承自factory,请参考https://3water.com/article/184227.htm面向对象之二继承)
extend(BJfactory,factory);
//重写汽车方法
BJfactory.prototype.createCar = function(brand){
  var car;
  switch(brand){
   case 'bmw':
     car = new BJbmw();
     break;
   case 'benz':
     car = new BJbenz();
     break;
   case 'audi':
     car = new BJaudi();
     break;
   default:
     car = new BJbmw();
  }
  Interface.ensureImplements(car, Car);
  return car;
}
//上汽
var SHfactory = function();
extend(SHfactory, factory);
//形式同北汽
……

//这样一来,您在北京买车
var fac = new BJfactory();
//调用父类方法
var mycar = fac.sellcar('benz');
//在上海买车
fac = new SHfactory();
hercar = fac.sellcar('audi');
//注意标红的两行调用,调用者都是fac,其实是factory的两个不同子类,但是调用方法都一样,这就是工厂方法的使用

3.类比PHP(希望有助于理解1,2的内容,下面的类名只是实例,并非真实存在)

如果熟悉PHP的同学,也应该了解像PHP的数据库类一般也是工厂模式,形如:

$db = DataBase.getInstance('mysql');
//这里的$db其实是new Mysql(),而无论是class Mysql,还是class Oracle,还是class MSsql都实现了下面的connect,query方法

$db->connect();
$db->query($sql);

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
Angular实现form自动布局
Jan 28 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 #Javascript
JS快速实现简单计算器
Apr 08 #Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 #Javascript
vue-cli3单页构建大型项目方案
Apr 07 #Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 #Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 #Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 #Javascript
You might like
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
python PIL模块与随机生成中文验证码
2016/02/27 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
毕业论文致谢范文
2015/05/14 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js