首頁  >  文章  >  web前端  >  JavaScript DSL 流暢介面(使用鍊式呼叫)實例_javascript技巧

JavaScript DSL 流暢介面(使用鍊式呼叫)實例_javascript技巧

WBOY
WBOY原創
2016-05-16 16:09:241466瀏覽

認真研究了一會DSL,發現了幾件有趣的事,JavaScript用得最多的一個東西怕是鍊式呼叫 (方法鏈,即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 truefaceency is much true thatfaces,
很多人將鍊式呼叫等同於流暢介面。然而鍊式呼叫是流暢介面的常用方法,真實的流暢介面不只這麼一點點。

DSL 流暢介面

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

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


複製程式碼 程式碼如下:
var btn = document.createElement("BUTTON");        // Create a


複製程式碼 程式碼如下:
$('').append("CLICK ME");


等等

於是回我們便可以創建一個簡單的範例來展示這個最簡單的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 表達式產生器

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

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


複製程式碼 程式碼如下:
var query =
  SQL('select name, desc from widgets')
   .WHERE('price           'clearance = ', $(params.clearance))
   .ORDERBY('name asc');


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

其他

方法級聯

表示如下:



複製程式碼 程式碼如下:
a.b();
a.c();


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn