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

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

原始模式:  

在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

JavaScript中的development模式怎么实现

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

Development模式是如何运作的?

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

Js中的代理模式

使用 Proxy API 可以方便的创建一个 get 和 set 拦截器;Object.defineProperty 方法创建代理模式;在 ES6 之前,通常使用 Object.defineProperty 这个方法:

Js代理模式

所谓的代理者是指一个类别可以作为其它东西的接口。代理者可以作任何东西的接口:网络连接、内存中的大对象、文件或其它昂贵或无法复制的资源。著名的代理模式例子为引用计数(英语:reference counting)指针对象。

多属性、多分类MySQL模式设计

当数据同时具备多个属性/分类时,改如何设计表结构和查询?我这样写数据少了还好,多了根本没法查,效率太低了。恰好我以前做过类似的业务需求设计,所以就回复了这个问题。

Js设计模式_享元模式与资源池

享元模式 (Flyweight Pattern)运用共享技术来有效地支持大量细粒度对象的复用,以减少创建的对象的数量。享元模式的主要思想是共享细粒度对象,也就是说如果系统中存在多个相同的对象,那么只需共享一份就可以了

JS常用设计模式

设计模式的定义:在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案,设计模式是前人解决某个特定场景下对而总结出来的一些解决方案。可能刚开始接触编程还没有什么经验的时候,会感觉设计模式没那么好理解,这个也很正常

JS设计模式:单例模式

单例模式,也叫单子模式,是一种常用的软件设计模式。在应用这个模式时,单例对象的类必须保证只有一个实例存在。一个很典型的应用是在点击登录按钮,弹出登录浮窗

前后端合作新模式

singsong:该模式主要对传统多页面应用构建的改进。关于 SPA(Single Page Application,单页应用程序)可以参考 SRR(Server-Side Render,服务端渲染)。在那个前端角色比较弱化的年代,页面主要以静态页面为主。

Js命令模式

命令模式:请求以命令的形式包裹在对象中,并传给调用对象。调用对象寻找可以处理该命令的合适的对象,并把该命令传给相应的对象,该对象执行命令。命令模式由三种角色构成:发布者、接收者、命令对象

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

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

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