规范
无规矩不成方圆
资源文件
本文档的内容是关于前端文件的置放、命名等方面的规则/规范。
目录
命名
页面指定文件的引用集合所在的文件要以那些文件所在的目录命名并置放在相应的 stylesheets 或 javascripts 文件夹的 pages 文件夹中，Sass 文件要在最前面加上下划线 _。
页面指定文件用页面 controller 的名字。假如 controller 文件叫 users_controller.rb，那么相应的 page-specific 文件分别为 _users.scss 和 users.coffee。
编写
同一个 controller 所管辖的页面的前端代码都写在相同的 .scss 或 .coffee page-specific 文件中。若 controller 文件叫 users_controller.rb，则 .scss 文件的内容为：
// pages/front/_users.scss 文件中
body[data-page="users-index"],
body[data-page="users-show"] {
...
}
body[data-page="users-show"] {
...
}为了减少上线后的资源请求，前台、后台等页面的 page-specific 的 CSS 及 JavaScript 文件分别通过一个特定文件集中引用，如：
// pages/front.scss 文件中
@import "./front/_users";
@import "./front/courses";结构
项目文件在 app 目录下，第三方的库、插件等在 vendor 目录下；app 目录下的文件结构拿最为复杂的 javascripts 目录举例，stylesheets、images 目录同理。
.
├─┬─ app
│ └─┬─ assets
│ ├─┬─ images
│ │ └─── ...
│ │
│ ├─┬─ javascripts
│ │ │
│ │ ├─┬─ components === 自定义组件的定义和事件绑定
│ │ │ └─── ...
│ │ │
│ │ ├─┬─ config === 项目中所用到的一些配置
│ │ │ ├─┬─ locales --- 区域/语言
│ │ │ │ └─── ...
│ │ │ ├─── apis.coffee --- Web APIs
│ │ │ ├─── assets.coffee.erb --- 通用资源（图片等）
│ │ │ ├─── routes.coffee --- 页面 URL
│ │ │ └─── templates.coffee --- HTML 模板的引用路径
│ │ │
│ │ ├─┬─ initializers === 全局性的非自定义组件的初始化
│ │ │ └─── ...
│ │ │
│ │ ├─┬─ pages === 所有页面指定文件
│ │ │ ├─┬─ {page-specific} --- layout 的页面指定文件
│ │ │ │ └─── ...
│ │ │ ├─── {page-specific}.coffee --- layout 的页面指定文件的引用集合
│ │ │ └─── ...
│ │ │
│ │ ├─┬─ plugins === 自己开发人员所编写的插件
│ │ │ └─── ...
│ │ │
│ │ ├─┬─ project === 项目通用文件
│ │ │ ├─┬─ extensions --- 项目相关的对 YouYu 对象扩展
│ │ │ │ └─── ...
│ │ │ └─── rails.coffee --- 覆盖 jquery_ujs 的一些设置
│ │ │
│ │ ├─┬─ templates === HTML 模板
│ │ │ └─── ...
│ │ │
│ │ ├─┬─ themes === 与某个特定主题相关联的操作
│ │ │ └─── ...
│ │ │
│ │ ├─┬─ youyu === YouYu 对象（底层库）
│ │ │ ├─┬─ templates --- YouYu 对象内部构建用 HTML 模板
│ │ │ │ └─── ...
│ │ │ ├─── compatibility.coffee --- 处理浏览器和第三方插件兼容性
│ │ │ ├─── component.coffee --- 添加自定义组件
│ │ │ └─── core.coffee.erb --- 一些工具方法
│ │ │
│ │ ├─── application.coffee --- 引用了必须的全局文件
│ │ ├─── components.coffee --- 引用 components 文件夹下的文件
│ │ ├─── config.coffee --- 引用 config 文件夹下的文件
│ │ ├─── initializers.coffee --- 引用 initializers 文件夹下的文件
│ │ ├─── main.coffee --- 引用了非营销页面所用到的文件
│ │ ├─── project.coffee --- 引用 project 文件夹下的文件
│ │ ├─── youyu.coffee --- 引用 youyu 文件夹下的文件
│ │ └─── {layout-specific}.coffee --- 引用了指定 layout 所需文件
│ │
│ └─┬─ stylesheets
│ └─── ...
└─┬─ vendor
└─── ...在添加代码时注意代码所起到的「职责」，不要加错地方！尤其是在想往 project 相关文件中添加代码之前，考虑下是否应该放到 components 或者 initializers 中。