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(工厂)模式
为了解决多个类似对象声明的问题,我们可以使用一种叫做工厂模式的方法,这种方法就是为了解决实例化对象产生大量重复的问题。
<scripttype="text/javascript">
functioncreateObject(name,age,profession){//集中实例化的函数
varobj=newObject();
obj.name=name;
obj.age=age;
obj.profession=profession;
obj.move=function(){
returnthis.name+'at'+this.age+'engagedin'+this.profession;
};
returnobj;
}
vartest1=createObject('trigkit4',22,'programmer');//第一个实例
vartest2=createObject('mike',25,'engineer');//第二个实例
alert(test1.move());
alert(test2.move());
</script>
工厂模式的分类
工厂模式分为简单工厂、抽象工厂和智能工厂,工厂模式不显示地要求使用一个构造函数。
简单工厂模式:使用一个类(通常为单体)来生成实例。
复杂工厂模式:使用子类来决定一个成员变量应该是哪个具体的类的实例。
工厂模式之利
主要好处就是可以消除对象间的耦合,通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。
工厂模式之弊
大多数类最好使用new关键字和构造函数,可以让代码更加简单易读。而不必去查看工厂方法来知道。
工厂模式解决了重复实例化的问题,但还有一个问题,那就是识别问题,因为根本无法搞清楚他们到底是哪个对象的实例。
alert(typeoftest1);//Object alert(test1instanceofObject);//true
何时使用工厂模式?
Factory模式主要在以下场景使用:
1.当对象或组件涉及高复杂性时
2.当需要根据所在的不同环境轻松生成对象的不同实例时
3.当处理很多共享相同属性的小型对象或组件时
Constructor(构造器)模式
ECMAScript中可以采用构造函数(构造方法)可用来创建特定的对象。该模式正好可以解决以上的工厂模式无法识别对象实例的问题。
<scripttype="text/javascript">
functionCar(model,year,miles){//构造函数模式
this.model=model;
this.year=year;
this.miles=miles;
this.run=function(){
returnthis.model+"hasdone"+this.miles+"miles";
}
}
varBenz=newCar('Benz',2014,20000);
varBMW=newCar("BMW",2013,12000);
alert(BenzinstanceofCar);//很清晰的识别他从属于Car,true
console.log(Benz.run()); console.log(BMW.run()); </script>