一个小公司的前端模块化解决方案

原创 誓约胜利之剑 教程 js 4864阅读 2017-04-01 14:45:57 举报

我就职于一家很小很小的公司,小到什么程度,长期以来,我们只有两个后端,一个前端一个cto,一个ui,一个销售,一个人事,一个教务,加上老板和财务也不多十几人,但我们的业务量很多,而且由于公司的特殊性质,我们只接政府项目和国企项目,做过这行的兄弟们可能知道,在国企和政府面前,我们乙方没有任何商量的余地,一个需求过来,必须要快速改。我曾经有一天修改同一个模块改了二十多次,只是因为对方的负责人感觉排放不好看。但他也说不出来怎么摆他会感觉好看。这样的事情还有很多很多,很长一段时间里,我们的项目一直使用传统的一个页面一个html,一个css,一个js的模式,这样的后果是,一旦公共部分改动,所有页面都改,后来我提取出了头尾公共部分。但发现还是不行,页面内容太多,css数量庞大,使用scss的过程中一不小心就会写出过深的嵌套。
终于,前段时间莫名其妙的变得清闲起来,我也就趁着这段时间设计出了现在的模块化方案,经过我这段时间的尝试,基本所有的想法都得到了实现,只是我是基于fis3进行的,而大家知道webpack才是目前最火的自动化构建工具,有人会说他不是自动化构建工具,他只是模块打包器,确实,在最初,webpack的确主要负责模块打包,但时至今日,webpack配合其强大的插件库,完全可以胜任自动化构建任务。因此过段时间我应该会使用webpack搭建我的这套解决方案。目前这套方案最初是基于颜海镜的开源脚手架fis3-base,后来我对照自己公司的也无需求进行了一些删除和增加,最终形成了现在的版本。希望这篇文章能让刚刚步入前端这个行业的兄弟们了解到模块化的重要性和一个真实项目的大概开发流程。

主要开发流程

首要工作,选择一个适合自己的代码编译器,这里推荐atom,vscode和webstorm,个人比较喜欢前两个,感觉界面更加干净一点。

1.初始化项目脚手架——使用fis3作为前端自动化构建工具,写好项目配置文件,安装相关依赖。(项目fis3整体配置基于颜海镜的开源脚手架fis3-base,在此基础上进行了修改)

2.项目分析。

1.项目流程图——可以使用百度脑图之类的在线脑图工具 2.页面模块分解——根据需求和功能划分对每个页面的进行模块分解

3.下载所需的常用插件——使用bower作为包管理工具(目前最火的包管理工具是yarn),方便后期版本管理。

4.编写公共父模板——这里使用jade作为模板语言(现已改名为pug)。

5.初始化scss配置文件——配置当前项目的五类css,确认书写规则(主要使用smacss设计模式)

6.配置当期项目图标——使用阿里巴巴矢量图标库或者font awesome这类的字体图标库都可以。

7.html静态模板编写——使用jade,便于实现模块化。

8.vue数据格式绑定——html模板中加入vue绑定数据,为页面添加动态交互效果。

9.mock假数据模拟——代码调试完成。

10.代码打包发布。

目录结构###

一个小公司的前端模块化解决方案
具体结构

一个小公司的前端模块化解决方案
根目录下存放html模板文件,bower配置文件,fis3配置文件

1.img 项目中中用到的图片
2.lib 存放一些不打包的js插件,css插件
3.modules 项目的组件
1.app 项目用到的js文件
2.css 项目用到的css
3.html 项目中个页面的模块文件和项目公共模块
4.test 模拟测试数据

html静态页面的模块化方式

目前主流的模块化方式大都是通过mvvm框架进行实现,这在单页面应用中非常便利,但对于目前绝大数公司来说,后台模板渲染数据直出页面的开发模式依然非常对,而且多页项目很多。此时使用mvvm会有很多问题,我们希望能找到一种像写普通html那样的方式进行项目html的模块化,其实这在很多后台模板语言中很好实现,因此我们找到了jade这款模板语言,简介,功能强大,借助fis3的jade插件能非常便利的进行继承,包含等模块化操作。

一个小公司的前端模块化解决方案

上图是项目父模板的示例,我们在父模板中申明每个页面会使用的公共js,css,还有公共的头部和尾部。

一个小公司的前端模块化解决方案
项目子页面继承自父页面,同时引入自身页面的js,css,主体引入对应的模块

一个小公司的前端模块化解决方案
html下存放了各个页面各自的模块和整个项目的公共模块

css的模块化方式

其实在html能够成功模块化的时候,css就已经也成功模块化了,在这里,我们更多的着重与如何写出可维护性好,性能高的css。css的书写规范大概有以下几点

1.层级嵌套不要太深

2.避免使用元素选择器

3.避免使用群组选择器

至于具体原因大家可以自行百度。

为了解决这类问题,诞生了许多的css设计模式,可能有许多人第一次听说css还有设计模式,但事实css作为web的三大基石,它自身的重要性不容小觑,css重要到什么程度,曾经有人说过,后端和前端的距离,只差一个css;

我们项目中采用了比较主流的SMACSS设计模式。

SMACSS定义了五种样式类型:

  • Base (基本)
  • Layout(布局)
  • Module (模块)
  • State (状态)
  • Theme (皮肤)

基于此,我们把项目的css分为以下五类,并规定命名规范 因此我们可以把一个项目的css分为5类

第一类为base类,也就是所谓的css resets.这里我们使用了很出名的Normalize.csshttp://necolas.github.io/normalize.css/

第二类为Layout类,布局类,其实我们如果按照html5来进行语义化的html编写,那我们是必然会用到header,nav,slider,footer,section,article等语义化标签,其中,header,footer,slider,等就属于指定html元素属于布局元素,这类元素我们赋予特定的class类。(布局类元素,class以'lay_'开头,后面跟上布局的语义单词)

第三类为模块类,在实际开发中,我们可能复用的最多的模块,必然是头部,尾部。该类元素使用特定的class类,实际上,在开发中,该类元素我们将其html,css都进行了模块化。(模块类元素,class以'mod_'开头,后面跟上具体的语义单词)

第四类为state类,也即是状态类,一般现实项目中,一个元素的状态最常见的隐藏,现实,被选中,被滑过等等,对于该类属性,给予特定的类。(状态类元素,class以'state_'开头,后面跟上具体的语义单词)

第五类,皮肤类,一般这部分设计,色彩,字体,甚至阴影,背景图片,在现实项目中,我们会将皮肤元素全部使用scss变量申明,因此对于该类,我们实际不需要单独申明特殊类名。只需要改变scss配置文件即可。

最终,一个项目的html看起来应该是这样

一个小公司的前端模块化解决方案

JS的模块化方式

js的模块话其实是最好解决的方式,在和么多年的发展中,诞生了例如cmd,amd,commonjs,等等一系列的规范,并且都有对应的解决方案,在这里我们主要使用了commonjs,更加贴近es6。

综上,我们基本完成了对一个项目的模块化,那这样的好处到底是什么,我个人总结了一下几点

1.最重要的就是便于管理,以往的项目内容庞大,一个稍微复杂的页面,css的代码量会非常多,你需要些很多注释,模块化后html,css数量大量减少,修改时便于查找
2.减少重构压力,模块化之后,公用的模块只要被修改,项目的每个拥有公共模块的页面都会自动更新,省去了以往一个个更改的烦恼。 3.便于样式改版,不再需要一个个的修改颜色,圆角,阴影,只需在配置文件中一键更改。

另外,自动化构建工具自动压缩代码,添加版本戳,更换url,这些在以往都是需要人力去实现的麻烦事,其实这么多总结道最后就是一句话,磨刀不误砍柴工。

评论 ( 27 )
最新评论
inge 1F 2017-04-11 14:26:52 27F

我们也是的,还是以前那种开发

誓约胜利之剑 25F 2017-04-07 13:03:29 26F

习惯就好了

小水晶 2017-04-07 12:53:26 25F

一天之内修改同一模块二十多次 你就没有愤怒到想离职?

誓约胜利之剑 23F 2017-04-05 23:32:00 24F

atom编译器

赖倾玄 2017-04-05 22:07:06 23F

你用的什么编辑器,看起来好想用啊

九儿 20F 2017-04-05 10:51:27 22F

确实是啊

誓约胜利之剑 16F 2017-04-05 10:00:16 21F

我只会一点点的nodejs,货真价实的真前端

誓约胜利之剑 19F 2017-04-05 09:59:39 20F

其实主要还是看业务需求吧,如果非要兼容ie6什么的,那就算想用新技术,也用不了了

九儿 2017-04-05 09:53:48 19F

小城市小公司用的一般是传统的开发模式,新的技术相对来说用的不多,弃之可惜食之无味

RRRRdaiMao 15F 2017-04-05 09:35:18 18F

楼主楼主我也要qq
, 我家后端也是.net ,
, 能不能加个qq , 就当交流交流

RRRRdaiMao 13F 2017-04-05 09:31:51 17F

可能对vue之类的js框架了解不深,是要好好找时间去学习了~ 另外微信小程序写页面的方式似乎和vue很像,两者是不是有什么关系,我在了解微信小程序写法之后对学习vue有没有帮助呢。。

tianxiaofeng747 2017-04-05 09:28:16 16F

我猜你是个假前端,真后端。

誓约胜利之剑 14F 2017-04-04 18:22:03 15F

私信你了

1063363934 2017-04-04 18:09:57 14F

楼主能留个qq么,我们后台也是.net 公司后台人员不太理解前端,所以很多工作都很麻烦,想跟楼主交流下

誓约胜利之剑 12F 2017-04-03 01:25:42 13F

我们后台使用的是.net,如果你是使用vuecli构建的环境书写.vue格式的文件,通过webpack去打包的话,的确后台无法使用,因为html被打包进了js.但是如果你仅仅使用引入vue文件,还是书写正常的html文件的话,后台是可以使用的。

RRRRdaiMao 2017-04-02 11:55:09 12F

我们公司后端使用的是aspx , 一般他都是html aspx混写 , 我提供html给他然后再改aspx , 可是如果我用webpack或者vue的话,做出来的html不是没办法给aspx程序员去改了?

誓约胜利之剑 10F 2017-04-01 17:16:39 11F

webpack是目前最主流最热门的构建工具,我会尽快把这套流程迁移到webpack上去

天凉好个秋 2017-04-01 16:58:25 10F

传统网页开发模式进行模块化么,长见识了,我现在在学着webpack+vue,小白之路漫漫啊!

fantasy525 8F 2017-04-01 16:37:15 9F

噢,我不了解你说的那个fis3是干嘛的,那这样看你是先本地把里面的模板解析过渲染成html了,然后最后放到服务器中了。那不用考虑seo了,我最开始以为你是直接把带有模板命令的文件放到服务器呢

誓约胜利之剑 7F 2017-04-01 16:33:43 8F

不是这个意思,我的项目通过fis3打包成功后已经是渲染过后的html文件了,就是fis3这个工具帮我实现了jade转html的过程,不需要在服务器中进行渲染。