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

Should a Javascript function be written and called inside jQuery document ready or outside?

本文关键字：调用 外部 内部 函数 jQuery Javascript 文档      更新时间：2023-09-26

我只是有一个关于在jQuery中编写函数的问题。在定义自己的函数时，它们应该写在$(function(){});内部还是外部？请注意，这些只是示例函数，可以是任何函数。我选择了一个jQuery函数和一个原生JavaScript，看看是否有任何区别，即是否应该在文档准备好中定义一个自定义的jQuery函数？

例如： 

$(function(){
    $('select').jQueryExample();
    nativeExample();    
});
$.fn.jQueryExample = function(){
    //Do something
}
function nativeExample(a, b)
{   
    return a + b;
}

与此相反，它们在文档中称为 AND 准备好了吗？

$(function(){
    $('select').jQueryExample();
    nativeExample();
    $.fn.jQueryExample = function(){
        //Do something
    }
    function nativeExample(a, b)
    {   
        return a + b;
    }
});

：：编辑：：

还有一个额外的问题。如果一个函数是在文档就绪外部定义的，也称为外部文档就绪，那么与在外部定义它但调用内部文档就绪相比会发生什么？

我问这个是因为我在文档就绪范围之外定义了一个函数，并且这个函数是一个 ajax 调用，它在页面加载时获取新消息。它应该称为外部还是内部文档就绪？

例如：

$(function(){
 //Hello, I am jQuery
});
nativeExample();
function nativeExample(a, b)
{   
    return a + b;
}

而不是：

$(function(){
 nativeExample();
});

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

提前感谢您的回复。

我认为你应该在jQuery ready方法之外定义你的函数，因为：

  • 函数定义代码是一个"被动"代码：它不需要运行 DOM。
  • 如果要在 ready 事件之前使用函数，则无法执行此操作，前提是在事件中定义了函数，
  • jQuery ready 方法应该只在真正需要时才使用，这意味着当你*真的必须等待 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>

jquery.plugins.js文件可能包含您提供的内容：

// define all jQuery plugin, aka "passive" code
// "passive" means it won't affect the page
$.fn.jQueryExample = function(){
    //Do something
};
$.fn.somePlugin = function(){
    // Do something
};
// you could define vanilla JavaScript functions in a separated file if you want
function nativeExample(a, b)
{
    return a + b;
}

文件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();    
});
<小时 />

关于您的编辑，您的问题what would happen as opposed to having it defined outside but called inside 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>

函数getFoo不需要 DOM 即可工作。因此，它的 4 次调用始终返回 'foo'，因此该函数无论何时何地被调用(在 'ready' 事件内部或外部(都可以工作。

该函数getAnchor查询 DOM 并返回页面中锚标记的集合。脚本"ONE"中的第一个调用位于 ready 事件之外，并返回未定义。脚本"THREE"中的第三个调用也在ready事件之外，但它在控制台中记录了一个锚元素数组。这意味着，函数调用的位置可以改变函数行为。在第一次调用中，显然页面中不存在锚标记，这就是该函数返回 undefined 的原因。然后，放置在页面开头和结尾的第二次调用和第第四次调用都记录一个数组。在这种情况下，函数调用的位置不会改变函数行为，因为函数getAnchor实际上是在加载所有 DOM 元素后调用的。如果您查看控制台日志，您会看到如下所示的内容：

one foo
one []
three foo
three [<a href=​"www.example.com">​bar​</a>​]
two foo
two [<a href=​"www.example.com">​bar​</a>​]
four foo
four [<a href=​"www.example.com">​bar​</a>​]
查看日志顺序：一、三、二、四

;它与源顺序不同：一、二、三、四。函数是ready延迟到页面加载完成。

当然 - 你可以在任何你想要的地方编写你的函数。 它们根本不需要在您的文档就绪功能中。 我不喜欢用函数来弄乱它，所以我只是把它们写在外面。 没有真正的理由说你应该或不应该;无论如何，这些函数都应该可以工作。

这个想法是，这些函数只会从你的$(function(){});(document.ready函数(中调用。

一旦所有 HTML 元素(也称为 DOM(完全加载并且 jQuery 准备就绪，就会调用文档就绪函数。 最佳实践(IMO(是最后加载jQuery文件 - 在所有自定义JavaScript文件和css文件之后。 这样，只有在调用文档就绪函数后，您才能 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>

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

回复：您的编辑 -

一旦文档就绪函数被调用 - 你可以在JavaScript中的任何位置使用jQuery方法。 如果您的 AJAX 调用发生在文档准备就绪之前，它可能不知道如何实际执行请求(如果您使用的是 jQery AJAX 调用(。 您必须从准备好的文档中调用该函数。 只需将"页面加载"事件替换为文档就绪的回调 - 一旦jQuery准备就绪，它就会加载新消息。

相关文章：