前端重构方案前言前端技术发展日新月异，很多项目都面临前端部分的重构。很高兴让我来写这个项目前端的重构方案。思考的时候参考了网上的很多资料。希望本文的重构方案具有一定的完整性，能够在重构面前给大家带来一些有用的东西。同时也希望路人多多指点。非常感谢重构相关的点~1.原项目回顾首先对原项目做一个总体回顾。既然是重构，当然很多东西是可以继续使用的。1.1页面结构我负责PC端的重构，所以先梳理一下页面结构和它们之间的关系，用xmind画结构图，标注关键功能，因为Vue是渐进式框架，所以我会优先重构xmind结构图的重要部分，我就不上传了，职业操守还是要有的project并说明相应的内容或功能。同样用xmind画结构图，xmind图省略。1.3前端框架和模板使用公司内部人员创建的C.F.F框架，自定义构建文件，嵌入Smarty模板获取后台数据，使用{$xxx}获取后台数据，但是全局变量较多定义为存放模板数据，导致占用内存较多，污染命名空间等。定义公共组件供每个模块或特定场景调用，复用性高1.4第三方库、组件、插件jquery：JavaScript库html5shiv：用于解决IE9以下版本浏览器不识别HTML5新标签，导致CSS功能失效的问题。Dialog:jquery弹窗插件jCarousel:jquery轮播插件（重构版本中废弃，原因不复杂的场景尽量原生实现）responsive:为IE6-8等不支持的浏览器提供媒体查询支持CSS3MediaQueriesmin-width和max-width特性，实现响应式网页设计工具eslint规范没有绝对的对错。只有同一个公司或者同一个部门制定规范的时候，大家都是一致的。同事之间可以快速理解彼此的代码，提高开发效率。2.2技术选择2.2.1开发模式：前后端分离的开发早已是趋势。到目前为止，大多数新项目都采用这种模式进行开发。如果项目完全重构，这种模式当然是首选。数据库、底层服务、接口、页面压力很大，精力有限，所以不能每个领域都做好。后来有一个切图的工作，可以让页面更漂亮，通过模板和请求接口与数据进行交互。前端与后端紧密耦合。在这种情况下，开发过程中的开发、沟通成本和进度依赖成本都很高。前后端分离后，分工更加明确，各自专注做好自己的事情，同时开始工作，互不依赖，效率高。来源，在此抱歉~）启动本地服务器运行自己的前端代码，模拟真实的线上环境；使用nodejs的express框架启动一个本地服务器，然后使用一个nodejs的http-proxy-中间件插件将客户端发给nodejs的请求转发给真实的服务器，让nodejs成为一个中间层。然后是数据的问题。后台接口正在开发中，前端需要数据做什么？了解mockjs，API地址为https://github.com/nuysoft/Mo...，后端设计AP接口文档时，我们可以使用mockjs模拟相应格式的fake数据进行开发，等到界面完全完成后，进行界面联调2.2.2MVVM框架：vueVue是一个渐进式框架，易于上手，易于协作，能够快速灵活的开发迭代。同时也是三大主流框架中学习成本最低的。目前公司也在推广Vue作为相关技术培训的首选框架。Vue社区比较流行，有很多组件、库和轮子。资源整合链接：https://segmentfault.com/p/12...体积小，自由度高，脚手架创建项目自带webpack打包构建工具。虽然vue是单页面应用，但是可以通过配置webpack进行多页面开发。2.2.3CSS预编译语言使用CSS预编译语言写CSS会提高写CSS的效率（具体效率百分比可以自己测试，我觉得找个段子写好css，先用css写好，然后writeitwithlessorothers来计算耗时百分比，这里为了测试忽略考虑写样式的时间。）预编译语言可以定义变量（比如常用的颜色，字体，字体大小等）),嵌套写法，可以继承其他类的属性，计算，内置函数等。2.2.4常用类库图形工具——echarts（对应场景-xxx）适配插件——灵活的taobaoH5终端适配方案（对应场景-xxx)Lodash–JS函数库(对应场景-xxx)ElementUI–UI库(对应场景-xxx)One-Page-Nav–导航插件(对应场景-xxx)具体场景我就不写了，并根据自己不同的业务需求判断需要哪些类库插件之类的，提前确定好，以免在做任何事情的中间花时间思考该做什么。2.3构建工具既然选择了vue框架，那么构建工具当然是vue自带的webpack。对于webpack，有人说可以配置项目，有人说需要深入研究。我认为这取决于个人需求。2.4开发效率PS一键裁剪功能emmet快速编写HTML#page>div.logo+ul#navigation>li*5>a{Item$}按tab键，上面代码等于
