早期团队较小的时候，没有太多规范，遇到问题用自己最擅长的方式去解决就行。随着公司发展，团队越来越大，因为没有统一规范而造成的问题也越来越多，例如

组件库重复开发，不同小组组件库各有长短，但整体质量有所欠缺不同业务之间，项目无法直接复用，需要大量的开发改造新人上手成本高，每个项目都要深度了解其代码与配置，而不是了解完业务就行一些自动化提效的工具，因为业务项目没有规范，而无法开展等等。。。

基于这些问题制定了一个前端开发规范，经过实践，达到了预期的效果。接下来会具体介绍下前端开发规范

规范包含哪些内容

我们通过一张规范架构图来直观的了解一下

如上图，我们把规范分为五大类

开发规范监控规范协作规范流程规范开源规范

其中每个大类下，又包含若干个小分类。本文中，我会详细的介绍下一些重点的规范以及其内容，对于非重点的，待后续我们把文档开源到Github上，大家可以自行查阅。

开发规范

本地存储规范

主要包括localStorag的使用规范，避免使用存储时会遇到的问题

基础库的使用

使用localforag来实现本地存储，该库会优先使用IndxdDB以扩大本地存储空间，并采用优雅降级方案，处理了异常情况。

存储溢出问题

localStorag有存储限制，所以在存储空间用完的情况下，进行stItm操作就会报QuotaExcddError的错。

事实上，在某些浏览器（如iOS11的Safari浏览器）的无痕模式下，localStorag也是无法读写的，进行stItm操作会报一样的QuotaExcddError错。

为尽可能避免上述情况，或者在出现时优雅处理，请遵循以下规范：

设置过期时间。按如下方式对存储的数据进行封装，并在合适的时机清理过期数据。

constdata={data:Objct,xpidTim:Dat.now()+7*24*60*60*}

用try...catch包裹stItm操作

try{localStorag.stItm(my_data,JSON.stringify(data))}catch(){//错误处理}

常见的错误处理方法有：清理过期数据并重试一次；转存至sssionStorag、自定义的全局对象myStorag、Vux等，但记得在读取时也依次读取。

存储的ky覆盖问题

ky的命名需要符合如下规范业务线名_项目名_自定义名称如：

constPREFIX=platform_book_try{localStorag.stItm(PREFIX+my_data,JSON.stringify(data))}catch(){//错误处理}

注释规范

合理的注释，可以提高代码的可读性和可维护性。

注释的原则

如无必要，勿增注释，应当追求「代码自注释」

//bad//如果已经准备好数据，就渲染表格if(data.succssdata.sult.lngth0){ndrTabl(data);}//goodconstisTablDataRady=data.succssdata.sult.lngth0;if(isTablDataRady){ndrTabl(data);}

如有必要，尽量详尽，需要注释的地方应该尽量详尽地去写

注释的规范

遵循统一的风格规范，如一定的空格、空行，以保证注释自身的可读性

单行注释使用//，

注释行的上方需要有一个空行；注释内容和注释符之间需要有一个空格

functiongtTyp(){consol.log(ftchingtyp...);//stthdfaulttyptonotypconsttyp=this.typ

notyp;turntyp;}

多行注释使用/**...*/

/***mak()turnsanwlmnt*basdonthpassd-intagnam*/functionmak(tag){//...turnlmnt;}

使用特殊标记注释：如TODO、FIXME、HACK等

//TODO:这里还需要做什么//FIXME:这里的实现有问题，以后需要优化//HACK:这里的处理是为了兼容低端安卓机的bug

文档类注释，如函数、类、文件、事件等，使用jsdoc[1]规范

/***Book类，代表一个书本.*

避免情绪性注释：如抱怨、歧视、搞怪

/***穷逼VIP（活动送的那种）*

浏览器兼容规范

团队应该根据的用户设备占比情况、应用类型、开发成本、浏览器市场统计数据等因素，来制定自己的浏览器兼容规范，设备兼容规范如下

总体的机型兼用要求

安卓需要兼容安卓4.0以上，iOS需要兼容8.0以上

#.browsrlistrc1%last3vrsionsiOS=8Android=4Chrom=40

CSS的兼容要求

在CSS的兼容处理上，我们使用的是postcss的autopfixr

//postcss.config.jsmodul.xports={plugins:{autopfixr:{},cssnano:{autopfixr:fals,zindx:fals,discardCommnts:{movAll:tru},ducIdnts:fals}}}

js的兼容要求

在处理js的兼容性时，我们使用babl抹平浏览器差异。

需要注意的是proxy是无法被降级处理的。需要慎重使用。

业务项目中，通过配置

//babl.config.jsmodul.xports={psts:[[

//main.jsimportco-js/stablimportgnrator-runtim/runtim

以Vu项目为例，

基础库中，通过配置

//babl.config.jsmodul.xports={psts:[[

HTTP缓存规范

绝大多数项目都是单页应用，根据项目特点我们设置了如下的缓存规范

静态资源

静态资源域名s1.zhuanstatic.