日期：2009-10-01 01:33:00 来源：本站整理

Dreamweaver CS4 JavaScript的部份新特点[DW设计]

赞助商链接

分享到： QQ空间新浪微博腾讯微博人人网

本文“Dreamweaver CS4 JavaScript的部份新特点[DW设计]”是由七道奇为您精心收集，来源于网络转载，文章版权归文章作者所有，本站不对其观点以及内容做任何评价，请读者自行判断，以下是其具体内容：

除了界面上的改变,DreamWeaver CS4作为一个重要的里程碑版,还有很多更新,诸如:
　　* 针对 Ajax 和 JavaScript 框架的代码提醒
　　* Adobe InContext Editing
　　* HTML 数据集
　　* Subversion® 集成
　　* CSS 最佳做法等,更多可以查看官方的fetures页.这里我主要给您介绍一下关于JavaScript的部份新特点.

　　是在官方下载了DreamWeaver CS4的PreRelease版来测试,解压和安装没有什么太多要说的,只是感受比早先啊的DreamWeaver CS3的安装速度要快了不少,安装完毕,发现界面与之前相比有了一定的改变,如图（上图为DreamWeaver CS3,下图为DreamWeaver CS4）:

除了界面上的改变,该版本作为一个重要的里程碑版,还有很多更新,诸如:

　　针对 Ajax 和 JavaScript 框架的代码提醒
　　Adobe InContext Editing
　　HTML 数据集
　　Subversion® 集成
　　CSS 最佳做法等,更多可以查看官方的fetures页.

　　这里我主要给您介绍一下关于JavaScript的部份新特点.

　　1、JavaScript代码外链.

　　我们知道,出于各种目的考虑,我们普通不在页面直接撰写JavaScript代码,而是将其放在外部的js文件中,这样做的好处,除了便于管理整个站点的JavaScript之外,还有助于多多借助客户端对js文件的缓存,削减很少改变的js文件的网络传输流量的浪费.

　　别的,出于多人合作和便于管理、便于矫捷改变和代码分层等缘由,我们应当尽大概的做到构造-表现-行为的别离,在普通的代码编写中,你大概大量利用了诸如

<a onclick="alert_me('this is a link')" href="#">Click to alert me</a>

　　这样的代码,但是,这样做倒是将行为耦合到了基本的代码构造中,我们倡导以增添事件的方法来将其完好别离到JavaScript代码中,这个操作也可以由DreamWeaver CS4来完成.

　　在DreamWeaver CS4中,则为我们供应了此功效,这个功效你可以在【Commands】->【Externalize JavaScript】中找到.

　　为了测试这两项特点,我们撰写了以下的代码:

< !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>

　　你可以看到,在这段代码中,不但在页面中呈现了JavaScript函数,并且还将行为直接绑定在了HTML标签中,这时利用【Commands】->【Externalize JavaScript】来翻开DreamWeaver CS4为我们供应的工具,你可以看到,有两个选项,他们辨别对应了只将页面中的JavaScript代码块别离为外部文件和与此同时别离HTML代码中的JavaScript,如图:

我们挑选”Externalize JavaScript and attach unobtrusively”,即同时完成代码块和标签中代码的别离,号令履行完成后,页面的代码以下:

< !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" _fcksavedurl=""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>

　　这样,就自动化的完成了呼应的工作.

　　2、JavaScript代码提醒

　　一向以来,开辟JavaScript没有分外顺手的IDE,Aptana算是一款基于Ecplise的JavaScript开辟工具,供应了代码高亮和代码提醒功效,目前,DreamWeaver CS4也供应了此功效,当我们构建JavaScript内置对象时,它已经可以举行代码提醒了,如图:

　　除此以外,DreamWeaver CS4 还供应了对代码错误的提醒,现代码呈现错误,将在窗口顶端有一个黄色的提醒条,同时在代码左侧行号处标识,如图:

　　3、对第三方JavaScript库的支持

　　上面提到的Aptana同时供应对多种JavaScript的第三方类库,如Prototype、jQuery、YUI、ExtJS等的支持,DreamWeaver CS4也一样供应了,我们首先引入一个Prototype库,然后通过输入new Ajax.,试图构建一个Ajax的利用,此时DreamWeave CS4给出了Ajax类成员办法的代码提醒,如图: