登录论坛
|
注册会员
设为首页
|
收藏本站
当前位置 :
首页
>
软件学院
>
程序开发
>
网页设计
>正文
DW CS4 JavaScript的部分新特性
http://www.dbit.cn
2008/10/8 9:28:42
来源:
东北IT网
编辑:叶子
除了界面上的改变,DreamWeaver CS4作为一个重要的里程碑版,还有许多更新,诸如:
* 针对 Ajax 和 JavaScript 框架的代码提示
* Adobe InContext Editing
* HTML 数据集
* Subversionreg; 集成
* CSS 最佳做法等,更多可以查看官方的fetures页。这里我主要给您介绍一下关于JavaScript的部分新特性。
是在官方下载了DreamWeaver CS4的PreRelease版来测试,解压和安装没有什么太多要说的,只是感觉比早先啊的DreamWeaver CS3的安装速度要快了不少,安装完毕,发现界面与之前相比有了一定的改变,如图(上图为DreamWeaver CS3,下图为DreamWeaver CS4):
除了界面上的改变,该版本作为一个重要的里程碑版,还有许多更新,诸如:
针对 Ajax 和 JavaScript 框架的代码提示
Adobe InContext Editing
HTML 数据集
Subversionreg; 集成
CSS 最佳做法等,更多可以查看官方的fetures页。
这里我主要给您介绍一下关于JavaScript的部分新特性。
一、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
页,当前在第
1
页
1
2
【
收藏
】【
打印
】【
进入论坛
】
相关文章:
·
广告主称谷歌AdWords存在大量无效广告点击
·
奥图码DW674特价促销
·
DW翻译器没有被装载错误的解决
·
DW源代码视图按空格代码提示消失
·
DW扩展Web开发jQuery UI接口框架
·
DW CS3中Spry详细区域功能的解说
·
DreamweaverCS4新增相关功能介绍
·
如何在DW中编写CSS
·
2003下无法安装Photoshop CS4的解决
·
Adobe Photoshop CS4最新功能概览
·
Photoshop CS4值得一提的新特点
最新文章
抢先苹果,消息称英特尔芯片采用台积电
三星揭晓业内首款单条 512GB DDR5 内存
vivo 高端新机爆料:120Hz 曲面屏 + 天
vivo Y21 在印度正式上市:Helio P35 芯
微星推出 GeForce RTX 3080 Sea Hawk X
消息称三星 Galaxy Tab S8 系列平板将放
机械革命推出 F6 轻薄本:16 英寸全面屏
英特尔 12 代 Alder Lake CPU 600 系列
雷军:向小米手机 1 首批用户每人赠送价
小米李明谈用户被踢出 MIUI 测试版:大
推荐文章
1
2
3
4
5
6
7
8
9
10
叛逆嫩模性感写真
宫如敏不雅照疯传 看张馨予韩一菲兽兽谁
不惧孔子抢位 阿凡达游戏影音配置推荐
2015第十七届“东北安博会”火爆招商
第十六届东北国际公共安全防范产品博览
2016年第五届中国国际商业信息化博览会
2016年第五届中国国际POS机及相关设备展
互联网电视熟了吗 2013最火电视深解析
桑达获邀出席2015中国(广州)国际POS机
宝获利报名参加“2015年度中国POS机行业
八卦图解
More>>
叛逆嫩模性感写真
宫如敏不雅照疯传 看张馨予韩一菲
周伟童魔鬼身材日本性感写真图
联想V360笔记本模特写真