写好js代码重用及常见设计模式

谈到代码重用,首先想到的就是继承,GoF有这样的建议:对象组合优于继承。js继承通过原型来实现,基本实现如:function inherit(C,P){C.prototype=new P();}

或function inherit(C,P){var F=function(){};F.prototype=P.prototype;C.prototype=new F();}

父级传递参数(借用父级的构造函数)

function Parent(){
    this.childParas=arguments;
    console.log(this.childParas);
 }

 function Child(a,b,c){
    Parent.apply(this,arguments);
 }

 var c=new Child("hello","world","gabriel");//["hello", "world", "gabriel"]

单例模式

 

上面这种写法的缺点是实例是public的,不是私有的,进行改进:

 

这种写法仍然有缺点,通过下面的代码可以看到:

 Universe.prototype.nothing = true;
 var uni = new Universe();
 Universe.prototype.everything = true;//添加无用了
 var uni2 = new Universe();//这次new的对象只是返回了instance

 uni.nothing;// true
 uni.everything;// undefined
 uni2.nothing;// true
 uni2.everything;// undefined

改进如下:

function Universe() {
 var instance;
 Universe = function Universe() {
 return instance;
 };

 //Universe.prototype=this;//这整个部分代码解释这句必不可少
 
 instance=new Universe();
 return instance;
 }

 Universe.prototype.nothing = true; 
 var u1=Universe;
 console.log(u1);
 var uni = new Universe(); 
 
 console.log(Universe.prototype);

 Universe.prototype.everything = true;
 var uni2 = new Universe();
 var u2=Universe
 console.log(u2);
 console.log(Universe.prototype);
 console.log(u1===u2);

运行结果:

 

工厂模式

工厂模式的目的就是为了创建对象,通常的实现是一个类的静态方法:

①执行重复的操作,创建相似的对象

②提供一个对外的创建对象的方法,外界调用时不用考虑内部细节。

function CarMaker() {}

 CarMaker.prototype.drive = function() {
 return "Vroom, I have " + this.doors + " doors";
 };

 CarMaker.factory = function(type) {
 var constr = type,
 newcar;
 if (typeof CarMaker[constr] !== "function") {
 throw {
 name: "Error",
 message: constr + " doesn't exist"
 };
 }

 if (typeof CarMaker[constr].prototype.drive !== "function") {
 CarMaker[constr].prototype = new CarMaker();
 }

 newcar = new CarMaker[constr]();

 return newcar;
 };

 CarMaker.Compact = function() {
 this.doors = 4;
 };
 CarMaker.Convertible = function() {
 this.doors = 2;
 };
 CarMaker.SUV = function() {
 this.doors = 24;
 };

 console.log(CarMaker.factory('SUV').drive());//Vroom, I have 24 doors

迭代器模式

对象包含一些聚合的数据,这些数据内部有复杂的结构,通过迭代器对外(消费者)提供一个简单的访问单个数据项,包含一个next(),hasNext()

 var element;
 while (element = agg.next()) {
    // do something with the element ...
    console.log(element);
 }

模式实现:

 

观察者模式(订阅/发布)

观察者模式被广泛应用到客户端js程序里面,所有的浏览器事件(mouseover,keypress等等),观察者模式另外一个说法就是订阅,发布模式。这个模式出现的主要动机或者说目标就是为了解耦(松耦合)。从一个对象调用另一个对象方法的模式转变为一个对象订阅另一个对象事件,在事件发生时获得通知。订阅者就是观察者,被观察的对象称为发布者。通常实现的方式:

img_57de36b8f13f8

 

本文参考《JavaScript Patterns》

javascript
作者:张雪飞
出处:https://zhangxuefei.site/p/1654
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注