在网页中包含 Javascript答案

【问题标题】：Including Javascript within web pages在网页中包含 Javascript
【发布时间】：2009-05-14 16:53:42
【问题描述】：

任何人都可以推荐在（基于 PHP）网页上包含多个 Javascript 文件的最佳和最简单的方法吗？

我有一个使用 jQuery 的网站，并且在任何一个特定页面上最多有大约 10 个插件。我不完全确定包含所有这些文件的最佳方式，以使我作为开发人员的生活变得简单，并确保为用户提供最好的服务。

理想情况下，我认为自己最简单的方法是构建一个 PHP 处理程序文件，我可以使用该文件来调用每个页面所需的插件，然后让它输出使用 document.write() 来“包含”每个插件的 javascript页面上的plugin JS文件，如下所示：

<script src="handler.php?jquery,plugin1,plugin2,plugin3,plugin4"></script>

然后可能会向每个单独的插件输出带有多个 document.write() 的 Javascript。

我相信这可能会导致浏览器缓存出现问题，因为某些浏览器会忽略带有查询字符串的项目的缓存。

这样做可以吗，或者有没有我可能遗漏的更简单的方法？

【问题讨论】：

标签： php javascript jquery

【解决方案1】：

你可能对Google AJAX API感兴趣，即：

google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
google.load("prototype", "1.6.0.3");

【讨论】：

感谢 dfa，我已经使用 Google 的 CDN 来加载主 jQuery 文件——它只是我需要加载的所有该死的插件——当然，并不是每个页面都需要每个插件，所以能够快速加载我需要的东西是必不可少的。我认为我正在尝试编写代码 -dead-clean（我是个干净的怪物）的事实可能会让事情变得更加困难，我应该只使用 PHP 函数通过标准脚本标签写出并包含插件而不是全部聪明并尝试使用一个脚本标签加载多个文件。

【解决方案2】：

乔利，

浏览器缓存带有问号的 url 没有问题。最好不要包含一个 js 文件，而后者又包含另一个 js 文件。如果你已经在编写一个脚本来管理所有应该包含的 js 文件，为什么不直接输出所有这些脚本标签呢？

【讨论】：

这可能有点过时了，但是请看：thinkvitamin.com/features/webapps/serving-javascript-fast"此时，您可能会问为什么我们不只是在资源末尾添加查询字符串 - /css /main.css?v=4. 根据 HTTP 缓存规范的字母，用户代理不应该缓存带有查询字符串的 URL。虽然 Internet Explorer 和 Firefox 忽略了这一点，但 Opera 和 Safari 不会 - 以确保所有用户代理都可以缓存您的资源，我们需要将查询字符串保留在其 URL 之外。”

【解决方案3】：

为什么不将每个文件单独包含在它们自己的<script> 标记中呢？然后一切都被单独缓存，一切都很好。在第一页加载时只会有很多 HTTP 请求。每次动态构建一个“包含文件”可能不会提高性能。

脚本的组合变化很大吗？如果您真的想减少 HTTP 请求并且总是包含相同的 10 个文件，只需将它们全部放在一个长文件中即可。

【讨论】：

变化很大——有些页面不使用插件，有些页面使用多达 10 个。我想我可能会坚持使用 PHP 函数来输出我需要的所需 javascript 插件的脚本标签，而且我将不得不忽略我的“尽量保持代码简单”的冲动。谢谢。
通过合并 javascript 文件来最小化 HTTP 请求是一种被广泛接受的做法。 developer.yahoo.com/performance/rules.html

【解决方案4】：

如果你真的不喜欢单独包含文件，你可以编写一个 php 函数来生成给定插件名称列表的脚本标签。

【讨论】：

再次感谢 - PHP 似乎是明智的选择，而不是尝试从 javascript 文件等中包含 javascript。

【解决方案5】：

function loadScripts(funcs){
    //funcs being an array list of paths to the scripts.
    var temp;

    //lets get a reference to the head tag
    var h = document.getElementsByTagName('head')[0];
    for(var i=0; i < funcs.length; i++){
        temp = document.createElement('script');
        temp.setAttribute('src', funcs[i]);
        temp.setAttribute('type', 'text/javascript');
        h.appendChild(temp);
    }
}

【讨论】：