前端代码规范

前端文件及目录命名规范

前端文件及目录命名规范包括所有html、vm、css、less、js、图片等文件、目录的命名上

所有前端的文件名，包括.html、.vm、.css、.less、.js、图片、目录的命名必须以 全小写 ，名称不宜过长、单词的分割用（-）减号分割，（Train case）

HTML代码规范

HTML代码规范适用于所有HTML页面、Velocity模板页面的内容、及js或后台逻辑拼装的HTML标签字符串。

• 文件名规范受上述前端文件及目录命名规范约束。

• HTML代码、包括标签名、属性、参数、全部使用小写。

• HTML元素的id、class采用小写命名，单词用（-）减号分割，如id="main-panel"，严禁使用驼峰式命名。

• form表单元素的name属性，仅在需要与后台字段匹配时方可使用驼峰式命名。

• 超链接标签的点击事件禁止使用href="javascript:method"的写法。

• HTML的参数统一使用双引号“”声明。

• 禁止在html上写复杂的style，应遵循代码与样式分离的原则。

• 页面须定义标准的title

• 尽可能使用语意化的html元素，如h1~h6、strong、small、段落p、无序列表ul、有序列表ol

Javascript代码规范

Javascript代码规范适用于所有js文件及页面内嵌js代码。

• 文件名规范受上述前端文件及目录命名规范约束。

• javascript函数、变量采用小驼峰命名法，首字母小写。如doClick()

• 类、常量类采用大驼峰命名法，首字母大写，如Apple。

• 常亮采用全大写，用下划线“_”作为单词分割。

• 代码必须分号结束，包括json定义，内部方法定义等。

• js代码拼接HTML代码时，最外层用单引号，HTML代码的参数保持使用双引号。如var html='<input type="text">';

• 对象私有成员、私有方法采用下划线（_）作为前缀，如_id

• 尽可能不直接声明全局变量，需要使用全局变量时也应该声明一个专用的全局对象存放变量如var Global={FLAG:true,FLAG_2:false};

常用JS命名

• 文件名规范受上述前端文件及目录命名规范约束。

• 迭代变量：i、j、k；

• 屏幕自适应函数名：resize()；

• 指针、循环体中的游标：idx、index；

• 布尔标识值：flag；

• This指针代替变量：self；

• 函数一般命名习惯：do+动词，如doClick，doSave；

CSS代码规范

CSS代码规范适用于所有CSS文件及HTML内联css代码

• 文件名规范受上述前端文件及目录命名规范约束。

• 样式命名采用全小写命名，单词使用减号“-”分隔。

• javascript引入规范报表、文字、地图、网格颜色规范

• Z-index规范 0~2000是开发使用范围 0~10000属于组件使用范围

• 充分考虑重用和通用性，避免一种样式一个css样式表。

Velocity代码规范

Velocity代码规范使用与所有.vm文件，包括页面、模板、片段、宏

• 文件名规范受上述前端文件及目录命名规范约束。补充片段的命名需要以下划线“_”作为前缀，如 _list.vm

• 宏的命名采用全大写，单词用下划线“_”分割。

• 宏的文件命名统一采用macro.vm文件名，并放在模块的根目录上，如/templates/应用名/macro.vm。

• 宏的命名尽量使用简单的单词。

• 常用vm文件名

  • list.vm 列表
  • edit.vm,view.vm 表单、查看页面
  • index.vm,home.vm 主页
  • dashboard.vm 仪表盘
  • report.vm,chart.vm 报表
  • query.vm,search.vm 查询