模块化设计html,页面模块化实现的条件和基本实现思路

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

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

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

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

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

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

应用网页栅格化来确定网页布局；

页面标题栏，字体大小，文本间距统一；

表单类的表现统一，比如按钮，文本框等；

图片规格统一；

行为类的弹窗，浮层等表现统一；

等等…

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

要合理使用语言化的标签；

可以保存成代码片段或者单独的html文件等，

如果需要可以加上适当的注释；

考虑扩张性和维护性；

再次编写为模块编写统一的css，比如：

要有统一的命名规则(查看鬼哥的命名规则)，当然建议加上模块的命名规则，不过我的建议是在模块的命名规则前加上mode_前缀，例如：

弹出 mode_pop

公共 mode_global,mode_gb

标题 mode_title,mode_tit

提示 mode_hint

菜单 mode_menu

信息 mode_info

预览 mode_pvw

Tips mode_tips

导航 mode_nav

当然你也可以根据你们团队重新命名一套规则；合适的才是最好的

做好基类和拓展类的设计,做好在不同页面模块变化的差异性；比如同一模块在A页面标题的字体是粗体，在B页面标题的字体是细体等等；

将每个模块的css保存成独立的独立的css文件；

如果需要可以加上适当的注释；

考虑扩张性和维护性

接下了为该模块添加行为(js)，编写层面向对象的js，提高代码的复用率等等；

最后审视模块间的耦合问题，比如，留言模块和发日志，填表单都会使用到表单元素，按钮，文本框等，那么我认为我们应该把表单样式作为一个独立的css模块，html和js模块还是在原来的模块中。这需要我们对这些模块归类，从而更好，跟方便的的拼装我们的页面，

html模块可以布局模块和功能模块等，比如

按功能分的功能模块，比如：

日志模块：日志列表，日志详细，日志评论(引用评论模块等等)，日志发布(引用表单模块等等)，日志管理等等

评论模块：评论列表，发表评论(引用表单模块等等)，评论管理等等

相册模块：……

工具条模块：……

……等等；

按布局分的布局模块：比如栅格化中的一堆布局组合；

css模块比较复杂大致的

按类别分的公共模块：重置模块(css reset)，表单模块，字体模块，文字、图片、图文列表模块，弹窗模块，标题模块，提示模块,应用小图标模块等等；这里模块绝大多数作为功能模块的部件，融入在各个模块中；

布局模块和功能模块可以参照html里的功能模块的拆分；

行为js模块可能就相对简单一点,库模块，功能模块等，功能模块可以参照html里的功能模块的拆分；

合理的模块拆分和拼装在实现页面模块化中其中相对重要的作用，模块拆分和拼装的好可以大大的提高开发和维护的效率，反正甚至会影响到网页模块化的成败，给开发和维护带来相对重大的影响。

这样我们就有了网页模块化的基本实现思路，当然这是建立在设计规则上的，如果我们没有完备的设计规则，那么网页模块化就会变成网页魔鬼化，呵呵。

参考文章：