通过将 JavaScript 移动到外部文件来改进网页

开发 前端
将 JavaScript 直接放入包含网页 HTML 的文件中非常适合在学习 JavaScript 时使用的短脚本。

将 JavaScript 直接放入包含网页 HTML 的文件中非常适合在学习 JavaScript 时使用的短脚本。

但是,当你开始创建脚本来为你的网页提供重要功能时,JavaScript 的数量可能会变得非常大,并且将这些大型脚本直接包含在网页中会带来两个问题:如果 JavaScript 占据了页面内容的大部分,它可能会影响你的页面在各种搜索引擎中的排名。这降低了使用关键字和短语来识别内容的频率;这使得在你网站的多个页面上重用相同的 JavaScript 功能变得更加困难。每次你想在不同的页面上使用它时,你都需要将其复制并插入到每个附加页面中,以及新位置所需的任何更改。

如果我们让 JavaScript 独立于使用它的网页会更好。

选择要移动的 JavaScript 代码

幸运的是,HTML 和 JavaScript 的开发者已经为这个问题提供了解决方案。我们可以将我们的 JavaScript 移出网页,但仍保持其功能完全相同。

我们需要做的第一件事是在使用它的页面外部创建 JavaScript 代码,即选择实际的 JavaScript 代码本身(不包括周围的 HTML 脚本标签)并将其复制到单独的文件中。

例如,如果以下脚本在我们的页面上,我们将选择并复制粗体部分:

<script type="text/javascript">
var hello = 'Hello World';
document.write(hello);
</script>

曾经有一种做法是将 JavaScript 放在 HTML 文档中的注释标记内,以阻止旧版浏览器显示代码; 但是,新的 HTML 标准规定浏览器应该自动将 HTML 注释标签内的代码视为注释,这会导致浏览器忽略你的 Javascript。

如果你从其他人那里继承了带有注释标签内的 JavaScript 的 HTML 页面,那么你不需要在你选择和复制的 JavaScript 代码中包含这些标签。

例如,你将只复制粗体代码,省略以下代码示例中的 HTML 注释标记 :

<script type="text/javascript"><!--
var hello = 'Hello World';
document.write(hello);
// --></script>

将 JavaScript 代码保存为文件

选择要移动的 JavaScript 代码后,将其粘贴到新文件中。为文件命名,以暗示脚本的作用或标识脚本所属的页面。

给文件一个 .js 后缀,以便你知道该文件包含 JavaScript。例如,我们可以使用 hello.js 作为保存上例中的 JavaScript 的文件名。

链接到外部脚本

现在我们已经将我们的 JavaScript 复制并保存到一个单独的文件中,我们需要做的就是在我们的 HTML 网页文档中引用外部脚本文件。

首先,删除脚本标签之间的所有内容:

<script type="text/javascript">
</script>

这还没有告诉页面运行什么 JavaScript,所以我们接下来需要向 script 标签本身添加一个额外的属性,告诉浏览器在哪里可以找到脚本。

我们的示例现在看起来像这样:

<script type="text/javascript"
src="hello.js">
</script>

src 属性告诉浏览器应该从中读取该网页的 JavaScript 代码的外部文件的名称(在我们上面的示例中是 hello.js)。你不必将所有的 JavaScript 放在与 HTML 网页文档相同的位置。你可能希望将它们放入单独的 JavaScript 文件夹中。在这种情况下,你只需修改 src 属性中的值以包含文件的位置。你可以为 JavaScript 源文件的位置指定任何相对或绝对 Web 地址。

你现在可以获取你编写的任何脚本或从脚本库中获取的任何脚本,并将其从 HTML 网页代码移动到外部引用的 JavaScript 文件中。然后,你可以通过添加调用该脚本文件的适当 HTML 脚本标签从任何网页访问该脚本文件。


责任编辑:华轩 来源: 今日头条
相关推荐

2020-07-06 09:21:52

云平台云安全公共云

2015-11-30 13:41:20

Windows 10Store APP存储设备

2010-05-20 15:25:44

IIS管理器

2022-04-07 08:00:00

Javascript开发

2021-09-17 11:17:14

应用程序云端云计算

2013-02-18 11:31:00

JavaScriptPerl语言

2022-08-18 11:36:16

可视化JavaScript事件循环

2021-07-07 14:01:51

Windows 11任务栏微软

2011-03-08 08:52:57

2019-07-10 11:10:25

Windows 10文件夹Windows

2020-02-14 12:56:56

Git多媒体文件开源

2011-04-19 16:55:03

iPhone 6

2017-01-11 17:38:31

AndroidAndroid坐标Button移动

2022-11-13 19:23:47

GNOMEGNOME Boxe

2016-12-29 11:18:26

前缀后缀C代码

2018-11-12 09:30:49

Linux命令文件管理器

2013-05-17 17:21:25

混合云政府服务

2018-05-02 14:00:31

LinuxQr-filetran文件传输

2020-04-30 21:30:18

JavaScript前端技术

2023-10-25 10:21:24

浏览器HTTP请求
点赞
收藏

51CTO技术栈公众号