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代码的含义：

• 遍历
  中的每一个
  • 
    （这看起来是个联系人列表）
    • 对于里面的
      • 绑定click事件，操作是显示/隐藏class="more"兄弟节点
        （这是估计联系人姓名，点击后切换详细信息的显示/隐藏）
    • 对于里面的
      • 绑定click事件，操作是把class="item"父节点删除
        （这应该是用来删除联系人的）
    • 对于里面的
      • 隐藏这个div
        （默认隐藏详细信息？）

      it知识库：jQuery is DSL (Part 2 - jQuery)，转载需保留来源！

      郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。