《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中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
javascript函数特点实例分析
May 14 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
vue实现计算器功能
Feb 22 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
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
Python完全新手教程
2007/02/08 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Python selenium自动化测试模型图解
2020/04/15 Python
python能做哪方面的工作
2020/06/15 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL