# 什么是前端重构？

前端是做什么的

说到前端，我们往往会随口蹦出一个后端，没错，如果单纯从计算机工程的角度来看待前端所做的工作，就是前端是后端的门面，用个形象的例子来比喻前后端，我们平常使用的手机是前端，而背后的手机系统是后端。而从我们用户使用的角度来看，前端负责与用户做交互，将用户的行为转化为计算机后台程序可以处理的行为。了解了这些，你可能就会明白，前端所做的本职工作就是程序与用户打交道的艺术，而如何做到更好更有效地与用户打交道，就是目前前端一直发展的大方向，而本文所讲的前端重构，本质上也是通过合理的调整前端的结构，更好地服务用户。

为什么要做前端重构

我们先来看一组图

以下是2003年和2018年淘宝的页面对比

2003

2018

现代社会的系统正在变得越来越强大，复杂性也在成倍的增加，结合以上的两张图，你会发现，以前的淘宝和现在的淘宝有一个很大的不同：现在的淘宝正在变得越来越丰富，功能也越来越多。这也同时意味着淘宝的系统正在变得越来越复杂，而越复杂的系统就越需要一个好的前端页面来缓冲给用户带来的这种复杂性。那么如何做到让用户轻松愉快的享受这强大的系统而不是被弄的眼花缭乱，就是我们前端要做的工作。而我们也要知道一个好的前端不是一蹴而就的，它是一个不断迭代更新的过程。而前端的重构，讲的就是这个道理，不断调整前端的架构，更好地为用户服务。

重构的核心思想之一 解耦

以下是网易考拉的下单页面的目录结构，我们可以充分地体会高内聚低耦合的设计思想，这样的设计有什么好处：

1. 功能之间解耦，易于维护与扩展
2. 逻辑清晰，便于接口间的互相调用

javascript
|——components
|  |——address/address.js //地址控件
|  |——checkcode/checkcode.js //验证码控件    
|——page/order
|  |——order_confirm.js //入口脚本
|  |——components
|  |  |——confirmGoods.js+html //确认商品信息
|  |  |——settlement.js+html //结算信息
|  |  |——exchangeCoupon.js+html //兑换优惠券
|  |  |——rechargeInfo.js+html //账号充值
|  |  |——invoiceInfo.js+html //发票信息
|  |  |——invoice.js+html //设置发票
|  |  |——bean.html //考拉豆抵扣
|  |  |——feeList.html //运费税费列表
|  |  |——gift.html //赠品信息
|  |  |——useCoupon.js+html //使用优惠券
|  |  |——submitCB.js //提交回调
|  |——widget
|  |  |——popCoupon.js //弹窗领券

作者：网易考拉前端团队
链接：https://juejin.im/post/59e0758af265da43200240d6
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

回顾我们程序设计的发展，你会发现解耦的设计思想一直发展到现在，从最初的前后端分离，到之后的MVC设计模式、Spring框架的横行，再到现在微服务架构的出现等等，都在充分阐释着解耦的设计思想。我们身处一个社会分工不断明确的时代，解耦所做的正是将程序的分工不断地细分明确，当然解耦的程度是和我们具体的应用场景是相关的。我们既不能分得太细，也不能分得太粗，这个力度需要靠实际情况来决定。

回到一个我们现实社会中的网页设计，如下图。你会发现原本一个大大的网页，经过一划分也只不过4个板块：导航栏、热门板块、内容广场、个人板块。其实这也是一种高内聚低耦合的设计思想，然而细心的你或许也会发现，板块与板块之间也需要协调默契的配合，关于板块之间的配合可以以下这篇博客，它里面有个很不错的口诀：「从左到右，从上到下，化整为零」
后端工程师入门前端页面重构

总结

在这篇博客中我们聊了：

1. 前端的本质工作：作为程序与用户之间的桥梁

2. 为什么要前端重构：系统的复杂性，不断迭代的需求

3. 重构的设计思想：解耦

文章写得不好，还请多多指教