HTML5网页设计

观点分享

谈谈重构中的模型、模块、组件

时间:2013-03-14 15:01来自:GDC作者:网络点击:
当一个网站的内容越来越多,功能不断的增多,页面不断的增加时,往往会发现代码越来越臃肿,维护起来非常费力,如何将代码有效的组织维护起来就必须认真思考一下了。

当一个网站的内容越来越多,功能不断的增多,页面不断的增加时,往往会发现代码越来越臃肿,维护起来非常费力,如何将代码有效的组织维护起来就必须认真思考一下了。

对于网页重构的模块化也越来越被很多人谈起, 也有越来越多的站点应用模块化的思想进行重构,我们常常在谈论中说到模块化的好处,如:

  • - 代码组织架构清晰
  • - 代码复用度高
  • - 方便移植
  • - 易扩展
  • - 易维护
  • - 等等……

这里也谈一下个人的一些理解。

对于重构中的模块化,个人认为可以从三个点说起,即:

  • - 模型、
  • - 模块、
  • - 组件、

这三者的关系如下图是一个从虚到实,从抽象到具体的一个过程

如何理解这三者呢?

什么是模型?
模型是针对网页中元素的一种简化抽象地理解,通过提取不同内容块之间存在的相同结构,然后即可通过一段基础结构html代码和基本样式css代码构建出来一种结构模型。

如何建立模型?
建立模型也就是提取共性的过程,如下图

左边为优酷页面、中间为土豆页面,右边为腾讯视频,虽然是不同网站的页面版块元素,但它们之间也一样能够提取出相似的结构,至少HTML结构也可以写成这样:

<div class="mod_box box_1">
    <div class="hd">
    	<div class="title"><h2>港台剧热播榜</h2></div>

        <div class="extend"><a href="#">更多排行</a></div>
    </div>
    <div class="bd">
    	<div class="rank">

        	<ol>
            	<li></li>
                ......
        	</ol>
        </div>
    </div>

</div>

<div class="mod_box box_2">
    <div class="hd">
    	<div class="title"><h2>热门话题</h2></div>

        <div class="extend"><a href="#">进入社区</a></div>
    </div>
    <div class="bd">
    	<div class="news">

        	<ul>
            	<li></li>
                ......
        	</ul>
        </div>
    </div>

</div>

<div class="mod_box box_3">
    <div class="hd">
    	<div class="title"><h2>电影热播榜</h2></div>

    </div>
    <div class="bd">
    	<div class="rank">
        	<ul>
            	<li></li>

                ......
        	</ul>
        </div>
    </div>
</div>

看!是不是差不多?差异只是各个版块内容之间多与少,但在代码结构框架上是基本相同的,我们甚至可以根据图中左右两块中的视频排行榜也能够提取出基本模型。

以上的例子主要体现在HTML结构上, 至于样式方面我们仍然可以根据设计提取出各HTML元素样式中的共性,再通过class这个样式接口进行设置。

什么是模块?
前面列出了提取模型的过程,而模块是在一组业务元素按照即定的模型的基础上,在一定程度上进行分解和组合。其特点是:方便组合与扩展

如何组织建立一个模块?

  • - 建立基础模型结构
  • - 建立扩展部件
  • - 设计扩展接口

如上图中这把吉他,从指板到琴箱、琴枕、琴弦等,我们从使用角度出发,找到哪些零件是固定的,哪些零件是可扩展或者是可更换的呢?ok,会玩电箱吉他的同学知道琴箱指板是固定的,而琴弦是可以更换的,同时电箱吉他还有音频接口。

同样,我们在建立一个模块时,在完成基本模型结构后,根据需求制作扩展部件,当然也许作为扩展部件也是独立出来的,如同这把电箱吉他的琴弦跟民谣吉他的琴弦可以通用,同理我们的扩展部件也许会应用在其他模块里,最后就是对于扩展接口的设计了,这个就很考验个人对实际项目应用上的把握了。

这里设计扩展接口的原则:
避免各个部件之间的冲突;
尽量能够适应不同的环境同时不增加冗余设置

组件
在我个人看来属于是结构和样式和功能的结合体,即拥有相对固定的一套界面,使用一套结构样式模块,拥有相应功能接口

特别是一些公共组件,在站点各页面之间要实现方便调用,需要在建立结构模型时认真考量,特别是在ID、class命名方面防止冲突,需要在规划前期形成规范;在样式方面,需要考虑到组件样式的基础环境即reset.css,避免应用到不同页面间因为基础样式的差异导致错乱,常见的失误如:字体,文本颜色,链接颜色之类; 为了方便维护,在代码的组织调用上,可以使用服务器端的HTML片断包含,以及iframe动态嵌入功能页面,最常见的也就是在JS代码中创建HTML代码模板字串,这样确保只在一处修改即应用到所有页面。

关于重构中的模块化应用,这里只是抛出点个人想法,具体在不同的项目中,还有很多值得深入探讨的地方,欢迎大家一起来研究!

当前文章地址:http://www.shejicool.com/web/guandian/425.html

相关文章
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐