方法呼叫unknown 鏈式呼叫與proxy

2021-10-11 23:21:39 字數 1582 閱讀 9013

鏈式呼叫雖然快樂,可每個方法後面的return this略顯繁瑣與醜陋,括號與引號也未免太多。

例如下面這個簡單的logger

new logger()

.addlabel("warn", "l4", "登入", "遊客", "error")

.addcontent("失敗")

.addcontent("密碼不對")

.end();

你可能已經對這樣的封裝習以為常了,但其實他還能這樣寫!

log.warn.l4.label("登入", "遊客").log("失敗").error.密碼不對;
我覺得後者有一種簡潔美

具體實現如下

class logger 

addcontent(content: unknown)

end()

}function getlog() else if (/** 直接新增標籤 */ typeof property === "string" && ["warn", "error"].includes(property)) else if (/** 可以呼叫的方法 */ typeof property === "string" && ["log", "label"].includes(property)) else

return self;

},const previousproperty = propertylink[propertylink.length - 1];

if (previousproperty === "label") else if (previousproperty === "log")

return self;

},}) as any) as log;

return self;

}const log = new proxy(getlog(), ,

});type log = ;

log.error.l9.錯了呀;

log.error.l9.warn.錯了呀;

log.error.l4.那天夕陽下的奔跑是我逝去的青春;

log.warn.l4.log("有毒?").end;

log.warn.l4

.label("登入")

.label("遊客")

.log("失敗").end;

log.warn.l4.label("登入", "遊客").log("失敗").error.密碼不對;

new logger()

.addlabel("warn", "l4", "登入", "遊客", "error")

.addcontent("失敗")

.addcontent("密碼不對")

執行結果

方法的鏈式呼叫 MethodChaining

鏈式呼叫出現在一些類庫中,比較典型的就是jquery的鏈式api header map function get sort methodchaining這個術語最早出現於martin fowler大大的博文 通常,可以在乙個方法內通過返 用上下文進行鏈式呼叫 var obj 方法二 f2 funct...

jQuery鏈式呼叫

鏈式 input type button eq 0 click function end eq 1 click function end eq 2 toggle function function 找出type型別為button的input元素 找到第乙個按鈕,並繫結click事件處理函式 返回所有...

JQ鏈式呼叫

1.鏈式呼叫 形式 box css width 200px css height 200px css background color green 2.對屬性進行操作可以使用json形式 box css 3.事件中的this指向 jquery中提供了乙個方法,可以將js物件轉換為jquery物件 語...