KAMS

kams前端代码规范

2016-12-02  本文已影响32人  cobantou

1.由于各种原因,前端代码规范我是不准备写的,原因之一是我不准备以一个前端的要求去限制大家。但是,我还是看到了一些不好的代码,所以还是稍微啰嗦几句吧。
2.由于大家的代码并不是太多,所以问题暴露的不全,此规范会根据暴漏的问题增加而逐渐增加。毕竟规范是用来矫正一些不一致的情况的。

css

  1. 由于前端采用了Semantic库作为样式基准,所以大部分的样式是不用写的,如果你需要写css,请把css写在<style></style>里面,如果样式太多,应该抽出来一个css文件,并放在css/pages文件目录下。
  2. 不允许直接在html元素上写行内css,如<div style="color:red"></div>,css必须定义在class上面。
  3. 谨慎使用!important,除非你知道在做什么;important会提高css的权重,但是如果把important定义在一些比较通用的class上面,将是一场灾难。

js & html

  1. js钩子
    最好以class名为js-开头作为js钩子,如:<div class="js-showPersonList">
    也可以使用id作为js钩子;
    不允许用不以js-开头的class为js钩子,如:<div class="red">,然后这样绑定事件$(".red").on("click",function(){...}),这个代码是不ok的。

  2. 注释
    应该在一个参数较多的函数上写好注释,如:

/**
 * 渲染人员列表
 * @param {Object} data 人员数据
 * @param {String} name 标题名
 * @param {Array} list 选项数组
 */
function renderPersonList(data,name,list){
    ...
}

其他

要求不多,还是希望大家多看看我写的另外几篇文档,关于表单、异步、弹窗、表格等都有一些套路在那里,直接用就行了。

上一篇下一篇

猜你喜欢

热点阅读