控件化HTML结构 Part 1

很长时间没有写过总结或技术贴了。最近时不时的在做一些原型，想把自己的经验记录一下。

Web Application大行其道。Silverlight和Flash始终无法赶上Web应用的脚步，不少框架和库，如jQuery，EXT都有着非常漂亮的设计思路来帮助大家快速开发Web应用，有的甚至不需要写一行HTML代码就能够搭建Web应用。在Web应用普及的今天，HTML该如何才能更好的应对越来越快速的开发呢？其实一些在RIA中的设计思想可以为现在的Web开发建立一些良好的指导与规范。

从这个例子开始。一个Button结构我们一般会怎做？大部分会是这个样子：

<div class=”simpleBtn”>Click Me</div>

然后我们会有可能数行的CSS代码来描述这个按钮的样式，这样做可以吗？当然。但是在结构化的HTML及Web应用的今天，太过具体的设计造成未来无法复用。如果这个按钮要求有纯文字，另一个按钮要求有图标。是不是得分别处理二个呢？

我简化了一个Silverlight中的按钮控件来看看他是怎么做：

<Button>
	<Grid>
		<Border>
			<Border x:Name="BackgroundAnimation"/>
			<Rectangle x:Name="BackGroundGradient">
				<LinearGradientBrush />
			</Rectangle>
		</Border>
		<Content Presenter/>
		<Rectangle x:Name="DisabledVisualElement"/>
		<Rectangle x:Name="FocusVisualElement"/>
	</Grid>
</Button>

在大部分RIA框架中，控件的设计思想就是为了复用与继承。比如这个Button控件，最终展示的内容，由Content Presenter这个对象来决定。他是文字或是图片，与按钮本身无关，按钮本身的目标就是把这个内容展示出来而已。而有关按钮的样式，由另一个对象组叫Border来决定。这样内容与样式也有对象上的分离。而其它二个Rectangle分别命名为DisabledVisualElement和FocusVisualElement大家一看也能明白，就是Disable和Focus的样式。也与内容本身有了分离，方便未来在不同的状态下调用。那么最终应用时可能会是这个样子：

<button Content="Click Me" Border="2" Background="Silver"/>

可以注意到。其实在这里的Border及Background有点像我们的CSS行间样式。在以前的CSS实践中，我们不太推荐使用行间样式，但是换回一些RIA的开发思路来看，无论是行间还是可复用的样式，都是比较通用的做法。没有人能写出绝对完美的，无垃圾代码的应用，按需使用就好。

那么，现在看看如何应用这种设计模式，来设计一个HTML/CSS的按钮呢？

<div class="C-SimpleButton" style="width:200px;height:50px;">
	<div class="C-Grid">
    	<div class="background"/>
        </div>
         <div class="C-ContentPresenter">Click Me</div>
    </div>
</div>

一个模仿Silverlight Button的HTML结构，其中Style中指定了一个行间样式让这个按钮在画面中有个默认大小。CSS样式我就不贴了，通过这个结构也能看出未来将如何来定义这个样式。

当然，我们没有办法像Silverlight一样用一个<Button/>就顺利的应用这个控件（方法也有，就是封装成JS）。但这样的规范当我们有效的建立之后，我们只需要关心将什么内容放入到<div class=”C-ContentPresentor”>节点。里面可以是一个文字，甚至可以是另一个控件。当我们的控件积累到一定量的时候，我们在搭建一个Web应用的方式，如同搭积木一样互相嵌套。控件的可读性更强，由于语义化了这个元素的结构，也使得这个控件更容易被JS来控制。

有人会问，这样做是不是在牺牲性能换语义结构？的确有这样的可能性，但是现在的在浏览器已经发展到了更高级的版本。每一年的新版本在性能上比上一代都有近50%甚至200%的提升，这种HTML结构上的解析运算量还不足以影响浏览器的性能。

其实语义化HTML结构并不新鲜，如果有兴趣，可以多翻看一下Gmail或是其它Web应用的源代码，几乎已经嵌套到了上百级的DIV结构。其目的只有一个，更有效，更快速的构建Web应用。

This entry was written by allan, posted on August 18, 2010 at 10:55 am, filed under Front End, HTML5. Bookmark the permalink. Follow any comments here with the RSS feed for this post.