js DSL流暢介面(使用鏈式呼叫)例項程式碼

antzone發表於2017-04-03
JS

認真研究了一會DSL，發現了這麼幾件有趣的事，js用得最多的一個東西怕是鏈式呼叫 (即Method Chaining)。 

有意思的是Martin Flower指出:

[JavaScript] 純文字檢視 複製程式碼
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.

很多人將鏈式呼叫等同於流暢介面。然而鏈式呼叫是流暢介面的一種常用方法，真實的流暢介面不止這麼一點點。

DSL 流暢介面:

流暢介面的初衷是構建可讀的API，畢竟程式碼是寫給人看的。

類似的，簡單的看一下早先我們是通過方法級聯來操作DOM。

[JavaScript] 純文字檢視 複製程式碼
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寫的話，便是這樣子:

[JavaScript] 純文字檢視 複製程式碼
$('<span>').append("CLICK ME");

於是我們便可以建立一個簡單的示例來展示這個最簡單的DSL:

[JavaScript] 純文字檢視 複製程式碼
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();

然而這看上去像是表示式生成器。

DSL 表示式生成器:

表示式生成器物件提供一組連貫介面，之後將連貫介面呼叫轉換為對底層命令-查詢API的呼叫。

這樣的API，我們可以在一些關於資料庫的API中看到:

[JavaScript] 純文字檢視 複製程式碼
var query =SQL('select name, desc from widgets')
    .WHERE('price < ', $(params.max_price), AND,'clearance = ', $(params.clearance))
    .ORDERBY('name asc');

鏈式呼叫有一個問題就是收尾，同上的程式碼裡面沒有收尾，這讓人很迷惑。加上一個query和end似乎是一個不錯的結果。

其他:

方法級聯

表示如下:

[JavaScript] 純文字檢視 複製程式碼
a.b();
a.c();

相關文章