阅读 152

编码规范

通用规范

  • 尽量三层结构分离。移动端可以适当内联,但内联资源2KB以内。

  • HTML标签、标签属性、样式名及规则建议小写。HTML的 id 属性使用驼峰式命名。

    <ul id="menuList" class="menu-list">
      <li class="menu-list-item">1</li>
      <li class="menu-list-item">2</li>
    </ul>
    复制代码
  • 多注释,尽量在文件头部添加verilog那样的多行文件注释。此外,更推荐使用 自文档化风格的代码 进行开发,让代码本身具有含义从而代替注释。

    // 常规代码块
    let width = (value - 0.5) * 16;
    // 自文档化风格代码。内容更多,但便于维护。
    let width = emToPixels(value);
    function emToPixels(ems) {
      return (ems - 0.5) * 16;
    }
    复制代码

HTML规范

  • Doctype统一使用HTML5的 ,既简洁又向后兼容。
  • head里面必须定义title、keyword、description,保证基本的SEO页面关键字和内容描述。移动端页面head要添加viewport控制页面不缩放。
  • 引入CSS或JS文件时,省略它们的type属性,不需要 type="text/css"之类的
  • 引号问题:所有标签属性值使用双引号,便于区分标签的属性名和属性值。(JS里面字符串值推荐单引号)(注意JSON里的字符串,无论键值都必须双引号)
  • 省略非必需的属性值,如输入框里的 readonly、disabled、required。例如<input type="text" readonly="readonly" 写成 <input type="text" readonly> 就行了。
  • 自闭标签如link、img等,可以不加/关闭标签
  • 使用label的for属性,这样点击label的时候就会选中到与之对应的input或者textarea上。例如<label for="blue">蓝色</label> <input type="radio" id="blue" name="color">
  • 在每个大的模块的开始和结束的地方都添加注释标记

CSS规范

  • 引用规范:使用link的方式调用外部样式文件,可以复用并能利用缓存提高加载速度。
  • 命名约定:
    • 一般由小写单词和中画线组成,按功能可以加上相应的统一前缀 如ui-xxx
    • 不以模块表现样式命名,要根据内容命名,避免使用left、top、red之类的单词
    • HTML标签中的id属性一般用于JS查询DOM,CSS中尽量避免使用id选择器
  • 简写方式:url中引用资源没必要引号括起来。 十六进制颜色值使用小写
  • 属性书写顺序:
    1. 定位属性:position display float left top right bottom overflow clear z-index
    2. 自身属性:width height margin padding border background
    3. 文字样式:font-family font-size font-style font-weight font-varient color
    4. 文本属性:text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
    5. css3中新增属性:content box-shadow border-radius transform……
  • 高效实现规范:标签名与class组合的选择器会降低CSS解析速度。 不同元素之间属性存在继承关系时,使用分拆方式避免属性重复定义。

ECMAScript5 常用规范

  • 添加适当的空格和空行
  • 变量命名:标准变量采用驼峰式命名;常量使用全大写命名,并用下划线连接;构造函数首字母大写;jQuery对象推荐以""开头命名,如`letbody=$('body');`
  • 条件判断:尽量不要直接使用undefined进行变量判断,使用typeof和字符串‘undefined’对变量类型进行判断。
  • 不要在条件语句或循环语句中声明函数
  • 其他:不要给内置对象的原型(如Array,Date)上添加方法;同一作用域下不要声明同名变量……

ECMAScript6+ 参考规范

  • 字符串拼接使用字符串模板完成:let name='Morty'; let str='<h2>Hi, ${name}!<h2>'
  • 解构赋值尽量使用一层解构
  • 数组拷贝推荐使用简洁高效的··· 。例如const items=[1,2,3]; let itemsCopy=[...items]
  • 数组循环遍历使用for···of,非必需情况不推荐forEach、map、简单循环
  • 推荐使用Promise,避免使用第三方库或直接回调。原生的异步处理性能更好且符合规范
  • 合理使用Generator,推荐使用async/await,更加简洁
  • 如果不是必须,避免使用迭代器iterator
关注下面的标签,发现更多相似文章
评论