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

什么是模式

前阵子准备期末考试,劳神又伤身的,实在闲不得空来更新文章,今天和大家说说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(工厂)模式

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

代码如下:
函数 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());

工厂模式的分类

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

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

工厂模式之利

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

工厂模式之弊

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

代码如下:

何时使用工厂模式?

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

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

Constructor(构造器)模式

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

代码如下:
函数模式 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());

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

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对象,并访问相同的原型。

代码如下:

}; 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());

现在run()的单一实例就能够在所有Car对象之间共享。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...