1.由于各种原因,前端代码规范我是不准备写的,原因之一是我不准备以一个前端的要求去限制大家。但是,我还是看到了一些不好的代码,所以还是稍微啰嗦几句吧。
2.由于大家的代码并不是太多,所以问题暴露的不全,此规范会根据暴漏的问题增加而逐渐增加。毕竟规范是用来矫正一些不一致的情况的。
css
- 由于前端采用了Semantic库作为样式基准,所以大部分的样式是不用写的,如果你需要写css,请把css写在<style></style>里面,如果样式太多,应该抽出来一个css文件,并放在
css/pages
文件目录下。 - 不允许直接在html元素上写行内css,如
<div style="color:red"></div>
,css必须定义在class上面。 - 谨慎使用
!important
,除非你知道在做什么;important会提高css的权重,但是如果把important定义在一些比较通用的class上面,将是一场灾难。
js & html
-
js钩子
最好以class名为js-
开头作为js钩子,如:<div class="js-showPersonList">
;
也可以使用id作为js钩子;
不允许用不以js-
开头的class为js钩子,如:<div class="red">
,然后这样绑定事件$(".red").on("click",function(){...})
,这个代码是不ok的。 -
注释
应该在一个参数较多的函数上写好注释,如:
/**
* 渲染人员列表
* @param {Object} data 人员数据
* @param {String} name 标题名
* @param {Array} list 选项数组
*/
function renderPersonList(data,name,list){
...
}
其他
要求不多,还是希望大家多看看我写的另外几篇文档,关于表单、异步、弹窗、表格等都有一些套路在那里,直接用就行了。
网友评论