JavaScript設(shè)計模式之責任鏈模式實例分析
更新時間：2019年01月16日 12:03:10 作者：吳封斌技術(shù)博客
這篇文章主要介紹了JavaScript設(shè)計模式之責任鏈模式,結(jié)合實例形式分析了責任鏈模式的概念、原理及具體定義與使用技巧,需要的朋友可以參考下
本文實例講述了JavaScript設(shè)計模式之責任鏈模式。分享給大家供大家參考，具體如下：
介紹
責任鏈模式（Chain of responsibility）是使多個對象都有機會處理請求，從而避免請求的發(fā)送者和接受者之間的耦合關(guān)系。將對象連成一條鏈，并沿著這條鏈傳遞該請求，直到有一個對象處理他為止。
請求以后，從第一個對象開始，鏈中收到請求的對象要么親自處理它，要么轉(zhuǎn)發(fā)給鏈中的下一個候選者。提交請求的對象并不知道哪一個對象將會處理它——也就是該請求有一個隱式的接受者（implicit receiver）。在運行時，任一候選者都可以響應相應的請求，候選者的數(shù)目是任意的，也可以在運行時刻決定哪些候選者參與到鏈中。
圖解為：
正文
（1）由于類一般是與接口打交道的，為此我們先定義一個規(guī)范類中方法的接口，代碼為
//定義一個靜態(tài)方法來實現(xiàn)接口與實現(xiàn)類的直接檢驗
//靜態(tài)方法不要寫出Interface.prototype ,因為這是寫到接口的原型鏈上的
//我們要把靜態(tài)的函數(shù)直接寫到類層次上
//定義一個接口類
var Interface=function (name,methods) {//name：接口名字
if(arguments.length<2){
alert("必須是兩個參數(shù)")
}
this.name=name;
this.methods=[];//定義一個空數(shù)組裝載函數(shù)名
for(var i=0;i<methods.length;i++){
if(typeof methods[i]!="string"){
alert("函數(shù)名必須是字符串類型");
}else {
this.methods.push( methods[i]);
}
}
};
Interface.ensureImplement=function (object) {
if(arguments.length<2){
throw new Error("參數(shù)必須不少于2個")
return false;
}
for(var i=1;i<arguments.length;i++){
var inter=arguments[i];
//如果是接口就必須是Interface類型
if(inter.constructor!=Interface){
throw new Error("如果是接口類的話，就必須是Interface類型");
}
//判斷接口中的方法是否全部實現(xiàn)
//遍歷函數(shù)集合分析
for(var j=0;j<inter.methods.length;j++){
var method=inter.methods[j];//接口中所有函數(shù)
//object[method]傳入的函數(shù)
//最終是判斷傳入的函數(shù)是否與接口中所用函數(shù)匹配
if(!object[method]||typeof object[method]!="function" ){//實現(xiàn)類中必須有方法名字與接口中所用方法名相同
throw new Error("實現(xiàn)類中沒有完全實現(xiàn)接口中的所有方法")
}
}
}
}
（2）使用定義一個書店的接口
var bookShop=new Interface("bookShop",["addBook","findBook","showBooks"]);//書店接口
（3）定義一個書類
var Book=function (bNm,bName,bAuthor,bType) {
this.bNm=bNm;
this.bName=bName;
this.bAuthor=bAuthor;
this.bType=bType;
}
（4）書店類=書架+圖書
1：在書店中添加書架和圖書
var pcatBookShop=(function(){
//書架
var jsBooks = new Array();//js書架
var cBooks = new Array();//c書架
var javaBooks = new Array();//java書架
//內(nèi)部類1
function AddJsBooks(book) {
if(book.bType=="Js"){
jsBooks.push(book);
}else {
AddJsBooks.successor(book);
}
}
//內(nèi)部類2
function AddJavaBooks(book) {
if(book.bType=="Java"){
javaBooks.push(book);
}else {
AddJavaBooks.successor(book);
}
}
//內(nèi)部類3
function AddCBooks(book) {
if(book.bType=="C"){
cBooks.push(book);
}else {
AddCBooks.successor(book);
}
}
})()
2：擴展設(shè)置責任鏈的方法（擴展在windows上）
//擴展window屬性
window.setSuccessor=function (after,before) {
after.successor=before;//引用的執(zhí)行
}
3:設(shè)置責任鏈，將每個對象鏈接起來
//設(shè)置責任鏈-----串起來 setSuccessor(AddJsBooks,AddJavaBooks); setSuccessor(AddJavaBooks,AddCBooks);
（5）查詢圖書的方法：通過圖書編號和圖書圖書名稱
/**********查詢書籍************/
var bookList = null;
function FindBbn(keyword) {
//鏈的頭部來初始化參數(shù)
if(!bookList){
bookList=jsBooks.concat(cBooks).concat(javaBooks);
var book = new Array();
book=bookList.filter(function (book) {//對booklist進行過濾，過濾的條件為匿名函數(shù)
if(book.bName.indexOf(keyword)!=-1){
return true;
}else {
return false;
}
});
//我要進行鏈式查詢
return book.concat(FindBbn.successor(keyword));
}
};
function FindByName(keyword,book){
var book = book;
book = bookList.filter(function(book){
if(book.bName.indexOf(keyword) != -1){
return true;
}else{
return false;
}
});
return book;
}
注意，數(shù)組的filter方法擴展代碼如下
Function.prototype.method=function (name,fn) {
this.prototype[name]=fn;
return this;
}
if(!Array.prototype.filter){
Array.method("filter",function (fn,thisObj) {
var scope=thisObj||window;
var a=[];
for(var i=0;i<this.length;i++){
if(!fn.call(scope,this[i],i,this));{
continue;
}
a.push(this[i]);
}
//返回過濾好數(shù)據(jù)
return a;
})
}
（6）規(guī)劃責任鏈
setSuccessor(FindBbn,FindByName);
（7）真正的書店類（實現(xiàn)接口的類）
return function () {
this.addBook=function (book) {
if(book instanceof Book){
AddJsBooks(book);//因為我知道誰是鏈的入口
}
};
this.findBook=function (keyword) {
return FindBbn(keyword);//游泳規(guī)劃的責任鏈可以從頭到尾的查詢?nèi)?，F(xiàn)indBbn沒有則到FindByName中查詢
}
this.showBooks=function () {
document.write("JS類圖書"+jsBooks.toSource()+"<br>");
document.write("Java類圖書"+javaBooks.toSource()+"<br>");
document.write("C類圖書"+cBooks.toSource()+"<br>");
//自動生產(chǎn)----------
document.write(cpoyStr(60,"-")+"<br>");
}
}
注意，在window上擴展一個可以自動生成“---------------”的方法
//擴展一個可以自動生產(chǎn)-----的方法
window.cpoyStr=function (num,str) {
var newStr="";
for(var i=0;i<num;i++){
newStr+=str;
}
return newStr;
};
（8）使用書店
1：添加書
var pb = new pcatBookShop();
pb.addBook(new Book("00101","JAVA","JIM","JAVA"));
pb.addBook(new Book("00201","C#","world","C"));
pb.addBook(new Book("00202","C++/C","Hello","C"));
pb.addBook(new Book("00301","JAVASCRIPT","Good","JS"));
2：對書架上的書進行操作-----展示
//展示
pb.showBooks();
document.write(pb.findBook("C").toSource())
為此我們基本上完成了對責任鏈模式的使用方式的基本學習。
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
FastAdmin是一款基于ThinkPHP5+Bootstrap的極速后臺開發(fā)框架,本文給大家介紹fastadmin的后臺時間戳字段如何顯示成年月日的日期格式,感興趣的朋友跟隨小編一起看看吧2023-10-10![webpack打包html里面img后src為“[object Module]”問題](http://img.jbzj.com/images/xgimg/bcimg1.png)
webpack打包html里面img后src為“[object Module]”問題
這篇文章主要介紹了webpack打包html里面img后src為“[object Module]”問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
利用webpack理解CommonJS和ES Modules的差異區(qū)別
這篇文章主要介紹了利用webpack理解CommonJS和ES Modules的差異區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
今天小編就為大家分享一篇關(guān)于js中call()和apply()改變指針問題的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
幾個常用的JavaScript字符串處理函數(shù) - split()、join()、substring()和indexOf(
幾個常用的JavaScript字符串處理函數(shù) split()、join()、substring()和indexOf()2009-06-06
Bootstrap Table實現(xiàn)定時刷新數(shù)據(jù)的方法
這篇文章主要介紹了Bootstrap Table實現(xiàn)定時刷新數(shù)據(jù)的方法，在這里小編比較推薦使用第二種方法，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了electron 如何將任意資源打包的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了深入學習JavaScript執(zhí)行上下文,文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下，希望對你的學習有所幫助2022-08-08
DOM（文檔對象模型）是一種用于表示和操作HTML和XML文檔的標準，在JavaScript中，可以使用DOM?API來對DOM進行操作，下面就來看看常見的操作都有哪些吧2023-08-08
Javascript中的this,bind和that使用實例
這篇文章主要介紹了Javascript中的this,bind和that使用實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12