模块化是现今我们随处都可以听到的一个名词,什么是模块化?为什么我们需要模块化?这是本系列文章我们要弄明白的一个问题。我们也借这部分内容,顺带回顾一下前端的发展历程。
说实话,模块化这个主题有点大,我一时也不知道从哪里讲起比较合适,通常来说,前端的工作内容主要涉及三个方面:html、css、js(
我们单独来讲,我想先从css,因为这是我认为最容易入手且非常鲜明的一块内容。
背景
起初的.css是长什么样的?
/* index.css */ body { margin: 0; padding: 0; font-size: 18px; } .box { background: #333; color: #fff; } .box .list { margin-left: 10px; } .box .list .item { border-bottom: 1px solid #ccc; } .box .list .item:last-child { border-bottom: 0; } .box .list .item a { text-decoration: none; color: #fff; } .box .list .item span { color: red; } .box .list .item a ... { ... }
是不是很熟悉?一个简单的手打的列表模块。
这里存在的问题是:
- 按照这个顺序写下去,选择器会越写越长,造成书写累赘;
- 越来越长的选择器容易使我们混淆dom的空间顺序,想象如果有好几个平级的选择器(如.box .list .item a与.box .list .item span),我们可能一时看不出这两者的关系,是父子还是兄弟元素?
- 维护困难,假设我们需要重构这个box,在.box和.list之间加入一层.wrap,在.item与a和span之间加入一层.block,那简直就是个灾难,我们要谨慎地找到确切的位置,然后再找到所有匹配的、长长的选择器,在合适的位置全部做修改;
- 我们很难从做到复用,假设我们在另外一个页面也需要这个box,那我们就需要把所有跟box相关的部分复制粘贴一份,而当这个box需要修改的时候,我们可能要重新找出所有用到这个box的地方,然后又是复制粘贴一份——当然,有人说这个问题是可以通过一定的方法解决的,我们后面再来讨论这个问题;
……
(欢迎补充css的开发痛点)
事实上我们手打css遇到的问题可以大致归纳为以下几点:
- 选择器繁琐冗长;
- 命名冲突;
- 层级结构不清晰;
- 代码难以复用;
问题很多,怎么去解决?由于css的发展很缓慢,在工具上也一直没有进展,导致这些问题,比如上述的第一点,几乎无解。所以问题往往要依赖“规范”来解决。我们先来看代码复用。
复用
要实现代码复用很简单,我们只需要提供一个公共css库,来存放我们的公共样式以及公共模块即可:
/* common.css */ body { background: #fff; color: #333; font-size: 16px; } .box ... { background: #333; color: #fff; ... } .another-box ... { ... }
然后我们在其他的css文件中引用这个common.css,这样就实现了代码的复用,只要是想全局共享的样式和模块,只要在这里添加进去就可以了。
<!-- index.html --> <!DOCTYPE html> <html> <head> <title>index</title> <link rel="stylesheet" type="text/css" href=http://www.admin10000.com//document/"./style/common.css"> <link rel="stylesheet" type="text/css" href="./style/index.css">......