一、编码规范的意义：

1.在开发的初级阶段，往往就是"能用就行,快速上线",这样随意的开发就很容易导致下一个人读不懂代码的状态，也就不得不进行重构。

2.编码不规范会在开发的各个阶段造成阻碍：如在评审时因为目录结构混乱、没有注释等原因导致无法评估开发风险和周期；在开发阶段，由于代码混乱，很容易出现重复造轮子的情况，也会产生很多隐藏的bug；在测试阶段，由于无法确定改动的内容会带来多大的影响，会对测试同学带来负担，也会造成上线后的bug；这样，也就会对自身造成负面的影响。

3.在严格执行代码规范后，代码易读，bug减少，效率提升，我们也会有更多的时间和精力去完善功能，优化性能，而不是浪费时间读代码。

二、编码规范的主要范围：

按照流程梳理，可包含目录约定、编码规范、Git规范，文档与注释规范，接口设计规范，单元测试规范等。

三、通用的三种编码风格

standard js、google js、Airbnb js

四、编码规范具体来讲：

1、外部变量不与对象属性重名(风格约束型规则，eslint：no-label-var)

       // 以下为错误写法
       var score = 100
       function game() {
           score: while(true) {
               score -= 10
               if (score > 0) continue score
               break
           }
       }

2、使用getPrototypeOf 来代替__proto__(安全约束型规则，eslint: no-proto)

    const foo = obj.__proto__ // avoid
    const foo = Object.getPrototypeOf(obj) // ok

3、不要扩展原生对象(安全约束型规则，eslint: no-extend-native)

Object.prototype.age = 18 // avoid

4、始终使用=== 替代==（风格类约束，eslint： eqeqeq）

name === 'John' // ok
name == 'John' // ok

五、EsLint的介绍

目的：代码检测

优点：灵活性，任何规则都可以切换；可拓展，插件丰富；拥有易于理解的输出；出色的支持ES6；支持自定义规则

缺点：需要一些配置才能使用，速度相较更慢

运行过程：ESLint 基于 AST对代码进行分析，并具有优秀的可配置行。借助插件化的设计还可以定制和引入新的规则。

六、JSDoc 介绍

JSDoc 是一个根据代码注释信息，生成JavaScript 应用程序、库、模块等API文档的工具。

安装到全局：npm install -g jsdoc

jsdoc生成的是html文件，如果需要markdown，则需要安装另一个插件：npm install -g jsdoc-to-markdown

七、基于git的版本控制规范

1、 git-flow：

主分支master：用来版本发布

开发分支develop：日常开发一般在开发分支进行；如果想要发布正式版本，merge到master

功能性分支feature: 开发完成后，将其并入dev分支

修复分支fixbug：当出现线上问题时，从主分支拉出，修复完成后，合并到dev和master

2、 git中commit message 规范

不必深入代码即可了解当前的提交；容易分类的提交信息；如果需要的话，对本次提交影响的范围进行说明。

3、git hook：自动化部署

八、规范化应用常见的问题

在技术层面：

1、技术选型分散：团队内部技术选型不统一，react、vue、js、ts

2、技术场景广泛：对于大型团队，涉及的开发场景可能包含 Node.js、小程序、React Native等。

3、接入、升级成本过高：工程数量的增加和老项目的难以适配，会进一步增加工程接入成本升级成本和方案维护成本。
在其他层面：

1、团队内部分布差异过大

2、难以保证规范执行落地

3、执行效果难以分析统计

九、规范化应用常见问题的解决方案

多场景统一的ESLint规则配置集
自动化配置接入工具
代码集成交付检查
执行状况监测分析

前端规范化了解

一、 编码规范的意义：