前端重构方案了解一下

2018-07-17 11:56:00 2654 2 编辑:深正互联 来源:互联网

前言
前端技术发展很快,很多项目面临前端部分重构,很开心可以让我进行这次项目前端的重构方案编写,在思考的同时参考了网上很多资料,希望本篇重构方案有一定的完整性,可以带给大家一些在面临重构时有用的东西,同时希望路过的大牛小牛不领赐教,能给我略微指点下重构相关的点,在下感激不尽~

一、原项目梳理
首先对原来项目做一个大概的梳理,既然是重构,当然很多东西是可以继续拿来使用的。

1.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 开发模式:前后端分离
前后端分离开发早已成为趋势,到现在新项目大多采用这种模式进行开发,项目完全重构的话当然首选此模式
好处:以前没有前端这一职位之说,都是后端兼顾开发,数据库、底层服务、接口,页面一把梭,压力大,而且精力有限不能在每个领域都做的出色。后来有切图这一职,可以把页面写的更精美一些,通过模板和请求接口配合进行数据交互,前端都是紧紧耦合于后端,这种情况下开发,沟通成本,开发过程中进度依赖成本都是较高的。前后端分离后,分工更明确,各自专注做好自己领域的事,同时开工,不相互依赖,效率高

开启一个本地的服务器来运行自己的前端代码,以此来模拟真实的线上环境;
利用nodejs的express框架来开启一个本地的服务器,然后利用nodejs的一个http-proxy-middleware插件将客户端发往nodejs的请求转发给真正的服务器,让nodejs作为一个中间层。
然后就是数据问题了,后端接口在开发中,前端需要数据怎么办呢?mockjs了解一下,
API地址https://github.com/nuysoft/Mo… ,当后端设计出AP接口文档后,我们就可以利用mockjs模拟出对应格式的假数据进行开发,等到接口完全完成之后,再进行接口联调

2.2.2 MVVM框架:vue
Vue是一个渐进式框架,容易入手、容易协同,能够快速灵活的开发迭代。同时也是目前主流三大框架里学习成本最低的,目前,公司也在主推vue作为首选框架,进行相关技术的培训。
Vue社区相对热度高,组件、库、轮子多,资源整合链接:https://segmentfault.com/p/12…
体积小、自由度高、脚手架创建的项目自带webpack打包构建工具
虽然vue是单页应用,但是可以通过配置webpack进行多页开发

2.2.3 css预编译语言
使用css预编译语言来写css会提高编写css效率(具体提高多少百分比效率可自行测试,我觉得找一段写好的css,先用css写一遍,再用less或者其他写一遍计算耗时百分比,这里忽略写样式时候思考的时间进行测试)
预编译语言可以定义变量(比如常用的颜色、字体、字号等)、嵌套写法、可以继承其他类的属性、计算、内置函数等

2.2.4 常用类库
图形工具—echarts (对应场景 – xxx)
适配插件—flexible taobaoH5终端适配方案 (对应场景—xxx)
Lodash – JS函数库 (对应场景—xxx)
ElementUI – UI库 (对应场景—xxx)
One-Page-Nav – 导航插件 (对应场景—xxx)

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通