美文网首页KAMS
kams前端代码规范

kams前端代码规范

作者: cobantou | 来源:发表于2016-12-02 21:40 被阅读32次

    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){
        ...
    }
    

    其他

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

    相关文章

      网友评论

        本文标题:kams前端代码规范

        本文链接:https://www.haomeiwen.com/subject/tqmqmttx.html