专为 Rails 设计的前端模块化框架

“道” 对于项目的文件结构有自己的约定,这些约定主要包括 javascripts、stylesheets、components 和 views 四个部分。

Javascripts

交互脚本的典型文件结构是这样的:

app/
  assets/
    javascripts/
      channels/
      components/ # 把全局组件放在这个文件夹
        menu_popover.coffee
        index.coffee
      todos/
        components/ # 跟 todo 资源相关的组件放到这个文件夹
          item.coffee
          index.coffee
        index_page.coffee # 跟页面绑定的交互逻辑,页面组件化之后大多数时候不需要这类文件
        edit_page.coffee
      application.coffee # 应用入口  

Stylesheets

样式文件的典型文件结构是这样的:

app/
  assets/
    stylesheets/
      components/ # 把全局组件放在这个文件夹
        menu_popover.scss
        index.scss
      layouts/
      todos/
        components/ # 跟 todo 资源相关的组件放到这个文件夹
          item.scss
          index.scss
      _globals.scss
      application.scss # 应用入口  

Components

“道” 增加了 app/components 文件夹用来存放组件类:

app/
  components/
    todos/ # 跟 todo 资源相关的组件类放在这里
      item_component.rb
    menu_popover_component.rb # 全局组件类放到根目录
    application_component.rb/  

Views

跟组件类对应的 partial 模版放在 app/views/components 文件夹:

app/
  views/
    components/
      todos/ # 跟 todo 资源相关的组件模版放到这里
        _item.html.erb
      _menu_popover.html.erb # 全局组件的模版放到跟目录  

多平台项目

需要支持多平台(比如需要同时支持桌面版和移动版)的项目文件结构要更复杂一些,我们需要将前端资源分成两个独立的 assets package:

app/
  assets/
    javascripts/
      desktop/
        channels/
        components/
        todos/
        application.coffee
      mobile/
        channels/
        components/
        todos/
        application.coffee
      shared/ # 跨平台共享的交互脚本放在这里
    stylesheets/
      desktop/
        components/
        layouts/
        todos/
        _globals.scss
        application.scss
      mobile/
        components/
        layouts/
        todos/
        _globals.scss
        application.scss
      shared/ # 跨平台共享的样式放在这里
  views/
    components/
      todos/
        _item.html.erb
        _item.html+mobile.erb
    layouts/
      application.html.erb
      application.html+mobile.erb