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 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 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
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php 函数中使用static的说明
2012/06/01 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
js正文内容高亮效果的实现方法
2013/06/30 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
python使用zip将list转为json的方法
2018/12/31 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
热能动力工程毕业生自荐信
2013/11/07 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
通知格式
2015/04/27 职场文书
2016年元旦寄语
2015/08/17 职场文书
新年寄语2016
2015/08/17 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python