3

我正在使用 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 文件中，然后将一些内联 JavaScript 放入 ID 为 myParagraph 的 PHP 文件中，以便在加载时调用函数 highlightParagraph()？这样，只会搜索并突出显示带有 myParagraph 的一页。

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

编辑：我意识到对于这个例子你只需要使用 CSS。我只是用它来解决我的问题

4

3 回答 3

4

您应该有一个包含基础设施功能的“大”js 文件，并且所有页面都应该引用它。

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

  1. 文件在第一次下载后被缓存 => 更快的冲浪。
  2. 与关注点分开，您使表示层远离脚本层。

另一个重要说明：
更改 css 的最佳方法是使用 css...而不是 javascript。 我

如果您在 DOM 就绪时更改元素样式，只需添加元素定义

#myParagraph{color: red;}
于 2012-06-14T21:08:06.037 回答
3

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

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

于 2012-06-14T21:10:24.693 回答
0

如果很多人不同意我的观点（甚至是激烈的），我不会感到太惊讶，但是如果它会减少文件数量或整体复杂性，我不会在标题中为该页面添加带有特定 javascript 的 javascript 标记的项目。大多数在各处完成的核心事情当然应该放在另一个文件中，但如果它是一页交易，那么我会追求清洁。

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

于 2012-06-14T21:08:42.417 回答