《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 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
javaScript实现一个队列的方法
Jul 14 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
SSI指令
2006/11/25 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
微信小程序模版渲染详解
2018/01/26 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
flask框架视图函数用法示例
2018/07/19 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python爬虫之自制英汉字典
2019/06/24 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
《猫》教学反思
2014/02/26 职场文书
安全标语大全
2014/06/10 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js