JavaScript and TypeScript

代码风格

  1. 【id, class】id 、 class 使用连字符且小写
  2. 【CSS选择器】id 尽量不作为 css 选择器

// 一级DOM节点倾向于id作为选择器

  1. 【CSS预编译】应使用less等css预处理语言进行开发，使用嵌套方便描述层次关系、统一主题样式

    // 嵌套层次尽量不超过2

  2. 【空行】代码块、if、for后保留空行

  3. 【命名】标准变量使用驼峰法命名，jQuery对象以$为开头命名。

// jQuery对象以$开头命名

  1. 【条件判断】undefined使用typeof和’undefined’进行判断

// 注意不要滥用if()中隐式转换

  1. 前端防御性规范两条:

7.1 使用html模板时，要确定模板中绑定的变量数据安全
7.2 规范化错误处理（网络请求或文件读写异步请求）

  1. 关注点分离

纵向分离 横向分离

  • 反转分离
  1. 【缩进】换行的运算符应该缩进
  2. 【空行，类】类定义中，方法之间换行
  3. 【空行，语句集】不同行为或逻辑的语句集，使用空行隔开，更易阅读
  4. 【换行，字符串】+运算符换行缩进、数组方式、ES6模板字符串
  5. 【换行，jQuery】链式调用换行
  6. 【换行，三元运算符】
  7. 【换行，数组对象】{括号和}括号在不同行
  8. 【ts，属性分号】ts 中的 interface 和 class 等属性定义、 js 中的 class 属性定义，行尾要有分号
  9. 【命名，常量】常量：全部字母大写，单词间下划线分隔，如： HTML_ENTITY
  10. 【命名，枚举】枚举变量：Pascal，枚举的属性： 全部字母大写，单词间下划线分隔
  11. 【命名，命名空间】Camel
  12. 【命名，数字】变量、函数、方法、类等命名避免使用 1、2、3 等后缀命名
  13. 【命名，promise】建议：Promise对象 用 动宾短语的进行时 表达
  14. 【注释，多行】避免使用 /…/ 这样的多行注释。有多行注释内容时，使用多个单行注释

// 个人觉得不要超过2行

  1. 【注释：文档化注释】
  • 文档注释前必须空一行
  • 类型定义 ```javascript

/**

  • 文档化注释 */ let foo = ‘bar’; ```
  1. 【注释，文件】文件顶部必须包含文件注释，用 @file 标识文件说明
  2. 【注释，类，继承】建议：使用 @extends 标记类的继承信息

  3. 【注释，特殊标记】 TODO FIXME HACK XXX

    语言特性

  4. 【分支，排序】建议：按执行频率排列分支的顺序

  5. 【循环，函数提取】[建议] 不要在循环体中包含函数表达式，事先将函数提取到循环体外

循环体中的函数表达式，运行过程中会生成循环次数个函数对象

  1. 【循环，缓存】对循环内多次使用的不变值，在循环外用变量缓存
  2. 【类型转换，string】转换成 string 时，使用 String()。不用toString()和隐式转换

// String()可以转换null和undefined

  1. 【类型转换，布尔】转换成 boolean 时，使用 !!
  2. 【类型转换，小数】number 去除小数点，使用 Math.floor / Math.round / Math.ceil，不使用 parseInt
  3. 【对象，访问】属性访问时，尽量使用 .

  4. 【对象，遍历】for in 遍历对象时, 使用 hasOwnProperty 过滤掉原型中的属性

    1. // 使用Object.keys
    2. for (let key of Object.keys(Obj)) {}

  5. 【数组，清空】建议：清空数组使用 .length = 0

  6. 【闭包，内存回收】建议： 在适当的时候将闭包内大对象置为 null
  7. 【IIFE, LIFT效应】在引用函数外部变量时，函数执行时外部变量的值由运行时决定而非定义时，通过额外加上一层闭包函数，将需要的外部变量作为参数传递来解除变量的绑定关系
  8. 【空函数】对于性能有高要求的场合，建议存在一个空函数的常量，供多处使用共享 ```javascript let EMPTY_FUNCTION = function () {};

function MyClass() { }

MyClass.prototype.abstractMethod = EMPTY_FUNCTION; MyClass.prototype.hooks.before = EMPTY_FUNCTION; MyClass.prototype.hooks.after = EMPTY_FUNCTION;

  2. 39. 【面向对象】类的继承方案，实现时需要修正 constructor
  4. // 不直接定义prototype
  6. 40. 【自定义事件】[强制] 自定义事件的 事件名 必须全小写
  7. 40. 【动态特性】避免使用直接 eval 函数。
  8. 40. 【动态执行代码】使用 new Function 执行动态代码
  10. ```javascript
  11. let handler = new Function('x', 'y', 'return x + y;');
  12. let result = handler($('#x').val(), $('#y').val());
  1. 【delete】减少 delete 的使用，try/catch块处理 delete 可能产生的异常
  2. 【对象，属性】建议：避免修改外部传入的对象
  • 使用不与外部产生任何交互的对象来维护外部传入的对象的状态
  • 深拷贝
  1. 【DOM，类型】建议：从 DOM 中取出的值通常为 string 类型，接收number类型提前转换
  2. 【DOM，子元素】获取元素的直接子元素时使用 children 。避免使用childNodes

  3. 【样式，获取】获取元素实际样式信息时，应使用 getComputedStyle 或 currentStyle

    浏览器特性

  4. 【DOM，reflow】操作DOM减少回流

  • DOM元素的添加、修改（内容）、删除
  • 应用新的样式或者修改任何影响元素布局的属性
  • Resize浏览器窗口、滚动页面
  • 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))
  1. 【DOM，操作】第2项性能更好
  • 在循环体中 createElement 并 append 到父元素中
  • 在循环体中拼接 HTML 字符串，循环结束后写父元素的 innerHTML
  1. 【DOM，事件】在没有事件自动管理的框架支持下，应持有监听器函数的引用，在适当时候（元素释放、页面卸载等）移除添加的监听器

CSS

  1. 【行长度】 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组
  2. 【选择器】当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行
  3. 【选择器】属性选择器中的值必须用双引号包围
  4. 【选择器】如无必要，不得为 id、class 选择器添加类型选择器进行限定
  5. 【书写顺序】[建议] 同一 rule set 下的属性在书写时，应按功能进行分组:
  • Formatting Model 包括：position / top / right / bottom / left / float / display / overflow 等
  • Box Model 包括：border / margin / padding / width / height 等
  • Typographic 包括：font / line-height / text-align / word-wrap 等
  • Visual 包括：background / color / transition / list-style 等
  1. 【z-index】将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理

建议每层包含100个 z-index 来容纳足够的元素，如果每层元素较多，可以调整这个数值

  1. 【z-index】[建议] 在可控环境下，期望显示在最上层的元素，z-index 指定为 999999

可控环境：

  • 自身产品线环境
  • 可能会被其他产品线引用，但是不会被外部第三方的产品引用
  1. 【z-index】[建议] 在第三方环境下，期望显示在最上层的元素，通过标签内联和 !important，将 z-index 指定为 2147483647
  2. 【数值】当数值为 0 - 1 之间的小数时，省略整数部分的 0
  3. 【url】url() 函数中的路径不加引号
  4. 【颜色】RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()

// 带alpha信息的可使用rgba

  1. 【2D位置】[强制] 必须同时给出水平和垂直方向的位置
  2. 【字体】更详细说明可参考本文。
  3. 【字号】需要在 Windows 平台显示的中文内容，其字号应不小于 12px
  4. 【font-style】[建议] 需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style
  5. 【transition】使用 transition 时应指定 transition-property
  6. 【响应式】Media Query 不得单独编排，必须与相关的规则一起定义

// 即不要笼统写一个media

  1. 【响应式】Media Query 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中
  2. 【兼容性】[强制] 带私有前缀的属性由长到短排列

HTML

  1. 【对齐】脚本代码的第一级缩进与所属的 script 标签对齐
  2. 【class】禁止为了 hook 脚本，创建无样式信息的 class
  3. 【name, id】同一页面，应避免使用相同的 name 与 id
  4. 【自闭合标签】对于无需自闭合的标签，不允许自闭合

// 常见无需自闭合标签有 input、br、img、hr 等

  1. 【属性】布尔类型的属性，建议不添加属性值
  2. 【属性】自定义属性建议以 xxx- 为前缀，推荐使用 data-

// 使用前缀有助于区分自定义属性和标准定义的属性

  1. 【DOCTYPE】 在 html 标签上设置正确的 lang 属性
  2. 【URL】[建议] 移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀
  3. 【favicon】[强制] 保证 favicon 可访问
  4. 【图片src】禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src

// src 取值为空，会导致部分浏览器重新加载一次当前页面

  1. 【图片】添加 width 和 height 属性，以避免页面抖动
  2. 【图片】有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现
  • 产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载
  • 无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 CSS 背景图实现
  1. 【表单】文本标题的控件必须使用 label 标签将其与其标题相关联
  • 将控件置于 label 内（推荐）
  • label 的 for 属性指向控件的 id
  1. 【button】使用 button 元素时必须指明 type 属性值
  2. 【float, 顺序】负责主要功能的按钮在 DOM 中的顺序应靠前
  3. 【多媒体】在 object 标签内部提供指示浏览器不支持该标签的说明
  4. 【模板语法】模板代码应以保证 HTML 单个标签语法的正确性为基本原则 ```html
  5. { $item.type_name }

  • { $item.type_name }

    2. 18. 【模板语法】在循环处理模板数据构造表格时，若要求每行输出固定的个数，建议先将数据分组，之后再循环输出
    4. ```html
    5. <table>
    6.   {foreach $item_list as $item_group}
    7.   <tr>
    8.     {foreach $item_group as $item}
    9.       <td>{ $item.name }</td>
    10.     {/foreach}
    11.   <tr>
    12.   {/foreach}
    13. </table>