重构构建的平凡之路

作者:李旦

导语

刚开始做前端的时候,一直以为切好页面是重构的全部职责,在切好页面的前提,增加页面交互,这样已经能到重构的顶峰。直到进入公司后发现参与的项目都有两个特点,项目复杂和参与人数的多,发现传统的方法已经不适用。主要介绍自己重构构建经历,如有问题欢迎指教! 乀(ˉεˉ乀)

以往存在的问题

这里介绍自己以往传统重构的方法容易暴露的缺点。

  1. 编写风格不统一,导致代码可读性差,增加后期维护成本与沟通成本;
  2. HTML和CSS代码冗余,增加了重构开发成本和页面打开速度;
  3. 项目开发周期长,缺少公共与私有框架的规划,同样会增加后期维护成本与开发成本,可复用性差;
  4. 项目文件部署杂乱,导致项目后期维护困难;
  5. 重构开发方法有优化提升空间;

重构构建的初步发展

在项目开始的时候,由于项目过大,支持重构的人越来越多了,这个时候大家讨论出的一些方法有:定义统一的代码规范、项目文件的合理部署、重构的方法优化、开发的自动化和重构架构的统一

实现方式:

  1. 重构文件的统一部署,区分开发环境和正式环境;
  2. 统一HTML和CSS代码的命名方式,增加代码的可读性,减少沟通成本;
  3. 使用SASS抽离公共组件样式的模块,使得CSS的开发变得简单可维护,使页面可组合;
  4. 使用Compass,自动生成雪碧图并且CSS同时生成背景坐标,提升重构效率;
  5. 编写SASS公共方法,减少重复CSS代码,提升重构效率(包括compass自带方法函数);
  6. 结合gulp构建工具,对雪碧图自动合并,sass生成,文件部署快速部署,项目的分类进行统一管理;

重构构建的深度扩展

主要是以项目2.0版本为基础进行构建优化

第一个版本引出的问题:

  1. 因项目庞大,前期考虑不足,缺少颜色的配置方案,导致后期需要换肤功能无法支持,无法统一调整;
  2. 文件未做合并压缩,增加了页面的请求;
  3. 命名的统一虽然能解决代码的可读性,但是当代码过多时,查看起来仍然令人眼花缭乱,同开发之间的对接也变得困难;
  4. 上传不方便,强行增加联调和测试的门槛;

主要围绕在不提升web架构的复杂度,结合构建工具使页面模块化和组件化,优化重构的工作流程,同时节省重构与前端或者开发之间的对接时间,搭建属于重构的管理系统增强重构对项目的管理能力

页面皮肤配置

在项目2.0初期时候,提前与设计进行页面换肤的颜色探讨,重构的时候根据少数颜色结合sass的颜色函数,达到页面整体的颜色配置。

后续有扩展空间,可以将配置放入管理端中,通过管理端传入颜色的配置再进行编译生成CSS文件。

LiveReload实现浏览器自动刷新

对页面进行样式更改之后,往往会多次刷新页面查看效果,对页面进行联调的时候更能体现出自动刷新的重要性,往往一个细节会花很多时间

使用条件:

  1. 谷歌安装LiveReload工具;
  2. 用http-server配置静态服务器,打开网页
  3. 执行配置好的gulp,并且打开谷歌LiveReload工具

优化:

因为LiveReload并不是特别好使用,所以用 Browsersync 来替代LiveReload,Browsersync的功能更全更方便。这里好处我不一一列举,可以查看 Browsersync官方文档,有更详细的介绍。

其中也遇到了一些问题,因为是HTML和CSS都是编译生成,得需要去动态监听生成文件的改变,进行自动刷新。

静态页面的模块化、组件化

为什么重构也要模块化、组件化:

  1. 模块强调分离,对重构而言,我们不能每次只写自己的HTML做好自己的事,重构是提供整张页面给前端或者后端,在庞大且复杂的项目中后续在开发页面时,每增加一个模块都需要和对接人员沟通清楚,可能还得指出具体位置;
  2. 组件强调复用,在重构新的页面时,对公共组件部分还得进行再重构,增加了重构的开发时间;

实现方式:

  • HTML:Gulp-content-includer

将静态HTML进行模块化开发,当开发人员拿到重构页面时候看到include模块, 清晰的知 道页面中引用了那些新模块,直接去进行快速开发,同时会生成完整的静态html便于查看效果。同时也避免了重构对公共组件的再重构,节省了重构制作静态页面的时间。利用gulp实现include双向绑定,更改include同时会更新完整静态html,并且浏览器会检测更改自动刷新

  • CSS:SASS

CSS模块通过SASS进行组件化区分,避免引用多余的组件样式

搭建CSS和图片管理系统

因为管理系统是自己独自处理,所以还有很多待改进的地方,在能够完成基础功能的前提,后续继续慢慢跟进。

为什么要搭建管理后台?

刚开始在项目初期的时候,我们在每次联调或者重构完页面时,都需要通过前端或者开发进行协助将CSS及图片上传到对应环境中,最后因为实在太麻烦,重构也开始使用跳板机进行环境的上传。然后发现每次页面在后期联调维护的时候,因为上传环境复杂,需要花很多没必要的时间在跳板机上传上,增加了工作量。

管理后台有哪些功能?

  • 文件上传 整个管理后台是以图片和CSS的上传与管理为基础围绕展开。
  • 文件压缩 包括CSS文件的压缩,图片的上传进行自动压缩,并且会将颜色配置的CSS和全局公共的CSS合并在同一个文件中,压缩后文件命名以 项目名+min.css 组成,线上保证有一份源CSS同时还会有一个压缩后CSS

为什么不将CSS合并与压缩功能做在gulp中,却做到管理端上?

如果做到gulp中,会不方便后期的改版维护,在发布时,因为都是压缩过的CSS代码,不便和线上进行对比。虽然有SVN,但是为了保证一切以线上为主的基础,还是会对线上的代码进行对比。

  • 文件打印

用于打印CSS文件代码,更方便的进行对比操作

最后

以上只是列举了我个人在项目中重构构建历程,主要是为了减轻重复劳动,提高效率。我们可以选择更加适合自己的方案,而不是在追寻技术的路上迷失了方向。

最后的最后

各位大佬求轻吐!!!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

十大跨浏览器测试工具

在多个平台上测试多种浏览器不但是很困难的 – 它几乎不可能的,因为没有那些好的测试工具。今天,我们就为大家提供很多涉及到跨浏览器测试的选择,并且告诉你那些“顶级...

1786
来自专栏张善友的专栏

.NET Core 已经实现了PHP JIT,现在PHP是.NET上的一门开发语言

1464
来自专栏极乐技术社区

官方问答精选《一》提交审核时提供测试账密码

本系列是我觉得,应该整理一下,因为官方很多回答里其实是在补充官方文档的,十分值得收集并整理出来;我会不定期整理的,大概是2-3天左右,一周至少整理2次; 比如本...

1728
来自专栏用户3254834的专栏

干货丨自适应网站和响应式网站有哪些差异

随着大屏智能手机以及ipad等通讯设备的广泛应用,网站样式风格也与时俱进,在满足PC端计算机的浏览时,移动端同样适合访客浏览,作为一些企业公司和个人,他们在网络...

782
来自专栏Guangdong Qi

# 微信小程序开发之-初试

1553
来自专栏极乐技术社区

『Demo』音乐类Demo大全

好东西要乐于分享 好的Demo资源可遇而不可求,在这个小程序Demo资源越来越少的时局下,极乐蜀黍给大家雪中送炭,拿出自己的收藏多年的Demo资源,可不要太感动...

1975
来自专栏前端架构与工程

前端工程化-构建

构建的核心是资源管理。简单说,构建就是把前端工程师开发的源代码进行编译、压缩、打包等一系列操作,最终产出可以直接上线或者可供后端工程师的资源。 构建可以划分为纯...

2096
来自专栏张善友的专栏

.NET Core 已经实现了PHP JIT,现在PHP是.NET上的一门开发语言

12月23日,由开源中国联合中国电子技术标准化研究院主办的2017源创会年终盛典在北京万豪酒店顺利举行。在本次大会上,链家集团技术副总裁、PHP 开发组核心成员...

19210
来自专栏张善友的专栏

One ASP.NET

大多数情况下,我是一名 ASP.NET开发人员。我不需要指定 MVC 或 Web Form,他们都是微软One ASP.NET战略的核心。我的应用程序往往是混合...

19710
来自专栏向治洪

360加固apk并自动签名

我们知道Android加混淆之后,代码的安全性得到了提高,即使你hook,反编译得到的也是乱码的,对于阅读性造成了影响,为了增强代码的破解难度,我们通常退对ap...

3027

扫码关注云+社区