WEB前端开发

页面模块化实现的很大的受制于页面的结构和表现；一个统一的页面结构和表现能很好的实现页面的模块话。

比如一个“网友评论”模块这个会在很多地方使用到，比如日志，照片，等等，如果这个“网友评论”模块结果和表现是统一的那么我们就不用重复劳动去重新设计制作页面甚至是行为等等，包括后台的数据存贮。

《页面模块化（设想）》上面总结了页面模块化的优点，《前端模块化设计思路》也提到要做到模块化的前提条件：

为了做到这一点，我们需要有一个设计规则，所有的模块都在这个规则下进 行设计。良好的设计规则，会把耦合密集的设计参数进行归类作为一个模块，并以此划分工作任务。而模块之间彼此通过一个固定的接口（所谓的可见参数）进行交互，除此之外的内部实现（所谓的隐参数）则由模块的开发团队进行自由发挥。

我们应给怎么样建立一套设计规则呢？

首先我们要从页面的表现开始，视觉上我们要采用统一的视觉设计规则，比如：

1. 应用网页栅格化来确定网页布局；
2. 页面标题栏，字体大小，文本间距统一；
3. 表单类的表现统一，比如按钮，文本框等；
4. 图片规格统一；
5. 行为类的弹窗，浮层等表现统一；
6. 等等…

其次为模块编写统一的html结构，

1. 要合理使用语言化的标签；
2. 可以保存成代码片段或者单独的html文件等，
3. 如果需要可以加上适当的注释；
4. 考虑扩张性和维护性；

继续阅读：页面模块化实现的条件和基本实现思路»

这段时间做一个项目，其实项目本身很简单，页面表现和结构甚至是交互都是现有的，就是将现有的多个项目页面一些功能做一下重新的拼装组合。

看上去很简单，其实做起来非常痛苦。因为由于历史和前期项目开发的原因其实做这些拼装是很痛苦的事情。现在碰到的一个问题，要开一个C项目，使用A项目的头部、底部、布局，使用B项目的模块功能，同时A项目和B项目本身存在这千丝万缕的联系，很多功能A项目和B项目功能是重叠的，表现上又是很统一、但是又有细微的区别。A项目和B项目都相对独立，css样式也是很独立的，根据每个项目都有一套独立的样式。结果导致在项目维护中A项目改了，B项目也要改，得改2个地方不说。现在有出来一个C项目，又是A项目和B项目合体……，开发时候一些公用样式受到A项目和B项目影响，无法公用不说，维护成本可想而知。这个几乎让我崩溃。

如何既能提高开发效率又能降低维护成本是最为一个前端开发工程师必须考虑的问题。正好前几天程序员和我讨论模板的问题，因为他们在开发C项目的时候也碰到了很多和我类似的问题。模板就是将页面的某部分分装成独立的版块，便于各个使用他的地方调用。那么我们的html和css可不可以按照功能模块或者展现模块来划分呢？答案显然是肯定的，至少在我们公司、我们网站由于页面表现和功能模块比较统一，这无疑给页面模块化提供了很好的萌芽环境。 继续阅读：页面模块化（设想）»