【gaoqi-blog开发日志】样式的重构,模块化

luoyjx · 2016-10-17 22:12 · 34次阅读

背景

我的这个站运行了已有2年之久了,之间经历过2次大的重构了,每一次,都有新的认识,或者将新的知识融入其中,又或是改善一些已有的问题。

最初,这个网站只是按照 @nswbmw 大神的N-blog教程来学习并搭建的一个简单的blog工程,而这时,只是有一些最基本的功能,而且代码大都是一些浅显易懂的。从它的star数来看,也一定有不少的初学者通过它入门。

而在这之后,我开始混Cnode社区了,我也不记得是怎么进到社区里的,总之这与我第一次大的重构脱不开关系,在我看了nodeclub的源码之后,决定我要把我的网站也重构成这个样子,只是,当时我还没有将自己的网站完全定位为社区或者论坛之类的,只是单纯想分享一些技术话题,对大家有一些用处。

第一次重构,代码结构改造

首先是代码结构的学习,层次划分更加清晰。然后是一些库的使用,以及http的一些东西,比如cookie、session、中间件等等的使用。总之可以学的地方实在很多,在这之后,我也第一次转向专职的Node.js开发工作,在实践中也收货了一些经验,比如Promise,在nodeclub中异步控制使用的是朴灵的eventproxy,这种基于事件的控制,比较灵活,使用起来也不是很难,但是我发现了一个问题,使用它来描述异步流程,一旦代码长度过长,或是过了很久再回头来看代码,都需要重新理一遍,我不知道是不是所有人都是这样,但是在我使用了Promise之后觉得eventproxy不是很友好,而且此时ES2015标准已出,Promise显得逻辑更加清晰一些,更好维护一些。

第二次重构,异步流程控制

这促使了我的第二次大的重构,将现有的后端逻辑全部重构为Promise形式,使用的是bluebird,这个版本也就是现在的版本,逻辑上确实更加清晰了一些,但是Promise并不是完美的,他的流程控制不是非常的完善,比如,我只需要执行前几个步骤而中断跳出时,是无法很好的完成的,这需要借助ES2015中的generator,或者co,当然,这是在使用express的情况下,如果你使用koa的话,那无需担心这个问题。

第三次重构,样式组件化(或模块化)

重构都是为了解决某些痛点,而目前需要解决的痛点是,我虽然使用了less来编写我的样式,但是,我把所有的样式都写在一个样式里,这导致了我现在非常难以维护,所以,我决定重构所有的样式(也因为我最近将页面风格改为卡片式,以前的样式不是很兼容)。

怎么拆分?

这个是首要问题,这是需要拆分的粒度以及如何组织的问题。相信接触或者比较熟悉近来的前端开发(angularjs、react、vue)的童鞋会比较熟悉,在这些越来越工程化的开发中,我们大都以组件为单位进行拆分,分离职责,每部分只做自己的事,而视图由多个组件组合而成。

同样的道理,我们进行css样式拆分的时候也可以将,css看作组件的功能,以组件为单位,最后将组件整合到一起,形成一个个视图。

为了首屏的优化,通常是会将全局的layout(一般可能叫base.css之类的),再以每个页面的不同的部分作为单位进行组合。

暂无评论

登录后可以进行评论。没有账号?马上注册