|
Unobtrusive DOM脚本编程
基于一个优良的可测试的核心创建你的代码和兼容的分发，是Unobtrusive DOM脚本编程的基本概念。编写unobtrusive代码意味着与你的HTML内容的彻底分离：数据来自服务器，而JavaScript代码用来使其动态化。达到这一彻底分离的最重要的副作用就是你的代码在不同的浏览器之间可以完美的升/降级。利用这一点，你可以提供高级的内容给支持它的浏览器，而在不支持的浏览器上从容隐藏之。
编写现代的、Unobtrusive代码包括两个方面：文档对象模型(DOM)和JavaScript事件。本书中我对这两个方面都将作深入的解释。
文档对象模型
DOM是表示XML文档的流行的方法。它未必是最快的、最轻便的、或者最易使用的，却是是最普及的，绝大多数web开发语言（如Java，Perl，PHP，Ruby，Python，及Javascript)都实现了对它的支持。DOM旨在为开发者提供一种直观的方式来导航于XML的层次结构中。
因为有效的HTML只是XML的一个子集，保有一个方式来有效地解析和浏览DOM文档对于简化JavaScript开发来说是必不可少的。从根本上讲，出现在JavaScript中的大多数的交互是发生在JavaScript与页面所包含的不同HTML元素之间的；DOM是使这此过程简单化的卓越工具。程序1-4展示了使用DOM在页内导航和查找不同的元素然后操作它们的一些例子。
程序1-4. 使用文档对象模型定位并操纵不同的DOM元素
[Copy to clipboard] [ - ]
CODE:
<html>
<head>
<title>Introduction to the DOM</title>
<script>
//直到文档完全载入，我们才能操作DOM
window.onload = function() {
//找到文档中所有的<li>元素
var li = document.getElementsByTagName("li");
//然后给它们全部加上边框
for ( var j = 0; j< li.length; j++ ) {
li[j].style.border = "1px solid #000";
}
//定位ID为'everywhere'的元素
var every = document.getElementById( "everywhere" );
//并将它从文档中移除
every.parentNode.removeChild( every );
};
</script>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the DOM is awesome,
here are some:</p>
<ul>
<li id="everywhere">It can be found everywhere.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want,
really quickly.</li>
</ul>
</body>
</html>
DOM是开发Unobtrusive JavaScript代码的第一步。借助简单快速导航HTML文档的能力，所有随之而来的JavaScript/HTML交互将变得如此简单。
事件
事件将一个应用程序之内所有的用户交互结合在一起。在一个设计良好的JavaScript应用程序里，你将拥有数据源和它的视觉的表示(在HTML DOM内部)。为了同步这两个方面，你必须监视用户的交互动作并试图相应地更新用户界面。使用DOM和JavaScript事件的结合是使得现代web应用程序赖以工作的基本组合。
所有的现代浏览器都提供一系列的只要特定交互动作发生即被触发的事件，如用户移动鼠标，敲击键盘，或离开页面等等。使用这些事件，你可以注册代码到特定事件，一旦该事件发生，你的代码就会被执行。程序1-5展示了这种交互的一个实例，该网页中的<li>元素在用户鼠标经过的时候会改变背景色。
程序1-5. 使用DOM和事件来提供一些视觉效果
[Copy to clipboard] [ - ]
CODE:
<html>
<head>
<title>Introduction to the DOM</title>
<script>
//直到文档完全载入，我们才能操作DOM
window.onload = function(){
//查找所有的<li>元素，附以事件处理程序
var li = document.getElementsByTagName("li");
for ( var i = 0; i < li.length; i++ ) {
//将鼠标移入事件处理程序附在<li>元素上，
//该程序改变<li>背景颜色为蓝色
li[i].onmouseover = function() {
this.style.backgroundColor = 'blue';
};
//将鼠标移出事件处理程序附在<li>元素上，
//该程序将<li>的背景颜色改回白色
li[i].onmouseout = function() {
this.style.backgroundColor = 'white';
};
}
};
</script>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the DOM is awesome,
here are some:</p>
<ul>
<li id="everywhere">It can be found everywhere.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want,
really quickly.</li>
</ul>
</body>
</html>
JavaScript事件是复杂多样的。本书中的大多数代码或应用程序都以某种方式利用了事件。第六章和附属Ｂ完全专注于事件及其交互。
JavaScript与CSS
动态HTML建立在DOM和事件交互的基础上。在核心层面上，动态HTML表示发生在JavaScript和附着在DOM元素上的CSS信息的交互。
层叠式样式表(CSS)作为布局的标准服务于简单的不唐突的网页，在最小化了用户端兼容性问题的同时，提供给开发者以强大的可控制性。从根本上讲，动态HTML就是探索JavaScript和CSS彼此交互作用时能够达到什么以及怎样最好地利用该联合达成令人印象深刻的效果。
更高级的交互示例如拖放元素和动画效果见第七章。在那里我将围绕它们展开深入论述。
|
