jQuery的Internal DSL形式

在上一篇文章里面，我們了解到了Internal DSL的具體形式，形如：

/* Method Chaining */
computer()
  .processor()
    .cores(2)
    .i386()
  .disk()
    .size(150)
  .disk()
    .size(75)
    .speed(7200)
    .sata()
  .end();

然后我們在看看一段典型的jQuery代碼：

$("ul#contacts li.item")
  .find("span.name")
    .click(function(e) { $(e.target).siblings(".more").toggle(); })
    .end()
  .find("input.delete")
    .click(function(e) { $(e.target).parents(".item").remove(); })
    .end()
  .find("div.more")
    .hide()
    .end();

從結構上來說，是不是跟上面那一段Internal DSL的例子很相似？就算我們不看對應的HTML，我們也能猜到這段jQuery代碼的含義：

• 遍歷
  中的每一個
  • 
    （這看起來是個聯(lián)系人列表）
    • 對于里面的
      • 綁定click事件，操作是顯示/隱藏class="more"兄弟節(jié)點
        （這是估計聯(lián)系人姓名，點擊后切換詳細信息的顯示/隱藏）
    • 對于里面的
      • 綁定click事件，操作是把class="item"父節(jié)點刪除
        （這應該是用來刪除聯(lián)系人的）
    • 對于里面的
      • 隱藏這個div
        （默認隱藏詳細信息？）

      it知識庫：jQuery is DSL (Part 2 - jQuery)，轉載需保留來源！

      鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。