JavaScript 最佳实践:我应该在哪里包含我的 JavaScript

JavaScript Best Practices: where should I include my JavaScript?

本文关键字：JavaScript 在哪里 包含 我的 我应该 最佳      更新时间：2023-09-26

我正在使用PHP和JavaScript构建一个网站，我觉得我已经很好地掌握了在哪里包含我的JavaScript，但是出现了一个更具体的情况，让我感到困惑。 我目前将所有 JavaScript 都放在一个外部文件中，该文件包含在每个 PHP 页面上。

假设我有一个带有 id='myParagraph' 的段落，我需要在页面加载时使用 JavaScript 用红色突出显示此段落。 这一段只在一个PHP页面上，我的网站有大约50个不同的页面。 我立即假设我应该将一些代码放入我的一个外部 JavaScript 文件中，如下所示：

$('#myParagraph').css('color', 'red')
该

段落将在该页面加载时突出显示。

我的问题是：这是最好的方法吗？ 据我了解，每次我加载页面时，都会搜索带有 id myParagraph 的元素，但我 98% 的页面甚至没有该 id。 这是浪费吗？ 我是否应该包含以下代码：

function highlightParagraph()
{
    $('#myParagraph').css('color', 'red')
}

在我的一个 JavaScript 文件中，然后在 PHP 文件中放置一些内联 JavaScript，ID 为 myParagraph，以便在加载时调用函数 highlightParagraph（）？ 这样，只会搜索并突出显示带有myParagraph的一页。

我觉得选项 2 是最好的，但我一直在阅读不使用内联 JavaScript。

编辑：我意识到对于此示例，您只需使用CSS。 我只是用它来表达我的问题

你应该有一个带有基础结构函数的"大"js文件，并且所有页面都应该引用它。

然后每个页面都应该引用另一个仅具有相关函数的 js 文件。
使用外部js文件的好处是：

  1. 文件在第一次下载后缓存 => 更快的冲浪速度。
  2. 除了关注点之外，您还将表示层与脚本层保持距离。

另一个重要注意事项：
更改 css 的最好方法是使用 css...不是JavaScript。我

如果您在 DOM ready 上更改元素样式，只需添加元素定义 

#myParagraph{color: red;}

内联 JavaScript 的问题在于，你现在可能从几行开始，但在几周或几个月内，它会加起来，变成很多内联 JavaScript。这很糟糕，因为内联 JavaScript 不能像包含在 <script src="path/to/file.js" /> 中的 JavaScript 文件那样被浏览器缓存。这很糟糕，因为您添加了很多内容，这些内容将被用户每次页面查看获取，从而增加服务器带宽的负载并减慢用户的页面加载速度。

如果只是几个选择器，请不要担心;浪费在它上面的时间不会导致任何浏览器出汗。但是，如果它变成了您网站不同页面/模块的大量代码，您可能希望将其拆分为不同的 JavaScript 文件，并在加载某些页面时仅包含该文件。这样，浏览器将缓存该文件并为您和用户保存带宽。

如果很多人不同意我的观点（甚至非常激烈），我不会太惊讶，但是如果它会减少文件数量或项目的整体复杂性，我将该页面的特定 javascript 标签放在标题中没有问题。 当然，在任何地方完成的大多数核心事情都应该在另一个文件中分开，但如果是一页交易，那么我会选择清洁。

css

也是如此，如果它特定于该页面，只需在标题中放置一个css标签，其中包含与主css文件不同的特定更改。 顺便说一句，正如每个人都指出的那样，这是您只想使用 CSS 的情况。

相关文章：