segmentfault.com/a/1190000014753304
前言
前端技术发展迅速，很多项目都面临着前端部分的重构。 我很高兴能够写出这个项目前端的重构计划。 一边思考，一边参考了网上的很多资料。 我希望这个重构计划能够完成。 当面对重构时，性可以给你带来一些有用的东西。 同时也希望路过的大牛小牛能给我一些重构相关点的指点。 我非常感激~
1. 原项目概要
首先，对原项目进行总体回顾。 既然是重构，当然很多东西可以继续用。
1.1 页面结构
我负责PC端的重构，所以我首先整理了页面结构以及它们之间的关系，并使用xmind画了结构图并标记了关键功能。 因为Vue是一个渐进式框架，所以我会优先考虑重构。 重要部分
xmind结构图我就不上传了，职业道德还是要有的
1.2 项目结构
项目结构针对代码组织结构，对项目的重要文件夹和文件进行梳理，并标明相应的内容或功能。 同样使用xmind画出结构图，xmind图就省略了。
1.3 前端框架和模板
使用公司自有框架CFF，自定义构建文件，嵌入Smarty模板获取后台数据，使用{$xxx}获取后台数据。 然而，定义了很多全局变量来存储模板数据，这会占用更多的内存并污染命名空间。 以及其他问题。
定义公共组件供模块或特定场景调用，复用性高
1.4 第三方库、组件和插件
2. 重构计划
2.1 开发规范
规格方面没有绝对的正确或错误。 只有同一个公司或部门制定规范并且大家一致，同事才能快速理解彼此的代码，提高开发效率。
2.2 技术选型
2.2.1 开发模式：前后端分离
前端和后端分开开发早已是一种趋势。 到目前为止，大多数新项目都是采用这种模式开发的。 如果项目完全重构，这种模式当然是首选。
优点：以前没有前端这个职位。 所有后端开发人员负责开发，包括数据库、底层服务、接口和页面。 压力很大，精力有限前端模板框架，不可能在每个领域都做好。 后来有了一份剪图的工作，这让我可以写出更漂亮的页面，并通过模板和请求接口与数据进行交互。 前端与后端紧密耦合。 这样的话，开发过程中的开发、沟通成本、进度依赖成本就很高。前后端分离后，分工更加清晰，各自专注做好自己的领域，并且同时开始工作，互不依赖，效率高
原理：（此图来自博客，地址忘记了，希望博主能联系我前端模板框架，添加转载来源，抱歉~）
启动本地服务器运行自己的前端代码，模拟真实的线上环境；
使用nodejs的express框架打开一个本地服务器，然后使用nodejs的一个http-proxy-middleware插件将客户端对nodejs的请求转发到真正的服务器，让nodejs充当中间层。
然后就是数据的问题。 后端接口正在开发中，前端需要对数据做什么？ 了解mockjs，
API地址。 后端设计好AP接口文档后，我们就可以使用mockjs模拟相应格式的假数据进行开发。 接口完全完成后，我们就可以进行接口的联调了。
2.2.2 MVVM框架：vue
Vue 是一个渐进式框架，易于启动，易于协作，能够快速灵活的开发迭代。 同时也是三大主流框架中学习成本最低的。 目前公司也主要推广Vue作为相关技术培训的首选框架。
Vue社区比较热门，有很多组件、库和轮子，还有资源集成链接（#UI%E7%BB%84%E4%BB%B6）
小体积、高自由度、脚手架创建的项目自带webpack打包和构建工具
vue虽然是单页面应用，但是可以通过配置webpack进行多页面开发
2.2.3 css预编译语言
使用css预编译语言来写css，会提高写css的效率（具体效率提升的百分比可以自己测试一下。我觉得找一段写得好的css，先用css写，然后再用less或者其他方法来计算耗时百分比，忽略编写测试样式时思考的时间）
预编译语言可以定义变量（如常用的颜色、字体、字号等）、嵌套书写，并且可以继承其他类的属性、计算、内置函数等。
2.2.4 常用类库
具体场景我就不写了。 您可以根据自己不同的业务需求来判断需要哪些类库、插件等。 提前决定好，这样你就不用花时间思考中间要做什么。
2.3 构建工具
既然选择了vue框架，那么构建工具当然就是vue自带的webpack了。 有人说只需要配置webpack的项目即可，也有人说需要深入研究。 我觉得这个要看个人需求。
2.4 开发效率
#page>div.logo+ul#navigation>li*5>a{Item $}
按tab键，上面的代码等于
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
背景：原项目中编写的纯CSS
less/sass/scss 快速编写css
例如
@base-size: 40px;
@theme-color: #ccc;
@my-selector: title;
.aa {
font-weight: bold;
}
.@{my-selector} {
font-size: @base-size;
color: @theme-color;
margin: 100/2px 200/10px;
&-ok {
color: green;
}
&-no {
color: yellow;
}
> li{
&:extend(.aa);
&:hover {
color: #fff;
}
}
}
编译后是：
.aa,
.title > li {
font-weight: bold;
}
.title {
font-size: 40px;
color: #ccc;
margin: 50px 20px;
}
.title-ok {
color: green;
}
.title-no {
color: yellow;
}
.title > li:hover {
color: #fff;
}
这里只写了一点，功能还有很多
少官方网站()
sass官网()
在您写入颜色值的地方，您可以单击调出调色板（不限于 CSS）。 您可以选择颜色或使用吸管选取颜色（屏幕上的任何位置，不限于 IDE 内部）。 还有可以保存到书签工具文件夹的取色网站。 里面
Mockjs：上面介绍了Mockjs，这里不再赘述。 由于我有过手写假数据的悲惨经历，所以我将mockjs纳入了可以提高开发效率的行列。 因为前后端分离，前后端同时开发，假数据就成了必然。
例如：
let template = {
'anchorList|3-6':[{
'id|1-100': 1,
'name': '@cname',
'date': '@date(yyyy-MM-dd)',
biubiubiu: () => Mock.Random.string('abcdefghijklmnopqrstuvwxyz', 5),
'arr|2-5': [{
'age|10-20': 0
}]
}]
}
console.log(Mock.mock(template))
输出：
模块化、组件化开发：前后端解耦后，前后端之间的配合也可以解耦。 每个人负责不同模块的开发，编写自己的组件，最后在通信部分进行协作。
2.5 性能优化
2.5.1 数据访问
☆ 尝试使用局部变量
☆ 对象成员的嵌套深度与读取时间成正比，如果嵌套太深则需要优化
2.5.2 DOM
☆ 最小化 DOM 操作次数（访问和修改）
☆ 访问元素时使用最快的API
☆ 使用事件委托来减少事件处理程序的数量
☆ 减少重画和重新排列的次数
2.5.3 算法与流程
☆ for循环、while循环、do-whild循环比for in更快
☆ 优化循环体复杂度
☆ 最小化属性查找：
for(let i = 0, len = arr.length; i < len; i++){
...
}
☆ 条件少时使用if-else可读性更强，条件多时if-else比switch性能负担大，可读性不如switch。
☆ 对于if else概率越高的条件，判断就越高，例如：
☆ 当计算量较大且重复时，使用Memoization来缓存计算结果
2.5.4 字符串连接
比较接下来四种字符串连接方法的性能：
答：str = str + 'a'+'b'
B:str += 'a' + 'b'
C: arr.join('')
D:str.concat('b','c')
☆ Chrome65上的测试是A比B好比C比D好
不确定其他浏览器是否如此
2.5.5 阿贾克斯