前端开发规范

1、组织结构

a、传统开发

b、基于react全家桶开发

c、基于vue全家桶开发（包含天工模板常用组织文件）
 

2、依赖包版本控制

 a、 package.json 里涉及的依赖包版本当存在相互依赖时应同步更新，eg:vue-template-compiler vue-style-loader vue-loader

 b、 当项目有设计修改组件库源码时，需固定package.json中相应组件库版本

 c、 package.json依赖版本更新原则：在不影响项目开发与UI体验时可同步更新

3、线上版本控制

a、线上发布需添加版本号，防止资源缓存

4、线上代码安全

a、严禁线上暴露源代码（线上代码必须压缩、混淆）

b、严禁控制台打印涉及安全日志（如：打印用户信息、权限等），原则上禁止打印任何日志（除非业务需求）

5、多人协作开发

a、统一代码风格

b、统一UI输出

c、统一组织架构

d、友好注释（tip：公共组件与复杂业务逻辑必须按规则良好注释）

e、精简代码提取公共组件（tip：新增、编辑、查看是否能采用同一页面实例？还是分三个页面去实现？）

f、静态资源整合（tip：删除无效资源文件）

6、优化建议

a、分包按需加载

b、服务器开启缓存 （tip：expires、cache-control 控制静态资源缓存），入口页index.html永不缓存

c、优先使用CDN，为防止CDN失效，可添加本地服务资源

d、静态资源大小控制（tip：jquery引压缩包）

e、减少http请求，合理使用前端存储（tip：省市区多页面共享）

7、css、js、html编写基本规范

a、语义化标签（tip：章节的段落选择p标签，而不用div、span等）

b、尽可能减少div多层级嵌套

c、使用减号拼接css样式名（tip：box-border）

d、提高样式重复使用率

e、js常量名需大写

f、eval()函数尽量不用，会带来安全隐患

更多基础规范可参考： https://www.w3cschool.cn/webdevelopment/q3k8wozt.html；http://alloyteam.github.io/CodeGuide/ 

8、es6编写风格

a、let 取代 var（tip：let 块级作用域）

b、静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号

c、使用数组成员对变量赋值时，优先使用解构赋值

更多es6编程风格可参考：http://es6.ruanyifeng.com/#docs/style

9、vue编程风格

a、组件的 data 必须是一个函数

b、在组件上总是必须用 key 配合 v-for

c、永远不要把 v-if 和 v-for 同时用在同一个元素上

更多vue编程风格可参考：https://cn.vuejs.org/v2/style-guide/