你的位置:首页 > Java教程

[Java教程]前端编码规范文档


前端编码规范文档

Html编码规范

HTML书写规范

1、  容器布局:遵循bootstrap的标签套用原则,不应有多余标签。

 

所有内容都应放在row下的col里。

2、  标签页:在Metronic的布局标准下,标签页的容器应为row和col。

 

代码详见Metronic模版。

3、  页面html行数较多时要添加region标签。Ctrl+k,s

 

4、  Layout布局容器应在.container 里

 

HTML元素命名规范

标签

命名

<input type=”text” />

txtName

<select></select>

sltProjectState

<texarta></texarea>

textProductDesc

<label></lable>

lbPrice

<div></div>

divProjectFile

<span></span>

spSKUPro

扩展标签

命名

标签页

tabUserManage

模态框

modalAddUser

遮罩层

dialogLoading

 

ViewModel编码规范

  1. viewModel编写需包含以下几个声明,属性、私有方法、公共方法、事件、回调方法、初始化。
  2. 属性已self.****来声明。
  3. 私有方法直接用function声明
  4. UserControl回调方法用 fn_控件名称_方法名称_callback来命名。
  5. 事件用event_事件名称来命名。
  6. 提交数据、获取数据,与后台交互用fn_方法名称来命名。
  7. Init事件用于控件初始化内部逻辑,如加载数据等。
  8. 当一个viewmodel声明方法过多时需要考虑内部是否有抽取成UserControl的必要。

 

UserControl开发规范

  1. userControl编码规则详见viewmodel,他们的声明方式类似,传入参数上只有prarms。
  2. userControl最下面一行需要调用控件注册,并指定模版路径。

 

通用js方法规范

  1. 需要标识作者以及实现功能。在通过前端方法评估时在加入通用库。
  2. 2.         通用js方法需要适配宽放大模式(Loose augmentation

 

Knockout扩展规范

  1. 遵循官方文档扩展原则。
  2. 所有组件放在usercontrol这个文件夹内,ko-component是组件绑定初始化的注册脚本。
  3. 组件适用范围可以用组件名称区分。也可以用项目模块名来区分。
  4. 所有页面的viewModel以ControllerActionViewModel来命名。

项目文件结构

文件位置规范

 

Viewmodel跟view一样。

Business代码规范

1、  Bussiness调用服务接口,简单逻辑处理

2、  Bussiness下处理本地模型与服务模型转换(Translator)