快捷導(dǎo)航

現(xiàn)代 javscript 編程資料第5/6頁

更新時(shí)間：2007年04月09日 00:00:00 作者：

Unobtrusive DOM腳本編程
　　
　　基于一個(gè)優(yōu)良的可測(cè)試的核心創(chuàng)建你的代碼和兼容的分發(fā)，是Unobtrusive DOM腳本編程的基本概念。編寫unobtrusive代碼意味著與你的HTML內(nèi)容的徹底分離：數(shù)據(jù)來自服務(wù)器，而JavaScript代碼用來使其動(dòng)態(tài)化。達(dá)到這一徹底分離的最重要的副作用就是你的代碼在不同的瀏覽器之間可以完美的升/降級(jí)。利用這一點(diǎn)，你可以提供高級(jí)的內(nèi)容給支持它的瀏覽器，而在不支持的瀏覽器上從容隱藏之。
　　編寫現(xiàn)代的、Unobtrusive代碼包括兩個(gè)方面：文檔對(duì)象模型(DOM)和JavaScript事件。本書中我對(duì)這兩個(gè)方面都將作深入的解釋。

　　文檔對(duì)象模型

　　DOM是表示XML文檔的流行的方法。它未必是最快的、最輕便的、或者最易使用的，卻是是最普及的，絕大多數(shù)web開發(fā)語言（如Java，Perl，PHP，Ruby，Python，及Javascript)都實(shí)現(xiàn)了對(duì)它的支持。DOM旨在為開發(fā)者提供一種直觀的方式來導(dǎo)航于XML的層次結(jié)構(gòu)中。
　　因?yàn)橛行У腍TML只是XML的一個(gè)子集，保有一個(gè)方式來有效地解析和瀏覽DOM文檔對(duì)于簡化JavaScript開發(fā)來說是必不可少的。從根本上講，出現(xiàn)在JavaScript中的大多數(shù)的交互是發(fā)生在JavaScript與頁面所包含的不同HTML元素之間的；DOM是使這此過程簡單化的卓越工具。程序1-4展示了使用DOM在頁內(nèi)導(dǎo)航和查找不同的元素然后操作它們的一些例子。

　　程序1-4. 使用文檔對(duì)象模型定位并操縱不同的DOM元素

<html>
<head>
<title>Introduction to the DOM</title>
<script>
//直到文檔完全載入，我們才能操作DOM
window.onload = function() {
  //找到文檔中所有的<li>元素
  var li = document.getElementsByTagName("li");
  //然后給它們?nèi)考由线吙?
  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)視用戶的交互動(dòng)作并試圖相應(yīng)地更新用戶界面。使用DOM和JavaScript事件的結(jié)合是使得現(xiàn)代web應(yīng)用程序賴以工作的基本組合。
　　所有的現(xiàn)代瀏覽器都提供一系列的只要特定交互動(dòng)作發(fā)生即被觸發(fā)的事件，如用戶移動(dòng)鼠標(biāo)，敲擊鍵盤，或離開頁面等等。使用這些事件，你可以注冊(cè)代碼到特定事件，一旦該事件發(fā)生，你的代碼就會(huì)被執(zhí)行。程序1-5展示了這種交互的一個(gè)實(shí)例，該網(wǎng)頁中的<li>元素在用戶鼠標(biāo)經(jīng)過的時(shí)候會(huì)改變背景色。

　　程序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

　　動(dòng)態(tài)HTML建立在DOM和事件交互的基礎(chǔ)上。在核心層面上，動(dòng)態(tài)HTML表示發(fā)生在JavaScript和附著在DOM元素上的CSS信息的交互。
　　層疊式樣式表(CSS)作為布局的標(biāo)準(zhǔn)服務(wù)于簡單的不唐突的網(wǎng)頁，在最小化了用戶端兼容性問題的同時(shí)，提供給開發(fā)者以強(qiáng)大的可控制性。從根本上講，動(dòng)態(tài)HTML就是探索JavaScript和CSS彼此交互作用時(shí)能夠達(dá)到什么以及怎樣最好地利用該聯(lián)合達(dá)成令人印象深刻的效果。
　　更高級(jí)的交互示例如拖放元素和動(dòng)畫效果見第七章。在那里我將圍繞它們展開深入論述。

上一頁 1 2 3 456 下一頁閱讀全文