前端必会的重构方案技巧，不然在找工作和工作时会受挫!

前端技术发展很快，很多项目面临前端部分重构，很开心可以让我进行这次项目前端的重构方案编。

一.1页面结构

负责PC端的重构，所以先把页面结构及之间的关系梳理了一遍，并用xmind画好结构图，重点功能做上标记，因为vue是渐进式框架，所以我会优先重构重要的部分

xmind结构图我就不上了，职业操守还是要的

1.2项目结构

项目结构是针对代码组织结构的，梳理了项目各重要的文件夹及文件并注明对应的内容或者作用。同样的，使用xmind画出结构图，xmind图略。

1.3前端框架、模板

使用公司内部人员自创框架C.F.F，自定义build文件，内嵌Smarty模板获取后台数据，利用{$xxx}获取后台数据，但是定义了很多全局变量存储模板数据，造成占用更多内存、污染命名空间等问题。

定义公共组件供各模块或特定场景调用，复用度高

1.4第三方库、组件、插件

• jquery： JavaScript库
• html5shiv：用于解决IE9以下版本浏 览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
• Dialog ： jquery弹窗插件
• jCarousel : jquery 轮播插件 （重构版舍弃，原因不复杂的场景能原生实现尽量原生实现）
• respond：为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计
• sideToolbar：导航工具
• echarts： 图形工具
• ...

二、重构方案

2.1开发规范

• 命名规范
• html/css/less/sass/scss/javascript编码规范
• 代码检查工具 eslint

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

2.2技术选型

2.2.1 开发模式：前后端分离

前后端分离开发早已成为趋势，到现在新项目大多采用这种模式进行开发，项目完全重构的话当然首选此模式

2.3、前端代码规范

1、把页面中内联样式及头部样式提取到单独的css文件中

2、调整代码的缩进

3、更改标注已经不支持的标签如:<b>

4、在javascript中减少全局变量的使用，缩小变量的作用域

5、整理基础类库,减少因为版本的问题造成多个文件

三、前端代码模块化

1、按模块归类css代码与js代码，放到模块对应的文件夹中

2、按模块分离js代码，定义不同的命名空间

四、提高页面加载性能

1、将不影响首页展现的javascript文件延迟到页面加载后加载

2、删除页面中初始隐藏的区域

3、javascript改为按需加载

4、图片的懒加载

5、调整css和js的引用顺序

6、给静态文件设置缓存

7、加载CDN上的文件

8、图片合并

以前没有前端这一职位之说，都是后端兼顾开发，数据库、底层服务、接口，页面一把梭，压力大，而且精力有限不能在每个领域都做的出色。后来有切图这一职，可以把页面写的更精美一些，通过模板和请求接口配合进行数据交互，前端都是紧紧耦合于后端，这种情况下开发，沟通成本，开发过程中进度依赖成本都是较高的。前后端分离后，分工更明确，各自专注做好自己领域的事，同时开工，不相互依赖，效率高

有想要咨询的朋友，随时在下方评论，小编都会一一解答，也可私信小编“学习”无论是小白还是大牛。都可获得最系统的资料。