DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript DSL 流暢接口(使用鏈式調用)實例
JavaScript DSL 流暢接口(使用鏈式調用)實例
編輯:關於JavaScript     

認真研究了一會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 true fluency is much more than that.

很多人將鏈式調用等同於流暢接口。然而鏈式調用是流暢接口的一種常用方法,真實的流暢接口不止這麼一點點。

DSL 流暢接口

流暢接口的初衷是構建可讀的API,畢竟代碼是寫給人看的。

類似的,簡單的看一下早先我們是通過方法級聯來操作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");

等等

於是回我們便可以創建一個簡單的示例來展示這個最簡單的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 < ', $(params.max_price), AND,
          'clearance = ', $(params.clearance))
   .ORDERBY('name asc');

鏈式調用有一個問題就是收尾,同上的代碼裡面我們沒有收尾,這讓人很迷惑。。加上一個query和end似乎是一個不錯的結果。

其他

方法級聯
表示如下:
復制代碼 代碼如下:
a.b();
a.c();

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved