让我的 jQuery 代码远离 html 文件答案

【问题标题】：Keeping my jQuery code away from the html files让我的 jQuery 代码远离 html 文件
【发布时间】：2009-06-18 16:32:16
【问题描述】：

我正在学习 jQuery 并创建了几个插件。不幸的是，由于我公司的编码实践，他们希望将所有 javascript 代码提取到 js 文件中。这对我来说提出了两个挑战：

我可以将实际的 $(document).ready(..) 调用提取到 js 文件吗？到目前为止，以我有限的知识，我还没有想到这是否可能。如果没有，我欢迎提出任何建议，以使这种更简洁、更容易接受的方式包含此代码。
每个 asp.net 页面标题包含的 javascript 太多，因为我可能使用了多个插件。有没有办法减少我每次需要这些文件时可能需要进行的昂贵的服务器访问？

非常感谢任何建议，更正

谢谢

【问题讨论】：

为了尽量减少请求的数量，我使用了一个处理程序来组合并压缩多个 Javascript 文件。这是两全其美的。在vizslapup.com 观看它的实况
我会说很幸运您的公司想要将 js 提取到单独的文件中。这意味着关注点的清晰分离，它也可以在客户端缓存。
嗨，Alex，是的，您是对的，这样做是一种很好的做法，而且很幸运。我指的是与我目前的困境有关的“不幸”方面。谢谢
嗨乔希，我喜欢你的想法以及这里的其他很好的回应。您能否提供有关如何创建您建议的解决方案的参考资料或文章？谢谢
如果我有时间，我会在今天下午写一篇关于我是如何做到的博客文章，并链接到它。我使用 ASP.NET 作为服务器端代码。

标签： javascript jquery

【解决方案1】：

1. 绝对。

只需将脚本引用添加到您的 html 中，如下所示：

<script type='text/javascript' src='js/yourfile.js'></script>

然后只需启动您的 .js 文件

jQuery(function() {
  foo;
  ...
  bar;
});

或任何其他启动 jQuery 代码块的快捷方式。

2. 在将脚本发送给用户之前，您应该通过Minify 之类的方式运行脚本。这将合并文件并将它们很好地打包，以便它们占用更少的空间。

【讨论】：

【解决方案2】：

在外部 javascript 文件中使用 $(document).ready () 很好 - 它的工作原理完全相同:) 事实上 - 它不仅可以工作，而且是一种很好的做法，因为它有助于分离内容 ( HTML) 来自行为 (Javascript)。

针对您的部分问题 - 您可以将所有插件组合到一个 javascript 文件中，并链接到

中的那个文件。您也可以尝试缩小脚本，尽管在网站上线之前这通常有点矫枉过正。

我在使用jQuery的时候，一般都是用这种结构的：

<html>
  <head>
    <!-- html tags such as title, link, meta etc -->
    <script type="text/javascript" src="/path/to/jquery.js"></script>
    <script type="text/javascript" src="/path/to/plugin.js"></script>
    <!-- more plugins included if required -->
  </head>
  <body>
    <!-- html here -->

    <!-- script is the last thing before the ending body tag (increases performance) -->
    <script type="text/javascript" src="/path/to/your_jQuery_code.js"></script>
  </body>
</html>

【讨论】：

您好，感谢您在您的回答中提供的重要提示。我特别喜欢在正文末尾包含脚本的性能提示。我只想澄清一件事。当您声明将所有插件合并到一个文件中时，这是否意味着将所有插件代码合并到一个文件中，而不是单独的 js 文件（plugin1.js、plugin2.js..）？非常感谢
你是对的——我说的是从 plugin1.js、plugin2.js 等中获取代码并将其全部放入一个 javascript 文件（我称之为 plugins.js）——所以在我的上面的示例，我将所有插件都放在单个文件 plugin.js 中

【解决方案3】：

我认为担心 javascript 包含的服务器访问是过早的优化。您是否有任何证据表明这些页面加载缓慢？浏览器应该正在缓存 javascript 文件。

如果你确实有证据表明这是一个问题，你可以

-将 jquery 代码和任何插件合并到一个文件中
- 编写一个 .net 内容处理程序来为您执行此操作（可能有点矫枉过正）

然后您可以为每个页面添加一个自定义 js 文件来处理页面特定属性。

【讨论】：

感谢蒂姆，您的所有回答都给了我很好的指导和洞察力。

【解决方案4】：

您绝对可以将您的 document.ready 和所有其他 JavaScript 代码放在一个外部文件中。

通常我有 2 个调用 - 一个用于 jQuery 本身，一个用于合并和缩小我所有单个文件的缩小的 global.js 文件。

就我个人而言，我喜欢为此使用front end blender，但也有许多其他选项可用。

【讨论】：

谢谢马克，将按照 Artem 的建议尝试前端搅拌器和缩小

【解决方案5】：

将document.ready 调用放入外部文件没有任何问题。事实上，这是我将我的 js 与我的 html 分开的方法。如果您担心某些页面上运行的某些功能，您可以使用

筛选它们

var path = window.location.pathname;
if (path == "/yourdir/yourpage.html") {
    //do something for this page only
}

或者您可以只在某些页面上包含某些文件。

【讨论】：

谢谢杰森，喜欢你关于页面特定代码分离逻辑的建议
我用它:) 对我来说效果很好！快速确定您所在页面的好方法是执行 alert(path);