响应式/JavaScript 框架的 Tritium 函数设计答案

【问题标题】：Tritium Function Design for Responsive/JavaScript Frameworks响应式/JavaScript 框架的 Tritium 函数设计
【发布时间】：2013-06-20 05:20:11
【问题描述】：

我正在使用 Moovweb/Tritium 使用 Zurb Foundation 框架使常规桌面站点具有响应性。

作为其中的一部分，我想创建辅助函数来启用 Foundation 小部件，例如 Moovweb 中的 Uranium integrations。但是一些 Foundation 组件，例如 top bar 具有复杂的布局，需要比单个函数调用中看起来合理的更多配置。

例如，启用顶部栏需要类似以下结构：

# Use the foundation topbar
insert_top("nav", class: "top-bar") {

  # Create the title area
  insert("ul", class: "title-area") {
    inject("<li class='name'><h1><a href='/'>Website Name</a></h1></li>")
    inject("<li class='toggle-topbar menu-icon'><a href='#'><span>Menu</span></a></li>")
  }

  # Grab the header links and put them in the top bar
  insert("section", class: "top-bar-section") {
    insert("ul", class: "left") {

      # Move the original header links here
      move_here("//span[@class='pagetop']//a"){
        wrap("li")
      }
    }
  }
}

将其抽象为可重用的氚函数的正确方法是什么，最大限度地减少样板代码但又允许灵活性？

【问题讨论】：

标签： zurb-foundation moovweb tritium

【解决方案1】：

在我的用例中，我通过将布局分解为相互嵌套的相关函数来处理这个问题。于是上面的原代码就变成了：

# enable the foundation top bar
zurb_topbar() {    
  zurb_topbar_title("Website Name", "Menu", "menu-icon")
  zurb_topbar_left() {
    move_here("//span[@class='pagetop']//a"){
      wrap("li")
    }        
  }
}

其中函数定义为：

@func XMLNode.zurb_topbar() {   
    insert_top("nav", class: "top-bar") {
      yield()
    }
}

@func XMLNode.zurb_topbar_title(Text %name, Text %menu_btn_name, Text %menu_icon) {
    insert("ul", class: "title-area") {
      inject("<li class='name'><h1><a href='/'>" +%name +"</a></h1></li>")
      inject("<li class='toggle-topbar "+%menu_icon+"'><a href='#'><span>"+%menu_btn_name+"</span></a></li>")
    }
}

@func XMLNode.zurb_topbar_left() {
  insert("section", class: "top-bar-section") {
    insert("ul", class: "left") {
     yield()
    }
  }
}

您可以想象一个zurb_topbar_right 函数，它可以选择性地用于定义顶部栏的右侧部分。

注意zurb_topbar_title<LI>s 的href 和结构是硬编码的，因为您通常不太可能希望将href 指向除root 之外的任何地方。相反，您可能想要自定义的部分是顶部栏的标题、菜单按钮的标题以及菜单栏图标的存在。

而对于zurb_topbar_left，<LI> 的内容可能会由程序员填充，因此是产量。

权衡似乎是自动强制以正确的方式使用正确的功能组合变得更加棘手，即

你必须同时使用zurb_topbar 和zurb_topbar_title
但只有zurb_topbar_left 或zurb_topbar_right 之一
zurb_topbar 必须包含zurb_topbar_left
等等等等

【讨论】：