|
Unobtrusive DOM腳本編程
基于一個(gè)優(yōu)良的可測試的核心創(chuàng)建你的代碼和兼容的分發(fā)，是Unobtrusive DOM腳本編程的基本概念。編寫unobtrusive代碼意味著與你的HTML內(nèi)容的徹底分離：數(shù)據(jù)來自服務(wù)器，而JavaScript代碼用來使其動態(tài)化。達(dá)到這一徹底分離的最重要的副作用就是你的代碼在不同的瀏覽器之間可以完美的升/降級。利用這一點(diǎn)，你可以提供高級的內(nèi)容給支持它的瀏覽器，而在不支持的瀏覽器上從容隱藏之。
編寫現(xiàn)代的、Unobtrusive代碼包括兩個(gè)方面：文檔對象模型(DOM)和JavaScript事件。本書中我對這兩個(gè)方面都將作深入的解釋。
文檔對象模型
DOM是表示XML文檔的流行的方法。它未必是最快的、最輕便的、或者最易使用的，卻是是最普及的，絕大多數(shù)web開發(fā)語言（如Java，Perl，PHP，Ruby，Python，及Javascript)都實(shí)現(xiàn)了對它的支持。DOM旨在為開發(fā)者提供一種直觀的方式來導(dǎo)航于XML的層次結(jié)構(gòu)中。
因?yàn)橛行У腍TML只是XML的一個(gè)子集，保有一個(gè)方式來有效地解析和瀏覽DOM文檔對于簡化JavaScript開發(fā)來說是必不可少的。從根本上講，出現(xiàn)在JavaScript中的大多數(shù)的交互是發(fā)生在JavaScript與頁面所包含的不同HTML元素之間的；DOM是使這此過程簡單化的卓越工具。程序1-4展示了使用DOM在頁內(nèi)導(dǎo)航和查找不同的元素然后操作它們的一些例子。
程序1-4. 使用文檔對象模型定位并操縱不同的DOM元素
<html>
<head>
<title>Introduction to the DOM</title>
<script>
//直到文檔完全載入，我們才能操作DOM
window.onload = function() {
//找到文檔中所有的<li>元素
var li = document.getElementsByTagName("li");
//然后給它們?nèi)考由线吙?br> 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是開發(fā)Unobtrusive JavaScript代碼的第一步。借助簡單快速導(dǎo)航HTML文檔的能力，所有隨之而來的JavaScript/HTML交互將變得如此簡單。
事件
事件將一個(gè)應(yīng)用程序之內(nèi)所有的用戶交互結(jié)合在一起。在一個(gè)設(shè)計(jì)良好的JavaScript應(yīng)用程序里，你將擁有數(shù)據(jù)源和它的視覺的表示(在HTML DOM內(nèi)部)。為了同步這兩個(gè)方面，你必須監(jiān)視用戶的交互動作并試圖相應(yīng)地更新用戶界面。使用DOM和JavaScript事件的結(jié)合是使得現(xiàn)代web應(yīng)用程序賴以工作的基本組合。
所有的現(xiàn)代瀏覽器都提供一系列的只要特定交互動作發(fā)生即被觸發(fā)的事件，如用戶移動鼠標(biāo)，敲擊鍵盤，或離開頁面等等。使用這些事件，你可以注冊代碼到特定事件，一旦該事件發(fā)生，你的代碼就會被執(zhí)行。程序1-5展示了這種交互的一個(gè)實(shí)例，該網(wǎng)頁中的<li>元素在用戶鼠標(biāo)經(jīng)過的時(shí)候會改變背景色。
程序1-5. 使用DOM和事件來提供一些視覺效果
<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++ ) {
//將鼠標(biāo)移入事件處理程序附在<li>元素上，
//該程序改變<li>背景顏色為藍(lán)色
li[i].onmouseover = function() {
this.style.backgroundColor = 'blue';
};
//將鼠標(biāo)移出事件處理程序附在<li>元素上，
//該程序?qū)?lt;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事件是復(fù)雜多樣的。本書中的大多數(shù)代碼或應(yīng)用程序都以某種方式利用了事件。第六章和附屬Ｂ完全專注于事件及其交互。
JavaScript與CSS
動態(tài)HTML建立在DOM和事件交互的基礎(chǔ)上。在核心層面上，動態(tài)HTML表示發(fā)生在JavaScript和附著在DOM元素上的CSS信息的交互。
層疊式樣式表(CSS)作為布局的標(biāo)準(zhǔn)服務(wù)于簡單的不唐突的網(wǎng)頁，在最小化了用戶端兼容性問題的同時(shí)，提供給開發(fā)者以強(qiáng)大的可控制性。從根本上講，動態(tài)HTML就是探索JavaScript和CSS彼此交互作用時(shí)能夠達(dá)到什么以及怎樣最好地利用該聯(lián)合達(dá)成令人印象深刻的效果。
更高級的交互示例如拖放元素和動畫效果見第七章。在那里我將圍繞它們展開深入論述。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 為分發(fā)而進(jìn)行的封裝 下一頁 Ajax
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 5 頁 不唐突的DOM腳本編程
