美文网首页
前端书写规范

前端书写规范

作者: 予以暖杀风 | 来源:发表于2017-05-24 16:12 被阅读0次

    ==注重结构、表现、行为分离==

    1. html结构

    1. 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset="utf-8" /> 
    2.不允许写行内样式与内联样式表;
    3.css引入统一放入</head>前;
    4.javascript引入建议统一放入</body>前;
    5.页面公用样式统一放入reset.css中,分别引入;独用样式,按需引入。
    6.代码缩进,使用Tab键实现层次分明的缩进;
    7.标签必须小写,合理关闭。
    8.所有的标签必须合理嵌套,注重语义化。
    9.自定义属性推荐使用 data-;布尔类型的属性,建议不添加属性值。
    9.属性名必须使用小写字母,用双引号包围。
    10.表单:必须为含有描述性表单元素(input, textarea)添加label。使用 button 元素时必须指明 type 属性值。尽量不要使用按钮类元素的 name 属性。
    11.图片:禁止 img 的 src 取值为空。避免为 img 添加不必要的 title 属性。为重要图片添加 alt 属性。 添加 width 和 height 属性,以避免页面抖动。
    

    2. css表现

    1.(禁止)将样式写为单行
    2. 省略“0”值后面的单位。不要在0值后面使用单位,除非有值。
    3. 不要在CSS中使用expression
    4.(禁止)使用css原生@import
    5. 不要在CSS中使用!important
    6.(不推荐)ie使用filter,( 禁止)使用expression
    7. 使用after或overflow的方式清浮动
    8. 去掉小数点 0
    9.每个样式属性后加 ";"
    10.避免浏览器hacks
    11Class命名中(禁止)出现大写字母,(必须)采用“- ”对class中的字母分隔
    12.ID和class(类)命名应反应元素目的和用途的名称,或其他通用名称。代替表象和晦涩难懂的名称。
    13.尽可能使用缩写属性,如padding,margin,background,font。
    14.URI值(url())不要使用引号。
    15.删除空属性及注释后的无效属性。
    16.书写顺序:显示属性,元素位置,元素属性,元素内容属性
    

    3. JavaScript

    1.(禁止)使用eval,有注入风险,尤其是ajax返回数据,效率低,
    2. 除了三目运算,if,else等(禁止)简写
    3. 当需要缓存this时必须使用变量进行缓存
    4. 左花括号置于行末,右花括号置于行首。
    5. 声明变量,必须var。
    4、类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;
    5、函数命名: 首字母小写驼峰式命名. 如iTaoLun();
    6、命名语义化, 尽可能利用英文单词或其缩写;
    7、尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval_r() & innerText;
    8、后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
    9、代码结构明了, 加适量注释. 提高函数重用率;
    10、注重与html分离, 减小reflow, 注重性能.
    

    相关文章

      网友评论

          本文标题:前端书写规范

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