前端技术发展很快，很多项目面临前端部分重构，很开心可以让我进行这次项目前端的重构方案编。
一.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、图片合并
以前没有前端这一职位之说，都是后端兼顾开发，数据库、底层服务、接口，页面一把梭，压力大，而且精力有限不能在每个领域都做的出色。后来有切图这一职，可以把页面写的更精美一些，通过模板和请求接口配合进行数据交互，前端都是紧紧耦合于后端，这种情况下开发，沟通成本，开发过程中进度依赖成本都是较高的。前后端分离后，分工更明确，各自专注做好自己领域的事，同时开工，不相互依赖，效率高
我自己是一名从事了5年前端的老程序员，辞职目前在做讲师，今年年初我花了一个月整理了一份最适合2019年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，可以加入我的QQ学习交流群：751196913 这里是小白聚集地，欢迎初学和进阶中的小伙伴
