本文将详细介绍 document.ready 和 $function 之间的区别。它们都是 jQuery 中用于在 DOM 加载完成后执行代码的方式。
document.ready
document.ready 是原生 JavaScript 的一个事件，jQuery 提供了简便的方式让我们使用它。当 DOM 内容全部完成加载后，浏览器会触发该事件，此时可以开始编写和执行 JavaScript 代码。下面是一个例子：
$(document).ready(function() {
// your code here
});这种方式需要使用 $ 符号和 document 对象调用 ready 方法，然后在函数内部编写相应的代码。这种方法已被广泛使用，并且具有可靠性和稳定性。
$function
另一种常见的方式是使用 $function。这是 jQuery 提供的一种缩写形式，可以用来代替 document.ready。下面是一个例子：
$(function() {
// your code here
});这种方式与 document.ready 的方法非常相似。实际上，它们在 jQuery 内部是等价的。$function 可以看作是 document.ready 的简写形式。
区别
尽管这两种方式极其相似，但它们之间仍然存在一些微妙的区别。主要的区别在于语法和执行时间。
语法
document.ready 使用了完整的语法：
$(document).ready(function() {
// your code here
});而 $function 只是一个简写：
$(function() {
// your code here
});这种简写形式可以更清晰地表达意图，也使代码更易于阅读和维护。
执行时间
在大多数情况下，它们的执行时间几乎相同。但是，在某些情况下，$function 可能会稍微快一点。这是因为它不需要对 document 对象进行多次操作。
学习与指导
无论使用哪种方式，确保正确地编写 jQuery 代码非常重要。熟悉 document.ready 和 $function 的区别，可以帮助开发人员更好地使用正确的语法来编写代码，从而提高代码质量和可读性。
此外，还应该避免在文档对象之前调用 jQuery 函数。这可能会导致代码失效或错误，因为尚未加载 DOM 内容。
最后，建议使用 ES6 语法结合 jQuery 进行开发，这样可以充分利用 JavaScript 的新特性，并且可以更好地处理代码中的回调函数。下面是一个例子：
$(document).ready(() => {
const element = $('.class');
element.click(() => {
// your code here
});
});示例代码
下面是一些示例代码，演示了如何使用 document.ready 和 $function：
-- -------------------- ---- ------- -- -- -------------- -- ---------------------------- - -- ---- ---- ---- --- -- -- --------- ---- ------------ - -- ---- ---- ---- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30021