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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
js倒计时抢购实例
Dec 20 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
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 中英文语言转换类代码
2011/08/11 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
python实现下载文件的三种方法
2017/02/09 Python
Python入门必须知道的11个知识点
2018/03/21 Python
python递归实现快速排序
2018/08/18 Python
浅谈Django的缓存机制
2018/08/23 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
Python如何合并多个字典或映射
2020/07/24 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
大学生学习党课思想汇报
2014/01/03 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
综治目标管理责任书
2015/05/11 职场文书
科级干部培训心得体会
2016/01/06 职场文书
六年级作文之预言作文
2019/10/25 职场文书
python脚本框架webpy模板控制结构
2021/11/20 Python