Javascript函数应该在jQuery文档内部编写和调用，还是在外部编写和调用？_Javascript_Jquery_Function_Scope_Document Ready

Javascript函数应该在jQuery文档内部编写和调用，还是在外部编写和调用？

javascript jquery function

Javascript函数应该在jQuery文档内部编写和调用，还是在外部编写和调用？,javascript,jquery,function,scope,document-ready,Javascript,Jquery,Function,Scope,Document Ready,我只是有一个关于在jQuery中编写函数的问题。定义自己的函数时，它们是否应该写在$（function（）{}）中还是在它之外？请注意，这些只是示例函数，可以是任何函数。我选择了一个jQuery函数和一个本机JavaScript来查看是否有任何区别，即是否应该在DocumentReady中定义一个自定义的jQuery函数 $(function(){ $('select').jQueryExample(); nativeExample(); $.fn.jQueryExam

我只是有一个关于在jQuery中编写函数的问题。定义自己的函数时，它们是否应该写在

$（function（）{}）中还是在它之外？请注意，这些只是示例函数，可以是任何函数。我选择了一个jQuery函数和一个本机JavaScript来查看是否有任何区别，即是否应该在DocumentReady中定义一个自定义的jQuery函数
$(function(){
    $('select').jQueryExample();
    nativeExample();

    $.fn.jQueryExample = function(){
        //Do something
    }

    function nativeExample(a, b)
    {   
        return a + b;
    }
});

例如：
$(function(){
    $('select').jQueryExample();
    nativeExample();    
});

$.fn.jQueryExample = function(){
    //Do something
}

function nativeExample(a, b)
{   
    return a + b;
}

与此相反，在document ready中调用和定义它们
$(function(){
    $('select').jQueryExample();
    nativeExample();

    $.fn.jQueryExample = function(){
        //Do something
    }

    function nativeExample(a, b)
    {   
        return a + b;
    }
});

：：编辑：：
还有一个问题。如果一个函数在文档就绪外部定义，也被称为文档就绪外部，那么与在文档就绪外部定义，但在文档就绪内部调用相比，会发生什么
我这样问是因为我在DocumentReady范围之外定义了一个函数，这个函数是一个ajax调用，它在页面加载时获取新消息。它应该被称为外部文档就绪还是内部文档就绪
$(function(){
    $('select').jQueryExample();
    nativeExample();

    $.fn.jQueryExample = function(){
        //Do something
    }

    function nativeExample(a, b)
    {   
        return a + b;
    }
});

例如：
$(function(){
 //Hello, I am jQuery

});

nativeExample();

function nativeExample(a, b)
{   
    return a + b;
}

与之相反：
$(function(){

 nativeExample();

});


function nativeExample(a, b)
{   
    return a + b;
}

提前感谢您的回复。
当然-您可以在任何需要的地方编写函数。它们根本不需要处于文档就绪功能中。我不喜欢把它和函数混在一起，所以我只在外面写。没有什么真正的理由你应该或不应该这样做；这些函数无论如何都应该工作
其思想是，这些函数将仅从$（function（）{}）中调用（document.ready函数）
一旦所有HTML元素（也称为DOM）都被完全加载并且jQuery也准备就绪，就会调用DocumentReady函数。最佳实践（IMO）是在所有自定义JavaScript文件和css文件之后最后加载jQuery文件。这样，只要调用documentready函数，您就可以100%确定所有文件都已加载并准备就绪
<head>
  <link type="text/css" href="myStyle.css">
  <script type="text/javascript" src="myFunctions.js" ></script>
  <script type="text/javascript" src="myUtils.js" ></script>
  <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
</head>



您甚至可以将函数放在一个单独的文件中。。。只要在满足函数的所有依赖项之前不调用该函数，就可以了

回复：你的编辑-
一旦调用了documentready函数，就可以在JavaScript中的任何地方使用jQuery方法。如果AJAX调用发生在文档准备就绪之前，它可能不知道如何实际执行请求（如果您使用的是jQery AJAX调用）。您必须从文档中调用该函数。只需将“on page load”事件替换为document ready的回调-使其在jQuery就绪后加载新消息。
我认为您应该在jQueryready
方法之外定义函数，因为：

函数定义代码是“被动”代码：它不需要DOM运行
如果要在ready
事件之前使用函数，如果函数在事件中定义，则无法执行此操作
jQueryready
方法应该只在真正需要时使用，这意味着当您*真的必须等待DOM准备就绪时

作为参考，这里有一个我每次使用的简化但常见的HTML页面模式，它运行得非常好：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page title</title>
    <!-- your CSS code -->
    <link rel="stylesheet" href="/path/to/file.css">
</head>
<body>
    <!-- your HTML elements -->

    <!-- all your scripts elements at the bottom -->

    <!-- load jQuery from Google CDN -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <!-- load all your "passive" code that defines custom or vendor jQuery plugins -->
    <script src="jquery.plugins.js"></script>

    <!-- load all your "active" code -->
    <script src="yourcode.js"></script>
</body>
</html>

文件yourcode.js
可以是：
// place here all "active" code
// by "active" code I mean all code that will interact/alter/modify your page
$(function(){
    $('select').jQueryExample();
    nativeExample();    
});


关于您的编辑，您的问题与在外部定义但在内部调用document ready相比会发生什么情况没有一个通用的答案。看看这个例子：
<!-- basic html setup -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page title</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        // placing <script> tag in the <head> tag is considered as a bad practice
        // I use it for the example but you should not do the same in real code

        // define your functionsin the <head> tag
        function getFoo() {
            return "foo";
        }
        function getAnchor() {
            return document.getElementsByTagName('a');
        }
    </script>

    <script>
        // reference: ONE
        // call your function in the <head> tag
        console.log( "one", getFoo() ); // "foo"
        console.log( "one", getAnchor() ); // empty array
    </script>
    <script>
        // reference: TWO
        $(document).ready(function(){
            // call your function inside the jQuery 'ready' event
            console.log( "two", getFoo() ); // "foo"
            console.log( "two", getAnchor() ); // array with one element
        });
    </script>
</head>
<body>

    <a href="www.example.com">bar</a>


    <script>
        // reference: THREE
        // call your function at the end of the <body> tag
        console.log( "three", getFoo() ); // "foo"
        console.log("three",  getAnchor() ); // array with one element
    </script>

    <script>
        // reference: FOUR
        $(document).ready(function(){
            // call your function inside the jQuery 'ready' event
            console.log( "four", getFoo() ); // "foo"
            console.log( "four", getAnchor() ); // array with one element
        });
    </script>
</body>
</html>

看看日志顺序：一，三，二，四；这与来源顺序不同：一，二，三，四。功能已准备就绪
已延迟，直到页面加载完成。
嘿，感谢您的回复。非常感谢：）不过，有一件事。“页面加载”事件是什么意思？我主要使用$.post和$.getJSONyou说的“…一个ajax调用，它在页面加载时获取新消息”
。我不确定你指的是不是哦，对不起><我自己也不太清楚我的意思嘿，谢谢你的回答。我在这个问题中读到了关于javascript文件（头部或身体之前）的位置：。主GoogleApi jQuery应该在head中，而我的自定义javascript应该在body之前吗？@JohnathanAu我已经更新了我的答案以回复您的编辑。我认为我在这里发布的第一个模式是放置JavaScript文件的最佳方式（使用模块加载器时除外）。为什么要在标题中加载jQuery
，但只在
之前使用它？在您想要使用它之前包含jQuery
，它的意思是在
之前。此外，在我看来，在可能的情况下将脚本标记分组是一个很好的做法。答案非常全面。谢谢：）另见