JavaScript DSL 流暢接口(使用鏈式調(diào)用)實例

更新時間：2015年03月15日 12:45:05 投稿：junjie

這篇文章主要介紹了JavaScript DSL 流暢接口(使用鏈式調(diào)用)實例,本文講解了DSL 流暢接口、DSL 表達式生成器等內(nèi)容,需要的朋友可以參考下

認真研究了一會DSL，發(fā)現(xiàn)了這么幾件有趣的事，JavaScript用得最多的一個東西怕是鏈式調(diào)用 (方法鏈，即Method Chaining)。有意思的是Martin Flower指出:

 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.

很多人將鏈式調(diào)用等同于流暢接口。然而鏈式調(diào)用是流暢接口的一種常用方法，真實的流暢接口不止這么一點點。

DSL 流暢接口

流暢接口的初衷是構(gòu)建可讀的API，畢竟代碼是寫給人看的。

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

復制代碼代碼如下:

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寫的話，便是這樣子

復制代碼代碼如下:

$('<span>').append("CLICK ME");

等等

于是回我們便可以創(chuàng)建一個簡單的示例來展示這個最簡單的DSL

復制代碼代碼如下:

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 表達式生成器

表達式生成器對象提供一組連貫接口，之后將連貫接口調(diào)用轉(zhuǎn)換為對底層命令-查詢API的調(diào)用。

這樣的API，我們可以在一些關(guān)于數(shù)據(jù)庫的API中看到:

復制代碼代碼如下:

var query =

  SQL('select name, desc from widgets')

   .WHERE('price < ', $(params.max_price), AND,

          'clearance = ', $(params.clearance))

   .ORDERBY('name asc');

鏈式調(diào)用有一個問題就是收尾，同上的代碼里面我們沒有收尾，這讓人很迷惑。。加上一個query和end似乎是一個不錯的結(jié)果。

其他

方法級聯(lián)
表示如下:

復制代碼代碼如下: