除了界面上的改變,DreamWeaver CS4作為一個(gè)重要的里程碑版,還有許多更新,諸如:
* 針對(duì) Ajax 和 JavaScript 框架的代碼提示
* Adobe InContext Editing
* HTML 數(shù)據(jù)集
* Subversion? 集成
* CSS 最佳做法等,更多可以查看官方的fetures頁。這里我主要給您介紹一下關(guān)于JavaScript的部分新特性。
是在官方下載了DreamWeaver CS4的PreRelease版來測(cè)試,解壓和安裝沒有什么太多要說的,只是感覺比早先啊的DreamWeaver CS3的安裝速度要快了不少,安裝完畢,發(fā)現(xiàn)界面與之前相比有了一定的改變,如圖(上圖為DreamWeaver CS3,下圖為DreamWeaver CS4):
除了界面上的改變,該版本作為一個(gè)重要的里程碑版,還有許多更新,諸如:
針對(duì) Ajax 和 JavaScript 框架的代碼提示
Adobe InContext Editing
HTML 數(shù)據(jù)集
Subversion? 集成
CSS 最佳做法等,更多可以查看官方的fetures頁。
這里我主要給您介紹一下關(guān)于JavaScript的部分新特性。
一、JavaScript代碼外鏈。
我們知道,出于種種目的考慮,我們一般不在頁面直接撰寫JavaScript代碼,而是將其放在外部的js文件中,這樣做的好處,除了便于管理整個(gè)站點(diǎn)的JavaScript之外,還有助于多多借助客戶端對(duì)js文件的緩存,減少很少改變的js文件的網(wǎng)絡(luò)傳輸流量的浪費(fèi)。
另外,出于多人協(xié)作和便于管理、便于敏捷變化和代碼分層等原因,我們應(yīng)該盡可能的做到結(jié)構(gòu)-表現(xiàn)-行為的分離,在平常的代碼編寫中,你可能大量使用了諸如
<a onclick="alert_me(‘this is a link‘)" href="#">Click to alert me</a>
這樣的代碼,然而,這樣做卻是將行為耦合到了基本的代碼結(jié)構(gòu)中,我們提倡以添加事件的方式來將其完全分離到JavaScript代碼中,這個(gè)操作也可以由DreamWeaver CS4來完成。
在DreamWeaver CS4中,則為我們提供了此功能,這個(gè)功能你可以在【Commands】->【Externalize JavaScript】中找到。
為了測(cè)試這兩項(xiàng)特性,我們撰寫了如下的代碼:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function alert_me(msg)
{
alert(msg);
}
</script>
</head>
<body>
<a href="#" onclick="alert_me(‘this is a link‘)">Click to alert me</a>
</body>
</html>
你可以看到,在這段代碼中,不僅在頁面中出現(xiàn)了JavaScript函數(shù),而且還將行為直接綁定在了HTML標(biāo)簽中,這時(shí)使用【Commands】->【Externalize JavaScript】來打開DreamWeaver CS4為我們提供的工具,你可以看到,有兩個(gè)選項(xiàng),他們分別對(duì)應(yīng)了只將頁面中的JavaScript代碼塊分離為外部文件和與此同時(shí)分離HTML代碼中的JavaScript,如
我們選擇”Externalize JavaScript and attach unobtrusively”,即同時(shí)完成代碼塊和標(biāo)簽中代碼的分離,命令執(zhí)行完成后,頁面的代碼
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Untitled-15.js" type="text/javascript"></script>
</head>
<body>
<a href="#" id="a1">Click to alert me</a>
</body>
</html>
這樣,就自動(dòng)化的完成了相應(yīng)的工作。|||
二、JavaScript代碼提示
一直以來,開發(fā)JavaScript沒有特別順手的IDE,Aptana算是一款基于Ecplise的JavaScript開發(fā)工具,提供了代碼高亮和代碼提示功能,如今,DreamWeaver CS4也提供了此功能,當(dāng)我們構(gòu)建JavaScript內(nèi)置對(duì)象時(shí),它已經(jīng)可以進(jìn)行代碼提示了,如
除此以外,DreamWeaver CS4 還提供了對(duì)代碼錯(cuò)誤的提示,當(dāng)代碼出現(xiàn)錯(cuò)誤,將在窗口頂端有一個(gè)黃色的提示條,同時(shí)在代碼左側(cè)行號(hào)處標(biāo)識(shí),如
三、對(duì)第三方JavaScript庫的支持
上面提到的Aptana同時(shí)提供對(duì)多種JavaScript的第三方類庫,如Prototype、jQuery、YUI、ExtJS等的支持,DreamWeaver CS4也同樣提供了,我們首先引入一個(gè)Prototype庫,然后通過輸入new Ajax.,試圖構(gòu)建一個(gè)Ajax的應(yīng)用,此時(shí)DreamWeave CS4給出了Ajax類成員方法的代碼提示,如
北京 | 天津 | 上海 | 江蘇 | 山東 |
安徽 | 浙江 | 江西 | 福建 | 深圳 |
廣東 | 河北 | 湖南 | 廣西 | 河南 |
海南 | 湖北 | 四川 | 重慶 | 云南 |
貴州 | 西藏 | 新疆 | 陜西 | 山西 |
寧夏 | 甘肅 | 青海 | 遼寧 | 吉林 |
黑龍江 | 內(nèi)蒙古 |