Question

我正在使用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。我只是用它来解决我的问题

Answer 1

你应该有一个带有基础设施功能的“大”js文件，所有页面都应该有一个参考。

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

首次下载后，文件会被缓存=＆gt;更快的冲浪。
不同的问题，使表示层远离脚本层。

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

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

#myParagraph{color: red;}

Answer 2

内联JavaScript的问题是你可能现在开始使用几行，但是在几周或几个月内，它会加起来并成为很多内联JavaScript。这很糟糕，因为浏览器可以缓存内联JavaScript，就像您在<script src="path/to/file.js" />中添加的JavaScript文件一样。这很糟糕，因为您添加了很多内容，这些内容将由用户在每个页面视图中获取，从而增加了服务器带宽的负担并减缓了用户的页面加载。

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

Answer 3

如果很多人不同意我（甚至是暴力），我也不会感到惊讶，但如果它会减少文件数量，那么在标题中为该页面添加具有特定javascript的javascript标记没有问题或整个项目的复杂性。大多数在任何地方完成的核心事情当然应该在另一个文件中分开，但如果是一页交易，那么我会去清洁。

对于css也是如此，如果它特定于该页面，只需在标题中放置一个css标记，其中的特定更改与主css文件不同。 BTW，正如大家都指出的那样，这是你想要使用CSS的情况。

JavaScript最佳实践：我应该在哪里包含JavaScript？

3 个答案: