這篇文章主要介紹“js重構(gòu)怎么實現(xiàn)”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“js重構(gòu)怎么實現(xiàn)”文章能幫助大家解決問題。

成都創(chuàng)新互聯(lián)憑借專業(yè)的設(shè)計團(tuán)隊扎實的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識和豐厚的資源優(yōu)勢，提供專業(yè)的網(wǎng)站策劃、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)站優(yōu)化、軟件開發(fā)、網(wǎng)站改版等服務(wù)，在成都10多年的網(wǎng)站建設(shè)設(shè)計經(jīng)驗，為成都近千家中小型企業(yè)策劃設(shè)計了網(wǎng)站。

思路：

創(chuàng)建EmitterTarget類和EmitterEvent類。

EmitterTarget類主要使用了中介模式+觀察者模式

其中EmitterTarget類的實例化屬性list充當(dāng)中介角色，每當(dāng)執(zhí)行add方法時，給EmitterTarget類的實例化對象注冊事件名稱及觸發(fā)函數(shù)；每當(dāng)該對象執(zhí)行remove方法時，從list列表中移除注冊的事件及觸發(fā)函數(shù)；

dispatchEvent方法主要是發(fā)送事件對象本體，目的是為了在指定時刻觸發(fā)事件函數(shù)以及傳遞數(shù)據(jù)參數(shù)。

==EmitterTarget類實例化對象本身就是觀察者，觀察者的特點是有add，remove,觸發(fā)改變的函數(shù)(update或這里的dispatchEvent)，以及應(yīng)該有用于存放注冊信息的屬性或者單例對象。

==EmitterEvent類主要是用來創(chuàng)建事件對象本身,在創(chuàng)建時聲明需要觸發(fā)的事件類型以及需要攜帶的參數(shù)。

EmitterTarget.ts代碼如下：

import EmitterEvent from "./EmitterEvent";

interface IEvent{//中介者即存儲實例化對象綁定的事件的list的數(shù)據(jù)規(guī)范接口

[key:string]:Array;//key是事件名,value是觸發(fā)事件函數(shù)數(shù)組

}

export default class EmitterTarget{

private list:IEvent={};//私有變量list,只用于方法內(nèi)部數(shù)據(jù)存儲通信

constructor(){

}

public addEventListener(type:string,handler:Function):void{

if(!this.list[type])this.list[type]=[];//根據(jù)實例化對象傳進(jìn)來的事件類型判斷l(xiāng)ist列表中是否注冊該事件類型,如果沒注冊過,則創(chuàng)建這個字段

var index=this.list[type].indexOf(handler);//看對應(yīng)的事件中綁定的觸發(fā)函數(shù)數(shù)組中是否存在這個觸發(fā)函數(shù)

if(index>-1) this.list[type][index]=handler;//存在則覆蓋

this.list[type].push(handler);//如果觸發(fā)函數(shù)之前沒有則在對應(yīng)事件綁定的觸發(fā)函數(shù)數(shù)組中新增

}

public removeEventListener(type:string,handler?:Function):void{

if(!this.list[type])return;//如果list注冊表中無事件注冊,則刪除無意義,直接返回

if(handler===undefined){//如果調(diào)用該方法沒有傳要刪除事件類型對應(yīng)的觸發(fā)函數(shù)就直接將該事件類型對應(yīng)的全部觸發(fā)函數(shù)刪除

for(var i=0;i

this.list[type][i]=null;

}

this.list[type].length=0;

return;

}

var index=this.list[type].indexOf(handler as Function);//這里用了斷言,傳進(jìn)來了事件對應(yīng)的觸發(fā)函數(shù),所以這里直接刪除指定的那個

if(index<0) return;

this.list[type][index]=null;

}

public dispatchEvent(evt:EmitterEvent):void{//拋發(fā)事件

if(!evt.type) throw new Error("錯誤的事件類型");//要拋發(fā)的事件一定要有事件類型

evt.currentTarget=this;//拋發(fā)先給參數(shù),將拋發(fā)事件的主人綁定給這個拋發(fā)事件對象,以便后面注冊列表,事件類型對應(yīng)的觸發(fā)函數(shù)中需要使用到

// var target=this;

// while(target){//這里相當(dāng)于循環(huán)深度遞歸,去冒泡一直找當(dāng)前this的父元素...(用于dom元素)

//     if(target.parentElement)evt.path.push(target.parentElement);

//     target=target.parentElement;

// }

if(!this.list[evt.type]) return;//再次重復(fù)一次,必須聲明事件類型

for(var i:number=0;i

if(this.list[evt.type][i]) (this.list[evt.type][i] as Function).call(this,evt);

}

for (var j: number = 0; j < this.list[evt.type].length; j++){//這里再做了一次操作,在執(zhí)行完注冊表內(nèi)事件類型對應(yīng)的觸發(fā)函數(shù)后,去將觸發(fā)函數(shù)數(shù)組中為null的觸發(fā)函數(shù)位置取消

// (可能程序的其他地方已經(jīng)將數(shù)組里的某些觸發(fā)函數(shù)刪除了(執(zhí)行removeEventListener方法), 但是沒把占的位置取消, 這里將該位置取消了)

if(!this.list[evt.type][j]){

this.list[evt.type].splice(j,1);

j--;//splice()后j--是表示刪除之后j需要回退一步,因為這里是遍歷操作,

// 如果不回退則被刪除元素后面那個元素就不會再被檢測直接跳過

}

}

}

}

EmitterTarget.ts代碼如下:

import EmitterTarget from "./EmitterTarget";

export default class EmitterEvent{

public type:string;

public currentTarget?:EmitterTarget;

//target.dispatchEvent(evt);如這里的evt.currentTarget===target(在dispatchEvent方法內(nèi)部綁定evt.currentTarget=this)

public data?:object;//！?。∽⒁膺@里的傳的數(shù)據(jù)是用于注冊的事件類型的觸發(fā)函數(shù)中；

constructor(type:string,data?:object){//創(chuàng)建拋發(fā)的事件,主要有是事件類型,攜帶的數(shù)據(jù)，

this.type=type;

this.data=data;

}

}

使用demo：

1.定義需要使用事件拋發(fā)的類

import { IncomingMessage, ServerResponse } from "http";

import EmitterEvent from "./EmitterEvent";

import EmitterTarget from "./EmitterTarget";

import IRes from "./IRes";

import ResDataShow from "./ResDataShow";

interface IResData{

req:IncomingMessage;

res:ServerResponse;

data?:object;

}

export default class Main extends EmitterTarget{//main繼承了EmitterTarget,所以這里有隱藏的list屬性,用來充當(dāng)注冊表的角色

private static _instance?:Main;

constructor(){//給main的每個實例化對象都執(zhí)行偵聽ServerVo.DATA_LIST事件

super();

this.addEventListener(ServerVo.DATA_LIST,(e:EmitterEvent)=>this.dataHandler(e));//執(zhí)行事件偵聽方法時,在注冊表中注冊事件及其觸發(fā)函數(shù)

}

static get instance():Main

{

if(!Main._instance) Main._instance=new Main();

return Main._instance;

}

private dataHandler(e:EmitterEvent){//事件偵聽的觸發(fā)函數(shù)即回調(diào)函數(shù)

var data:IResData=e.data as IResData;

var command:IRes;

command=new ResDataShow();

command.exec(data.req,data.res,data.data);

}

}

2.具體拋發(fā)操作

import EmitterEvent from "./EmitterEvent";

import Main from "./Main";

var evt=new EmitterEvent(type,{req:req,res:res,data:dataObj});

Main.instance.dispatchEvent(evt);//拋發(fā)事件,觸發(fā)instance單例的綁定的函數(shù)

關(guān)于“js重構(gòu)怎么實現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。