《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 相关文章推荐
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
Javascript & DHTML 实例编程(教程)基础知识
Jun 02 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
利用javaScript处理常用事件详解
Apr 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
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
mac下如何将python2.7改为python3
2018/07/13 Python
python为什么会环境变量设置不成功
2020/06/23 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
公司年会晚宴演讲稿
2014/01/06 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
村居抓节水倡议书
2014/05/19 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
社区志愿者活动总结
2014/06/26 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书