前端重构整体规划

[mishe]

前端重构整体规划(初稿)

---

前言

前端技术发展很快，公司的项目面临前端大重构（前后端分离重做），很开心可以让我进行这次项目前端的重构方案编写，在思考的同时参考了网上很多资料，希望本篇重构方案有一定的完整性，可以带给大家一些在面临重构时有用的东西。

原项目需要梳理

页面结构
核心功能逻辑
第三方库、组件、插件
兼容要求、页面适配标准
BI数据的采集和埋点
设计UI标准
提测标准

重构整体方案

开发规范

规范这个东西没有绝对的对错，只有同公司或者同部门来制定规范大家都保持一致，同事之间能很快读懂相互的代码，提高开发效率

Html/css/javascript编码规范参考

前端开发规范手册
Airbnb JavaScript Style Guide
Code Guide by @AlloyTeam

代码检查工具

推荐使用Webstorm+ReFormat Code

技术选型

前后端分离

前后端分离开发早已成为趋势，到现在新项目大多采用这种模式进行开发，项目完全重构的话当然首选此模式
好处：前后端分离后，分工更明确，各自专注做好自己领域的事，同时开工，不相互依赖，效率高

VUE框架

Vue是一个渐进式框架，容易入手、容易协同，能够快速灵活的开发迭代。同时也是目前主流三大框架(React，Vue、Angular)里学习成本最低的，目前，公司也在主推vue作为首选框架，进行相关技术的培训。
Vue社区相对热度高，组件、库、轮子多，资源整合链接

体积小、自由度高、脚手架创建的项目自带webpack打包构建工具
虽然vue是单页应用，但是可以通过配置webpack进行多页开发

css预编译语言

译语言可以定义变量（比如常用的颜色、字体、字号等）、嵌套写法、可以继承其他类的属性、计算、内置函数等，但VUE的组件css推荐使用scope，因此业务代码开始的时候可以不用使用。
less官网
sass官网

常用类库

• echarts （对应场景 –图表展示,BI分析）
• ElementUI – UI库 （对应场景—管理后台）
• Mint UI - UI(客户前台界面)
• vuex 状态管理
• vue-router 路由管理
• axios ajax请求

构建工具

既然选择了vue框架，构建工具当然选择vue自带的webpack了，压缩代码、图片，合并JS，检测文件更新等自动进行

mock server

使用node+express的代理方式，可以根据API文档自行编写接口的返回数据

接口交互

整体参考接口设计规范
主要规范入参数和返回参数；
接口分层集中管理

模块化

以前由CommonJs、AMD、CMD等实现，现在ES6的Module（原生模块化）完全可以取而代之，灵活、高效是模块化开发的好处，对于某个模块我想输出就输出，想引入就引入，输出引入也只需一个关键词（export/import），而且ES6模块语法支持暴露常量、单一接口、所有接口、混合暴露、取别名等等灵活高效是毋庸置疑的
配合webpack在构建的时候把资源整合打包压缩自动处理了一些以前需要手动进行的性能优化问题了，
单个模块保持最多200行JS代码；

组件化

解决复杂业务的痛点，把复杂的业务分为很多个组件分开开发管理以降低开发难度和维护成本。一个5000行的页面和十个500行命名规范的组件哪个开发、维护简单？
组件灵活随加随用，可复用避免重复开发，可组合使用

源码管理

分离后的前端，不再是一个简单的HTML文件，已经是一个独立的应用系统。除了要考虑页面的数据渲染展示，还要用工程化的思想来考虑前端的架构，前后端的交互和数据安全等事情。

前后端工程分库

前后端分离，首先要做的是代码分离，因此前端代码和后端代码强制不在一个工程库中。

使用git库

源代码统一存放在公司内建的Gitlab服务器上，git可以更好的进行分支管理、标签管理、定期备份等机制，实现代码的安全保存和使用。

使用GitExtensions

git 图形化工具主要有gitExtensions和sourcetree两种，这边推荐使用gitExtensions。
使用Git Extensions简单入门Git

采用git Follow流程管理

在Git上项目分支的管理：每个项目在Git上有两个长期分支：master和dev，4个短期分支：feature、release、hotfix。

参考文档

前端安全

XSS

XSS是指浏览器错误的将攻击者提供的用户输入数据当做JavaScript脚本给执行了
解决办法：校验用户输入，特殊字符进行转义
Vue 双花括号自带过滤功能

本地存储数据泄露

本地存储的所有数据就都可能被攻击者的JS脚本读取到，所以敏感、机密信息都不建议在前端存储

用户体验

☆ 优化加载速度，减少用户等待时间
☆ 减少不必要的无谓的操作
☆ 动画交互合理，短平快的交互或者动画更适合知学宝，我们是功能型网站不是欣赏型网站，不需要太花里胡哨的动画，那样反而增加等待时间，适得其反
☆ 更赏心悦目的UI（字体、图片、logo，按钮、列表等）
☆ 处理好很多小的细节的地方，比如… 针对项目的地方就略了

https

前台展示页面采用HTTPS协议，增加用户的安全保证，确保交互数据的传输安全

http2

HTTP/2改变了Web开发者优化网站的方式。在HTTP/1.1中，为了压缩5%的页面加载速度，人们会通过雪碧图、内联代码、细分域名、合并代码等方式，来想方设法地优化TCP连接和HTTP请求。
HTTP/2带来了些许便利。一般网站无需复杂的构建和部署流程即可获得30%的性能提升。

使用CDN加速静态资源

cdn——维基百科给出的解释是：内容分发网络（Content delivery network或Content distribution network，缩写：CDN）。简单来说它主要的工作是把我们需要被分发的内容分发到世界各地的各个节点上，让世界各地的人都可以在距离最近的网络节点拿到想要拿到的内容，减少网络传输距离从而达到加速的目的（需要提过资源绝对地址告诉cdn厂商，让厂商去智能拉取）。

[rubickecho]

学习了，很赞

[Jialufeng]

👍