我们通常把CSS从XHMTL文档中分离出来，那么我们也应该将JavaScript分离到外部文件中，对于CSS，你可以通过在标签上使用style属性把CSS应用到DOM对象，但是，我们往往会将嵌入式的JavaScript代码随意丢弃在文档中,现在，我们要停止这种做法了，我们要将JavaScript遵循与CSS相同的分离规则(如果要细分的话，我们可以把CSS理解为表现，HTML理解为结构，JavaScript理解为行为，我们的原则是把这三个都分离开来，不过这得依托于浏览器的兼容。到这里，对于本文的标题就好理解了，把行为从结构中分离出来，也就是说把JavaScript从HTML中隔离开来，形成一个单独的模块)，在这里，我们把行为与结构相分离称为“不唐突的JavaScript”(Unobtrusive JavaScript)，例如:jQuery
第一种：把嵌入式脚本与其他标记混合在一起添加到body标签中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline JavaScript</title>
</head>
<body>
<h1>Inline Example</h1>
<script type="text/javascript">
//JavaScript代码
</script>
</body>
</html>
这种方式不仅反复展开代码，而且导致不必要的代码复制
第二种:把嵌入式脚本添加到文档的<head>元素中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Head JavaScript</title>
<script type="text/javascript">
//JavaScript代码
</script>
</head>
<body>
<h1>Head Example</h1>
</body>
</html>
这种方式似乎相对于第一种好一点，但任然混合了结构和行为
第三种:通过使用外部源文件来包含JavaScript脚本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>External File JavaScript</title>
<script type="text/javascript" src="source.js"></script>
</head>
<body>
<h1>External File Example</h1>
</body>
</html>
请遵循这样一种准则，就是在任何情况下，都要把全部脚本包含在一个外部源文件中，来保证行为和结构完全分离(不存在无法将全部脚本放到源文件中的情况)，从今天开始这样做吧，请重新审视你的代码，使用外部文件的另一个好处就是较少了整个页面的大小，因为，他们通常会被客户的Web浏览器缓存起来，并且只下载一次，从而较少了每个后续页面的加载时间。
让我们开始从HTML中移除事件处理程序，这在一定程度上会改变你的开发思想
http://www.huddletogether.com的Lokesh Dhakar编写的Lightbox JS。这是个图像查看解决方案，堪称是行为与结构分离的典范
《AdvancED DOM Scripting Dynamic Web Design Techniques》
分享到：
相关推荐
例如，开发者不应该认为JavaScript在所有用户的浏览器中都是启用状态，而应该提供一个基本的非JavaScript版本的内容，当JavaScript不可用时用户仍然能够访问。此外，开发者应避免对HTML代码的结构和正确性做过多假设...
“mvc非唐突ajax示例项目”这个标题表明这是一个关于使用MVC（Model-View-Controller）架构的Web应用示例，它着重于如何在不打断用户界面流程的情况下，通过Ajax（Asynchronous JavaScript and XML）技术进行数据...
1.1 不唐突和渐进增强 1.2 让JavaScript运行起来 1.2.1 把行为从结构中分离出来 1.2.2 不要版本检测 1.2.3 通过平稳退化保证可访问性 1.2.4 为重用命名空间而进行规划 1.2.5 通过...
1.1 不唐突和渐进增强 1.2 让JavaScript运行起来 1.2.1 把行为从结构中分离出来 1.2.2 不要版本检测 1.2.3 通过平稳退化保证可访问性 1.2.4 为重用命名空间而进行规划 1.2.5 通过...
1.1 不唐突和渐进增强 1.2 让JavaScript运行起来 1.2.1 把行为从结构中分离出来 1.2.2 不要版本检测 1.2.3 通过平稳退化保证可访问性 1.2.4 为重用命名空间而进行规划 1.2.5 通过...
一个极简主义者pnut。输入输出端 Pnut.io社交网络的WebExtensions客户端。 需要一个帐户。 亚伯拉罕的继承权用于App.net，但适用于Pnut！ 当前功能*从URL栏中发布到您的流中*从URL栏中查找个人资料*从URL栏中查找#...
- **不唐突的JavaScript**：为了保持HTML文档的良好结构，推荐将JavaScript代码从HTML文档中分离出来。一种做法是将脚本放置于`<head>`标签内或页面底部（即`</body>`和`</html>`标签之间）。这种做法虽然可能对性能...
(举止、言谈等)唐突的 absence n. 缺席,不在场;缺乏,没有 absent a.(from)缺席,不在场;漫不经心的 absolute a. 绝对的,完全的 absorb v. 吸收; 吸引,使专心 abstract a. 抽象的n. 摘要,提要v. 提(抽)取 absurd...
在测试用户界面时，测试人员要考虑以下问题：用户界面是否洁净、不唐突、不拥挤？UI的组织和布局合理吗？是否允许用户轻松地从一个功能转到另一个功能？有多余的功能吗？软件整体抑或局部是否做得太多？是否有太多...
同时，还会介绍如何以不唐突的方式添加事件（甚至在页面加载完成之前）。此外，这一章还将深入更高级的主题，例如事件冒泡、委托和命名空间。 第4章介绍通过jQuery实现动画的技术，我们将学会隐藏、显示和移动页面...
在这个栏目中，新浪采用了两个滚动动画，点击左右箭头，图片可以一张张切换，切换得一点都不“唐突”，这就是jquery的功能了。像这样的动画，很常见，之前我在腾讯的女性频道上也做过此类的滚动动画。可惜有点遗憾，...
例如，"鉴诫"应为"鉴戒"，"搪突"应为"唐突"，"敬效尤"应为"儆效尤"，"卫戌"应为"卫戍"，"再接再励"应为"再接再厉"，"入不敷出"的"敷"不应写成"付"，"幅员辽阔"的"幅"不应写成"副"，"文过饰非"的"饰"不应写成"试"等。...
A a(an) art. 一，一个，每个；(同类事物中 的)任何一个 abandon n....v....抛弃；...abbreviate vt....abbreviation n....（举 止、言谈等）唐突的；鲁莽的 absence n. 缺席，不在；缺席的时间，外出期；缺乏，不存在
3. abrupt (突然的, 唐突的): 描述事情发生的快速和无预警，或者人的行为举止直接而不客气，例如"Your abrupt manner embarrassed her!" 意为“你唐突的态度让她很尴尬！” 4. absurd (荒唐的): 用于形容不合理或...
得体则是指语言要符合语境和交际规范，不唐突，不冒犯；准确意味着用词恰当，表达精确无误；鲜明指的是表达要具有辨识度，让读者印象深刻；生动则要求语言富有感染力，能够引起读者的情感共鸣。 2. **高考题型分析*...
在询问客人饮料需求时，应以礼貌且不唐突的方式提出；而在公司会议上，董事长和总经理的座次通常按照职位高低来安排，董事长通常居中，总经理在其一侧。 商务礼仪的作用不可忽视。它能提升个人素质，符合现代企业...
突然的, 唐突的：形容词，常用来形容行为、态度或事件的突然发生，或语言表达的直接不礼貌。 4. absurd a. 荒唐的：形容词，表示某事不合理、荒谬或不符合逻辑。 5. accessory n. 附件, 零件：名词，指配件、附属品...
1. abnormal (不正常的): 用来描述偏离常规或标准的状态，如"I’m normal, you’re abnormal!"，表示“我是正常的，你是不正常的”。 2. abolish (废除): 用于表示取消或废止某项制度或规定，如"CET-Band 4 should ...
14. 常见字词的正确拼写：“饿殍”、“唐突”、“贸然”、“振聋发聩”均是常用词汇，要求考生熟悉并能正确书写。 15. 错误辨析：“再接再厉”中的“励”常被误写为“历”，“代价而沽”应为“待价而沽”，“食不裹...