将所有代码放在“$(document).ready”中是否安全
Is it safe to put all your code inside `$(document).ready`?
我正在使用jQuery进行一个小项目,这是我第一次使用它。将所有 UI 代码放在$(document).ready()
中是否安全?我基本上是在创建一个在按下按钮时弹出的表单,并且表单通过 AJAX 进行处理。基本上,当我将 AJAX 函数与控制 UI 的函数分开时,AJAX 不起作用。但是,当我将它们都放在$(document).ready()
中时,一切正常。这是我的代码。请忽略我的评论,因为它们是出于学习目的。
$(document).ready(function(){ //ready for DOM manipulation
/*FORM UI*/
var container_form=$('#container_form'); //container form box
var addButton=$('.addButton'); //"+" add button
container_form.hide(); //initially hides form
$(addButton).click(function(){
$(container_form).toggle('fast');
/*SUBMISSION AJAX*/
$('form.ajax').on('submit',function() { //Make form with class "ajax" a JQuery object
var that = $(this), //"that"-current form, "url"-php file, "type"-post, "data"-empty object for now
url=that.attr('action'),
type=that.attr('method'),
data={};
that.find('[name]').each(function(index,value){ //search all elements in the form with the attribute "name"
var that=$(this), //legal attribute
name=that.attr('name'); //name of the legal attribute
value=that.val(); //value of text field in legal attribute
data[name]=value; //data object is filled with text inputs
});
$.ajax({
url: url, //url of form
type: type, //type of form
data: data, //data object generated in previous
success: function(response){ //reponse handler for php
if(!response){
console.log("Error");
}
console.log(response);
}
});
return false; //Stops submission from going to external php page.
});
});
});
通常,任何选择器(如 $('form.ajax').
、$('#container_form')
、$('.addButton')
)都需要在 doc.ready 中,以确保 DOM 在尝试从中选择元素之前已准备就绪,因为如果 DOM 尚未完成处理,它可能无法找到该元素。 所以这几乎适用于所有代码。 如果你有这样的函数:
//defines a function
function addThem(first,second)
{
return first + second;
}
您可以在文档就绪之外声明它,并从文档就绪内部调用它。
$(document).ready(function(){
$('#someInput').val(
addThem( $('#anotherInput').val() , $('#thirdInput').val() )
);
});
我对此的看法是,文档就绪是一个事件,所以你应该做一些事情来响应"文档现在准备好让你查询事件",而不是声明事情。 声明函数只是说该函数的作用,但实际上并没有做任何事情,因此它可以在文档之外准备就绪。 在 doc.ready 中声明这个函数是非常愚蠢的,因为它可以随时定义(尽管当然可以把它放在 doc ready 中,但它通常会把事情弄得一团糟)。 即使它正在选择一个元素,该代码在被调用之前也不会实际运行:
function hideContainer()
{
//this code never runs until the function is called
//we're just defining a function that says what will happen when it is called
return $('#container').hide();
}
$(document).ready(function(){
//here we are calling the function after the doc.ready, so the selector should run fine
hideContainer();
});
请注意,连接到其他事件的行为本身就是一种操作,例如当您订阅点击事件和表单提交事件时。 您说的是,"使用类 .ajax 查找表单元素,并订阅其提交事件"。 在 DOM 完成处理之前,您不希望尝试连接到 DOM 元素的事件。 就浏览器而言,如果它正在处理 DOM 的过程中,它们可能还"不存在",因此您尝试连接到点击/表单提交事件可能会失败。 我说可能是因为根据时间/处理滞后,它有时可能有效,有时无效。
代码放入一个$(document).ready()
中不仅没有错,而且将其放入多个$(document).ready()
函数中也没有错,这样您就可以将重复的功能分离到单独的JS文件中。
例如,我在网站所有网页中包含的脚本中使用$(document).ready()
来设置 UI 元素、防止点击劫持等。同时,每个页面通常都有自己的$(document).ready()
,用于设置特定于页面的用户交互。
这绝对没问题。如果你发现自己需要将代码抽象成多个函数或多个文件,那么无论如何,但是将所有内容都扔在$(document).ready()中并没有错。
- 正在寻找比$(document).ready慢的$(window).load的替代方案
- jQuery document.ready not working
- jQuery document.ready停止代码
- 停止对document.ready函数的重定向/刷新
- $(document).ready和jQuery(function($)不工作;jQuery已定义,但脚本尚未定义;t进
- 函数从$(document).ready外部调用在$(document).ready中定义的函数
- 如果没有document.ready(),我怎么能拥有多个javascript函数呢
- ASPX Jquery 1.11 $(Document).ready(function() {} was skipped
- 重载像$(document).ready这样的函数是错误的
- 延迟加载jquery后替换$(document).ready(function)
- $(document).ready未在brunch/jade/主干网项目中调用
- 为什么不'加载$(document.ready(function)后,单击“工作”
- $(document)中的多个javascript函数.ready不工作
- JavaScript执行从函数声明开始,而不是从$(document).ready()开始
- 从Document.ready中的bundle执行javascript
- 多个 $(document).ready(function() 但只有前几个被解雇
- 如何在 $(document).ready(function(){}) 中使用 for 循环
- 从 document.ready 调用 jQuery 插件抛出 getPreventDefault 错误
- 为什么一个 $(document).ready(function() { 会阻止另一个运行
- 调用 Document.ready 外部的 AJAX 函数