PHP知识、源码、教程、框架、程序分享! -- PHP社区 关于我们 联系我们 联系电话 联系QQ

在html代码结构中如何以正确的方式包含JavaScrip

发表时间:2013-08-18 点击:

[本文摘要]:在html代码结构中如何以正确的方式包含JavaScript 可以通过几种不同的方式把JavaScript代码添加到Web应用程序中。你可能见到过或者用过所有这些方法,但这些方法并不都是可取的。我不想...

在html代码结构中如何以正确的方式包含JavaScript

可以通过几种不同的方式把JavaScript代码添加到Web应用程序中。你可能见到过或者用过所有这些方法,但这些方法并不都是可取的。我不想从一开始就误导你,所以在犹豫要不要向你展示这些方法。然而,只有如此我们才能同步前进。下面我会分别列举每一种方法并指出一些问题。

首先,可以把嵌入式脚本与其他标记混合在一起添加到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>

但是,这样在你的行为增强代码和结构化标记之间无法实现任何程度的分离。这种方式不仅需要反复地展开代码,而且也经常会导致不必要的代码复制。    聪明的读者可能会注意到,我没有为了对非常老的浏览嚣或XML解析程序隐藏JavaScript代码,而在script标签中添加任何典型的注释标签,如:<!--和//-->或者<!--//--><![CDATA[//><!--和//--><!]]>。如果在这个文档的<body>之间使用嵌入的JavaScript,那么你就可能陷入到注释和不注释的争论中。要不然,你也可以采纳我的建议而完全忽略嵌入的脚本。因此,我不会为了解释这些注释标签而把内容搞复杂,嵌入式JavaScript唯一有用的时候,就是使用document.write()方法在相应的位置直接修改页面内容。

但是,要修改页面内容还有更好的方案,这一点将在本书后面介绍。

其次,可以把嵌入式脚本添加到文档的<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>Inline JavaScript</title>
    <script type="text/javascript">
        //JavaScript代码
    </script>
</head>
<body>
    <h1>Inline 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>Inline JavaScript</title>
<script type="text/javascript" src="source.js"></script>
</head>
<body>
    <h1>Inline Example</h1>
</body>
</html>

这种方式始终是正确的,也是最好的。作为一条通用的规则,多数人会说任何不直接向文档中写入内容的脚本(使用document.write()方法)都应该放在标记代码的<head>元素中。

虽然这也没错,但我认为还要考虑得更深远一些。无论什么时候,没错,就是在任何情况下,都要把全部脚本包含在一个外部源文件中。就当你从来没有见过前两种方法,事实上,最好假定它们不存在。如果你的标记中有任何JavaScript代码,都应该转回头来把它们移走,以保证行为和结构完全分离(不存在无法将全部脚本放到源文件中的情况),而且这样做还会带来诸多好处。你会因此强迫自己重新考虑如何着手创建函数和对象:是创建可重用的、适应性强的代码来保持程序简单和可维护呢?还是创建相同逻辑的定制副本把事情搞复杂呢?外部文件提供的另一个好处就是减少整个页面的大小。它们通常会被客户的Web浏览器缓存起来,并且只下载一次,从而减少了每个后续页面的加载时间。

你需要跨越的唯一真正差别,就是你所钟爱的document.write()方法可能不会再取得预期的结果。然而,因为这是一本有关DOM脚本编程的书,我们将会使用常规的和不针对特定浏览器(browser-agnostic)的DOM方法,你最终将会发现使用createElement()和appendChild()这样的DOM方法,或者非官方的innerHTML属性其实更加游刃有余——不过,这些我们会在后面再讨论。

版权声明:本文系技术人员研究整理的智慧结晶,转载勿用于商业用途,并保留本文链接,侵权必究!

本文链接:http://php.aixc.cn/web/js/8.html

声明:本站技术及源码均为原创,转载请勿用于商业用途,并注明出处及原文链接,侵权必究。