JavaScript设计模式之工厂模式和构造器模式


Posted in Javascript onFebruary 11, 2015

什么是模式

前阵子准备期末考试,劳神又伤身的,实在闲不得空来更新文章,今天和大家说说javascript中的设计模式。

首先呢,我们需要知道的是:模式是一种可复用的解决方案,而反模式呢就是针对某个问题的不良解决方案。

js反模式常见例子

1.向setTimeout和setInterval传递字符串,而不是函数,这会触发eval()的内部使用。
2.在全局上下文中定义大量的变量污染全局命名空间
3.修改Object类的原型
4.以内联形式使用js,嵌入在HTML文件中的js代码是无法包含在外部单元测试工具中的。
5.滥用document.write,如果在页面加载完成后执行docume.write,它会重写我们所在的页面,可以使用document.creatElement代替的话就尽量不用docume.write。

设计模式的类别

创建型设计模式

创建型设计模式专注于处理对象创建机制,以适合给定情况的方式来创建对象。属于这个类别的属性包括:

Constructor构造器、Factory工厂、Abstract抽象、Prototype原型、Singleton单例和Builder生成器

结构型设计模式

结构型模式与对象组合有关,通常可以用于找出在不同对象之间建立关系的简单方法。
属于这个类别的模式包括:

Decorator装饰者、Facade外观、Flyweight享元、Adapter适配器和Proxy代理

行为设计模式

行为模式专注于改善或简化系统中不同对象之间的通信。

行为模式包括:

Iterator迭代器、Mediator中介者、Observer观察者和Visitor访问者

Factory(工厂)模式

为了解决多个类似对象声明的问题,我们可以使用一种叫做 工厂模式的方法,这种方法 就是为了解决实例化对象产生大量重复的问题。

<script type="text/javascript">

    function createObject(name,age,profession){//集中实例化的函数

        var obj = new Object();

        obj.name = name;

        obj.age = age;

        obj.profession = profession;

        obj.move = function () {

            return this.name + ' at ' + this.age + ' engaged in ' + this.profession;

        };

        return obj;

    }

    var test1 = createObject('trigkit4',22,'programmer');//第一个实例

    var test2 = createObject('mike',25,'engineer');//第二个实例

    alert(test1.move());

    alert(test2.move());

</script>

工厂模式的分类

工厂模式分为简单工厂、抽象工厂和智能工厂,工厂模式不显示地要求使用一个构造函数。

简单工厂模式:使用一个类(通常为单体)来生成实例。
复杂工厂模式:使用子类来决定一个成员变量应该是哪个具体的类的实例。

工厂模式之利

主要好处就是可以消除对象间的耦合,通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。
工厂模式之弊

大多数类最好使用new关键字和构造函数,可以让代码更加简单易读。而不必去查看工厂方法来知道。   
工厂模式解决了重复实例化的问题 ,但还有一个问题,那就是识别问题,因为根本无法 搞清楚他们到底是哪个对象的实例。

alert(typeof test1); //Object 

alert(test1 instanceof Object); //true

何时使用工厂模式?

Factory模式主要在以下场景使用:

1.当对象或组件涉及高复杂性时
2.当需要根据所在的不同环境轻松生成对象的不同实例时
3.当处理很多共享相同属性的小型对象或组件时

Constructor(构造器)模式

ECMAScript 中可以采用构造函数(构造方法)可用来创建特定的对象。 该模式正好可以解决以上的工厂模式无法识别对象实例的问题。

<script type="text/javascript">

    function Car(model,year,miles){//构造函数模式

        this.model = model;

        this.year = year;

        this.miles = miles;

        this.run = function () {

            return this.model + " has done " + this.miles + "miles";

        }

    }

    var Benz = new Car('Benz',2014,20000);

    var BMW = new Car("BMW",2013,12000);

    alert(Benz instanceof Car); //很清晰的识别他从属于 Car,true
    console.log(Benz.run());

    console.log(BMW.run());

</script>

使用构造函数的方法 ,即解决了重复实例化的问题 ,又解决了对象识别的问题,该模式与工厂模式的不同之处在于:

1.构造函数方法没有显示的创建对象 (new Object());
2.直接将属性和方法赋值给 this 对象;
3.没有 renturn 语句。

构造函数的方法有一些规范:

1.函数名和实例化构造名相同且大写, (PS:非强制,但这么写有助于区分构造函数和 普通函数);
2.通过构造函数创建对象,必须使用 new 运算符。 
既然通过构造函数可以创建对象,那么这个对象是哪里来的, new Object()在什么地方执行了?执行的过程如下:

1.当使用了构造函数,并且 new 构造函数(),那么就后台执行了 new Object();
2.将构造函数的作用域给新对象 ,(即 new Object()创建出的对象),而函数体内的 this 就 代表 new Object()出来的对象。
3.执行构造函数内的代码;
4.返回新对象(后台直接返回)。

带原型的Constructor(构造器)

js中有一个名为prototype的属性。调用js构造器创建一个对象后,新对象就会具有构造器原型的所有属性。通过这种方式,可以创建多个Car对象,并访问相同的原型。

   <script type="text/javascript">

        function Car(model,year,miles) {

            this.model = model;

            this.year = year;

            this.miles = miles;

        }

        Car.prototype.run = function () {

            return this.model + " has done " + this.miles + " miles ";
        };

        var Benz = new Car('S350',2010,20000);

        var Ford = new Car('Ford',2012,12000);
        console.log(Benz.run());//"S350 has done 20000 miles "

        console.log(Ford.run());

    </script>

现在run()的单一实例就能够在所有Car对象之间共享。
Javascript 相关文章推荐
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
JS实现动态星空背景效果
Nov 01 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 #Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 #Javascript
JS实现判断碰撞的方法
Feb 11 #Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 #Javascript
jquery实现动态操作select选中
Feb 11 #Javascript
JS操作HTML自定义属性的方法
Feb 10 #Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 #Javascript
You might like
DedeCms模板安装/制作概述
2007/03/11 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
python 图片验证码代码
2008/12/07 Python
高效使用Python字典的清单
2018/04/04 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
考试违纪检讨书
2014/02/02 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
5s标语大全
2014/06/23 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
人事局接收函
2015/01/31 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
高考升学宴主持词
2019/06/21 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
python 经纬度求两点距离、三点面积操作
2021/06/03 Python