Javascript 将所有代码放在“$（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. 
});
});
});

---

绝对没问题。如果您发现自己需要将代码抽象到多个函数或多个文件中，那么无论如何，将所有代码都放入$document.ready中并没有错。

将所有代码放入一个$document.ready中并没有错，但是将它放入$document.ready函数中也没有什么错，这样您就可以将重复的功能分离到单独的JS文件中

---

例如，我在所有网站网页上的脚本中使用$document.ready来设置UI元素、防止点击劫持等。同时，每个页面都有自己的$document.ready，用于设置特定于页面的用户交互。

通常是任何选择器，如$'form.ajax'、$'container\u form'，$'.addButton'需要在doc.ready中，以确保DOM在尝试从中选择元素之前已准备就绪，因为如果DOM尚未完成处理，它可能找不到该元素。这几乎适用于所有代码。如果您有这样的功能：

//defines a function
function addThem(first,second)
{
   return first + second;
}

您可以在docready外部声明它，并从docready内部调用它

$(document).ready(function(){
   $('#someInput').val( 
      addThem( $('#anotherInput').val() , $('#thirdInput').val()  )
   );
});

我的想法是，doc ready是一个事件，所以您应该做一些事情来响应文档现在已经准备好查询事件，而不是声明事件。声明函数只是说明该函数的功能，但实际上并没有做任何事情，所以它可以在文档之外准备好。在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();
});

---

请注意，连接到其他事件的行为本身就是一种行为，例如当您订阅click事件和form submit事件时。您的意思是，使用class.ajax查找表单元素，并订阅其提交事件。在DOM完成处理之前，您不会希望尝试连接DOM元素的事件。就浏览器而言，它们可能不存在，如果它在处理DOM的过程中，那么您试图连接到单击/表单提交事件的尝试可能失败。我之所以说可能，是因为根据时间/处理延迟，它可能有时有效，有时无效。

是的，它非常安全！非常感谢。此外，我还看到了一些jQuery代码，其中包含用于加载某些UI元素的js函数。这是一种规范/标准，还是可能是该代码特有的？@ru毯fizz注意到$document.readyfunction{…}；也可以缩短为$function{…}；。非常感谢您的回答！我会尽快接受它。感谢其他答案，但这一个澄清了事件函数和正常函数之间的区别。