前端代码规范

hcl 2016-01-18

前端代码规范

前端文件及目录命名规范

前端文件及目录命名规范包括所有htmlvmcsslessjs、图片等文件、目录的命名上

所有前端的文件名,包括.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 查询

相关推荐

opspider / 0评论 2012-09-25