前端设计模式:从js原始模式开始,去理解Js工厂模式和构造函数模式

时间: 2018-01-18阅读: 755标签: 模式

原始模式:  

在js中我们需要创建一个对象,比如创建一个“人”,它拥有自己的名称属性,和可以说话的功能,我们可以这样实现:

var person = new Object;
person.name = "Tony";
person.sayName = function(){
	console.log(this.name);
};
//或者字面量形式
var person={
	name:"tony",
	sayName:function(){
		console.log(this.name);
	}
}

这种设计被称为:原始模式。我们可以看出它具如下优缺点:

优点:可以直观的看出对象拥有的属性和方法
缺点:如果有多个类型,需要创建多个实例


工厂模式  

如果需要批量创建多个人,如person1、person2……的时候,使用原始模式的话每次都要重复类似的代码,如果要是可以批量生产就好了,这个时候使用工厂模式就能很好解决。如下:

var person=function(name){
	var obj=new Object;
	obj.name=name;
	obj.sayName=function(){
		console.log(this.name);
	}
	return obj
}
var p1=person('tony');
var p2=person('aimi');
console.log(typeof p1);  // object
console.log(typeof p2);  // object
console.log(p1 instanceof Object); // true

这样简单的调用就可进入造人模式了(啪啪啪……),只需要指定姓名就可以了。所以工厂模式可以理解像生活中工厂一样,可以批量的生产具有相同属性和功能的商品。开发场景:当我们需要解决很多相似问题,这时候就需要采用工厂模式来实现。

但是工厂模式下的对象我们不能识别它的类型,由于typeof返回的都是object类型,不知道它是那个对象的实例。另外每次造人时都要创建一个独立的person的对象,会造成代码臃肿的情况。所以工厂模式的优缺点总结如下:

优点:同一类型同一属性可以重复调用;能解决多个相似的问题。 
缺点:不能知道对象识别的问题(对象的类型不知道)。


构造函数模式

除了上面讲的工厂模式外,我们还可以使用构造函数模式来解决重复造轮子,产生大量的重复性代码的问题。例如:

var Person=function(name){
	this.name=name;
	this.sayName=function(){
		console.log(this.name);
	}
}
var p1=new Person('tony');
var p2=new Person('aimi');

我们可以看出要使用Person的新实例,就必须使用new。新实例的constructor(构造函数)属性指向的就是Person。

console.log(p1.constructor == Person);//true

同时使用instanceof检测对象的类型就更为可靠了,因为instanceof是用来专门比较一个对象是否为某个构造函数的实例:

console.log(p1 instanceof Object); // true
console.log(p1 instanceof Person); // true

这就是构造函数比工厂模式强的地方,因为它只道自己从哪里来,通过谁产生的。



利用工厂方法对构造函数模式代码的改进: 

当创建对象的流程赋值的时候,比如依赖于很多设置文件等。并且,你会经常在程序里看到工厂方法,用于让子类类定义需要创建的对象类型。  

var Person = (function () {
    var Person = function (name) {
        this.name = name;
        this.sayName=function(){
		console.log(this.name);
	}
    };
    return function (name) {
        return new Person(name);
    };
})();

var p1 = new Person("tony");


 

 

链接: http://www.fly63.com/article/detial/369

常见的对象创建模式

Object构造函数此方法的缺点十分明显那就是要写大量的代码。对象字面量创建字面量的缺点是当我i们创建多个相似的对象的时候,它仍然不够灵活,依然会产生重复代码。

Js设计模式——代理模式

代理模式属于设计模式中结构型的设计模式; 顾名思义就是为一个对象提供一个代用品或占位符,以便控制对它的访问!并且在未来如果不需要预加载,只要改成请求本体代替请求代理对象就行。

js设计模式——职责链模式

使多个对象都有机会处理请求,从而避免请求的发送者与接收者之间的耦合关系,将这些处理请求的对象形成一个链,并沿着这个链传递请求,直到有一个对象处理它为止;

Js设计模式——适配器模式

适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改;适配器不需要修改已有接口,就可以使他们协同工作;

Js设计模式——观察者模式

观察者模式定义了一种一对多的对象依赖关系,当被依赖的对象的状态发生了改变,所有依赖它的对象都会得到通知;假如你去苹果专卖店买最新款的iphone11,因为iphone11刚出来不久,正处旺季,供货不足;

js设计模式——策略模式

策略模式是JavaScript设计模式中行为型的设计模式;定义一系列算法,并将这些算法各自封装成策略类(方法),然后将不变的部分和变化的部分分离开来,并且这些算法可以相互替换

React组件设计模式-Render-props

写业务时,我们经常需要抽象一些使用频率较高的逻辑,但是除了高阶组件可以抽象逻辑,RenderProps也是一种比较好的方法。RenderProps,顾名思义就是将组件的props渲染出来。实际上是让组件的props接收函数,由函数来渲染内容。将通用的逻辑

发布-订阅模式和观察者模式真的不一样?

设计模式的定义: 在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。设计模式并不能直接用来完成代码的编写,而是描述在各种不同情况下,要怎么解决问题的一种方案,它不是一个死的机制

JavaScript中的development模式怎么实现

随着你的 JavaScript 应用越来越复杂,你很可能会在 development 和 production 模式下,分别加载和执行不同的代码逻辑。能够在 development 和 production 模式下,分别打包或执行不同的代码,是一种非常强大的能力

Development模式是如何运作的?

如果您的JavaScript代码库非常复杂,那么您可能会想办法在开发模式和生产模式中捆绑和运行不同代码。在开发模式和生产模式中捆绑并运行不同的代码是非常强大的。在开发模式中,React里有许多预警,可以帮助我们在导致bug之前找到问题

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全