jQuery页面结构使用$(document).ready(function(){})的最佳实践答案

【问题标题】：jQuery page structure best practices for use of $(document).ready(function(){})jQuery页面结构使用$(document).ready(function(){})的最佳实践
【发布时间】：2012-07-11 17:49:11
【问题描述】：

我目前在我的网站上有很多小部件，它们可以执行各种 jquery 函数、动画、ajax 调用等。我一直在网上阅读，尝试将你的 js 捆绑到一个文件中是一种很好的做法，或者当它有意义的时候。我的每个小部件都在我的网站上广泛使用，因此将这些小部件的所有 jquery/javascript 放入一个文件中似乎是有意义的。现在，如果我每次想要调用小部件的按钮时都有$(document).ready(function(){})，自动加载一些准备好的文档数据等等。这样做的最佳做法是什么？不是每个小部件都在每个页面上，所以如果所有内容都在一个 javascript 文件中，那么调用不存在的 dom 元素会是不好的做法吗？

我想我真的很难找到围绕我的 Web 应用程序构建 jquery/javascript 以提供最佳性能的最佳方法。

【问题讨论】：

尝试模块化使用像 requirejs.org 这样的 AMD 并加载你不需要的一切
很好的建议，@Kishore +1

标签： javascript jquery architecture

【解决方案1】：

最好让 js 文件充满可重用的代码，这样你的所有功能都在一个页面中，所有页面都加载。我通常使用 default.js 作为该文件。然后在每个需要特定实现的页面中，我调用在页面底部的 doc.ready 内对该页面执行特定任务的函数。

这样你就只做每页需要的事情。在任何情况下，您都应该尝试在 default.js 文件中包含执行任务的函数，而不是在应该包含在整个站点中的文件中非常具体的 js

【讨论】：