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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
javascript变量声明实例分析
Apr 25 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
JS实现4位随机验证码
Oct 19 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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
新闻分类录入、显示系统
2006/10/09 PHP
php 一元分词算法
2009/11/30 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
Python 读写文件的操作代码
2018/09/20 Python
七一党建活动方案
2014/01/28 职场文书
考博专家推荐信
2014/05/10 职场文书
优秀会计求职信
2014/07/04 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
文艺委员竞选稿
2015/11/19 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
python装饰器代码解析
2022/03/23 Python