jQuery的ready()
函数是用于在DOM完全加载后执行代码的方法。它类似于原生JavaScript的DOMContentLoaded
事件,但提供了更好的跨浏览器兼容性。
$(document).ready(function() {
// 在这里声明和使用函数
function myFunction() {
console.log("DOM已加载");
}
myFunction();
});
更好的做法是在外部声明函数,在ready中调用:
// 在外部声明函数
function initPage() {
console.log("页面初始化");
}
function setupEventHandlers() {
$("#myButton").click(function() {
console.log("按钮被点击");
});
}
$(document).ready(function() {
initPage();
setupEventHandlers();
});
(function($) {
// 私有函数
function privateFunction() {
console.log("这是一个私有函数");
}
// 公开函数
function publicFunction() {
privateFunction();
}
$(document).ready(function() {
publicFunction();
});
})(jQuery);
jQuery 3.0+推荐使用以下简写:
$(function() {
// 等同于$(document).ready()
console.log("DOM已加载");
});
原因:在ready内部声明的函数作用域仅限于ready函数内部
解决:将需要在多处使用的函数声明在全局作用域或模块中
原因:jQuery允许添加多个ready处理程序
解决:尽量合并到一个ready处理程序中,或使用模块化组织代码
原因:函数尝试操作尚未加载的DOM元素
解决:确保所有DOM操作都在ready回调中执行
通过遵循这些最佳实践,可以创建更可维护、更可靠的jQuery代码。