這篇文章主要介紹了JavaScript DSL 流暢接口(使用鏈?zhǔn)秸{(diào)用)實例,本文講解了DSL 流暢接口、DSL 表達(dá)式生成器等內(nèi)容,需要的朋友可以參考下
認(rèn)真研究了一會DSL,發(fā)現(xiàn)了這么幾件有趣的事,JavaScript用得最多的一個東西怕是鏈?zhǔn)秸{(diào)用 (方法鏈,即Method Chaining)。 有意思的是Martin Flower指出:
復(fù)制代碼代碼如下:
I've also noticed a common misconception - many people seem to equate fluent interfaces with Method Chaining. Certainly chaining is a common technique to use with fluent interfaces, but true fluency is much more than that.
很多人將鏈?zhǔn)秸{(diào)用等同于流暢接口。然而鏈?zhǔn)秸{(diào)用是流暢接口的一種常用方法,真實的流暢接口不止這么一點(diǎn)點(diǎn)。
DSL 流暢接口
流暢接口的初衷是構(gòu)建可讀的API,畢竟代碼是寫給人看的。
類似的,簡單的看一下早先我們是通過方法級聯(lián)來操作DOM
復(fù)制代碼代碼如下:
var btn = document.createElement("BUTTON"); // Create a <button> element
var t = document.createTextNode("CLICK ME"); // Create a text node
btn.appendChild(t); // Append the text to <button>
document.body.appendChild(btn); // Append <button> to <body>
而用jQuery寫的話,便是這樣子 復(fù)制代碼代碼如下:
$('<span>').append("CLICK ME");
等等
于是回我們便可以創(chuàng)建一個簡單的示例來展示這個最簡單的DSL
復(fù)制代碼代碼如下:
Func = (function() {
this.add = function(){
console.log('1');
return this;
};
this.result = function(){
console.log('2');
return this;
};
return this;
});
var func = new Func();
func.add().result();
然而這看上去像是表達(dá)式生成器。
DSL 表達(dá)式生成器
表達(dá)式生成器對象提供一組連貫接口,之后將連貫接口調(diào)用轉(zhuǎn)換為對底層命令-查詢API的調(diào)用。
這樣的API,我們可以在一些關(guān)于數(shù)據(jù)庫的API中看到:
復(fù)制代碼代碼如下:
var query =
SQL('select name, desc from widgets')
.WHERE('price < ', $(params.max_price), AND,
'clearance = ', $(params.clearance))
.ORDERBY('name asc');
鏈?zhǔn)秸{(diào)用有一個問題就是收尾,同上的代碼里面我們沒有收尾,這讓人很迷惑。。加上一個query和end似乎是一個不錯的結(jié)果。
其他
方法級聯(lián)
表示如下:
復(fù)制代碼代碼如下:
a.b();
a.c();