最近评论
正在载入评论列表...
目前我们做到了页面设计师可以开发页面的外观，而不需要触动代码。然而，正如现在显示的，应用的一些功能（即键的顺序）仍然嵌入在HTML中。每一个键定义为一个独立的DIV标签，页面设计师可能会无意中删除一些内容。
如果键的顺序是业务领域功能，而不是页面设计问题——这一点也许会有争议——那么应该可以采用编程方式为组件生成一些DOM，而不是在HTML中声明它。更进一步，我们可能想要在一个页面上有多个相同类型的组件。例如，如果不希望页面设计师修改键盘上键的顺序，我们可以简单地规定，为一个DIV标签分配keyboard类并且在初始化代码中找到它，然后采用编程方式添加键。代码清单4-4显示了为达到这个目的而修改过的JavaScript。
代码清单4-4 musical_dyn_keys.js
之前，我们在HTML中定义了键的顺序，现在将它定义为一个全局JavaScript数组。assign- Keys()方法检查文档中所有的顶级DIV标签，查看className是否包含了值musicalKeys。如果包含了，尝试使用makeKeyboard()函数将DIV组装在一个工作键盘上。makeKeyboard()简单地创建新的DOM节点，然后使用与代码清单4-4相同的方式对它所遇到的已声明DOM节点进行处理。playNote()回调处理函数的操作和以前完全一样。
因为我们将空的DIV与键盘控件组装在一起，所以添加另外一套键是很简单的，如代码清单4-5演示的那样。
代码清单4-5 musical_dyn_keys.html
<!DOCTYPE html
PUBLIC "-//W
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<title>Two Keyboards</title>
<head>
<link rel='stylesheet' type='text/css'
href='musical_dyn_keys.css'/>
<script type='text/javascript'
src='musical_dyn_keys.js'>
</script>
<script type='text/javascript'>
window.onload=assignKeys;
</script>
</head>
<body>
<div id='keyboard-top' class='toplong musicalKeys'></div>
<div id='keyboard-side' class='sidebar musicalKeys'></div>
<div id='console' class='console'>
</div>
</body>
</html>
添加第二个键盘只需要一行操作。因为我们不希望它们一个摞在另一个的上面，我们将位置的样式从musicalKeys样式类中移到一个独立的类中。样式表的修改显示在代码清单4-6中。
代码清单4-6 musical_dyn_keys.css的修改
musicalKeys类定义了对于所有键盘通用的视觉样式。toplong和sidebar简单地定义了每一个键盘的几何形状。
通过以这种方式重构键盘的例子，使得轻松地重用代码成为可能。然而，键盘设计部分定义在JavaScript中，即代码清单4-4中的makeKeyboard()函数内。正如图4-5所示，一个键盘是垂直布局，另外一个是水平布局。我们如何达到这种效果的呢？
makeKeyboard()可以采用编程方式定位和放置每个按钮，轻松地计算DIV的尺寸。但是在这种情况下，我们必须要为一些琐事而烦心，例如需要确定DIV是垂直的还是水平的，并且需要编写自己的布局代码。对于一名熟悉LayoutManager对象内部机制的Java GUI程序员，这似乎是明显应该采取的方法。如果采取了这个方法，程序员将会就UI组件的外观与页面设计师发生分歧，继而产生麻烦。
就像它所显示的，makeKeyboard()仅仅修改了文档的结构。键由浏览器自己的布局引擎来布局，通过样式表来控制——在这里是使用float样式属性。布局由页面设计师来控制是很重要的。逻辑和视图保持分离，给我们带来了和平共处。
图4-5 已修改的音乐键盘程序允许页面设计师指定多个键盘。使用基于CSS的样式设置和本地呈现引擎，可以同时提供垂直布局和水平布局，而不需要在JavaScript中编写外部的布局代码
键盘是一个相当简单的UI组件。在一个更大的、更复杂的UI组件（例如树形表格）中，搞清楚如何强迫浏览器自己的呈现引擎做这个布局就更加困难了，并且在某些场合，以编程方式设置样式是不可避免的。然而，为了保持视图和逻辑分离，提出如何避免用JavaScript代码做布局，而用浏览器的呈现引擎做布局的问题总是值得的。浏览器的呈现引擎是一段高效、快速和经过良好测试的本地代码，有可能击败我们自己开发的任何JavaScript算法。
这些就是目前关于视图的内容。在下一节中，我们将探索MVC中控制器的角色，以及它如何在Ajax应用中与JavaScript事件处理函数相关联。
图书导读
