资源:前端开发规范
命名规则
- 项目命名
全部采用小写方式, 以下划线分隔。
-
例:my_project_name
- 目录命名
全部采用小写方式, 以下划线分隔。有复数结构时,要采用复数命名法。
-
例:scripts, styles, images, data_models
- JS文件命名
全部采用小写方式, 以下划线分隔。
-
例:account_model.js
- CSS, SCSS文件命名
全部采用小写方式, 以下划线分隔。
-
例:retina_sprites.scss
- HTML文件命名
全部采用小写方式, 以下划线分隔。
-
例:error_report.html
- 函数
-
类
:每个单词首字母大写。 -
方法
:第一个单词首字母小写,其他首字母大写。
文档目录结构
|- my_project_name # 项目名
| |- src # 开发环境
| | |- html # 静态页面模板目录
| | |- bgimg # 背景图目录(假设有的话)
| | |- image # 前景图目录(假设有的话)
| | |- font # 字体目录(假设有的话)
| | |- scripts # 脚本目录
| | |- styles(Yo) # 样式目录
| | |- lib # 基础库
| | | |- core # 核心代码:reset
| | | |- element # 元素
| | | |- fragment # 公用碎片
| | | |- layout # 布局
| | | |- widget # 组件
| | |- usage # 项目具体实现
| | |- project # 某个子项目
| | |- core # 核心代码:桥接lib中的core,可以进行项目级扩展
| | |- fragment # 项目公用碎片
| | |- module # 模块
| | |- page # page桥接文件目录:src-list
| | |- export # page pack之后的文件目录
| |- prd # 生产环境
| |- bgimg # 背景图目录(假设有的话)
| |- image # 前景图目录(假设有的话)
| |- font # 字体目录(假设有的话)
| |- scripts # 脚本目录
| |- styles(Yo) # 样式目录
| |- project1 # 子项目
| | |- index.css
| | |- login.css
| | |- and etc...
| |- project2 # 子项目
| | |- index.css
| | |- login.css
| | |- and etc...
| |- and etc...