如何使用 HTML5 Boilerplate 中的 main.js 和 plugins.js？答案

【问题标题】：How do I use main.js and plugins.js from HTML5 Boilerplate?如何使用 HTML5 Boilerplate 中的 main.js 和 plugins.js？
【发布时间】：2013-10-02 10:16:44
【问题描述】：

There is a similar question 有一个可接受的答案，但它引用的链接不再可用 (not even on the wayback machine)。 H5BP 文档本身在这个主题上并不是很具体（here），至少对于像我这样的菜鸟来说不是。 this similar question 的答案对我来说仍然没有太多解释。它有点涉及如何使用 plugins.js，但不是很具体，也没有解释 main.js。

不幸的是，这些是我能找到的唯一信息，我仍然不明白这些文件的用途。谁能解释一下；

如何使用 HTML5 样板中的 main.js 和 plugins.js？

它们的作用是什么，我将如何使用它们？

【问题讨论】：

我有点明白他们是出于组织目的，但不知道如果你想包含和初始化一个 jquery 插件，你会做什么。或者这与使用非 jquery 插件执行此操作有何不同。或者 main.js 和 plugins.js 有什么区别。
来自this question 我有点理解您的初始化脚本进入 main.js，并且您从 plugins.js 加载任何插件。但我仍然不明白更多。
另外，从require.js docs我可以看到它也使用了main.js，所以它使用了类似的结构。虽然它似乎没有使用 plugins.js，但似乎是从 main.js 进行所有初始化。
original H5BP docs 给出的解释有点不同；它说将所有插件代码放在 plugins.js 中，并将您自己编写的所有代码放在 main.js 中。哪种与其他来源相矛盾。例如，this answer 建议将插件的初始化放在 main.js 中。
This 是另一个类似的问题，不幸的是没有一个确凿的答案..（也是this 一个）

标签： javascript jquery html requirejs html5boilerplate

【解决方案1】：

这只是建议的组织。

我们的想法是将您正在使用的 jQuery 插件放入 plugins.js 并（取决于网站的大小）在 main.js 中完成您的工作。

我在Isboar standards docs 中详细写了它（尽管该文档指的是scripts.js 而不是main.js）

【讨论】：

嗯，好的，plugins.js 中插件的初始化脚本是否也在 main.js 中？还是应该放在单独的文件中？
不错的文章，非常透彻！
@Samuel 是的。使用本文中的示例，您将在应用程序的 init 函数或特定于页面/模块的初始化中初始化任何插件。 plugins.js 基本上只是为了让插件有条不紊地生活。那里不应该有任何应用程序代码。
谢谢，非常好的文章。你对页面/模块特定的初始化问题有什么建议？想象一下，我在我的 #Plugins.js 文件中复制了一个缩小版本的插件并仅在一个页面上初始化该插件（在我的 #Main.js 中），但在其他页面中出现引用错误。
管理页面到页面站点的最简单方法是简单地基于页面本身的 id 或类进行初始化。因此，如果您在主页上需要它，您可以测试 body#home 的存在并随后进行初始化。该方案在 Paul 的 Dom Based Routing paulirish.com/2009/… 中正式化

【解决方案2】：

plugins.js 是将您所有的供应商脚本（不是由您编写的）放在一个文件中。您可能有 tooltio.1.4.js 或 tablular.min.js 或 d3.vert.js - 而不是将所有这些 JS 文件直接使用到 HTML 页面中，而是将所有代码复制粘贴到 plugins.js 中

Main.js 只是为您自己编写的代码提供给您的模板文件。

【讨论】：

【解决方案3】：

你应该参考h5bp's other repos'。看看这个https://github.com/h5bp/html5boilerplate.com/blob/master/src/js/main.js

【讨论】：

鼓励链接到外部资源，但请在链接周围添加上下文，以便您的其他用户了解它是什么以及为什么存在。始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。