jquery - jQuery 插件应该在文档中定义吗？

Question

我是 JavaScript 和 jQuery 新手。在尝试使用我下载的一些 jQuery 插件失败后，我检查了 $.fn，发现在调用文档就绪处理程序时添加到其中的任何内容都丢失了。它在 onclick 等事件处理程序中也会失败。

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script>
    jQuery.fn.myPlugin = function () { alert("success"); };

    //works fine - alerts with "success"
    $(document).myPlugin();

    $(function () {
        //Uncaught TypeError: Object [object Object] has no method 'myPlugin'
        $(document).myPlugin();
    });
</script>

如果我将插件的定义移至文档就绪处理程序中，则此后一切正常(包括事件处理程序)。事情就应该这样完成吗？我在网上找到的所有内容都清楚表明并非如此。我正在使用 Chrome 及其内置的开发人员工具。谢谢。

Answer 1

是的，你是对的。文档就绪回调在那里，以便您知道所有 DOM 元素和 jQuery 何时可供使用。实际的代码不必位于回调内部，但您应该只在所有元素准备好使用后才初始化您的插件。

例如，on('click') 处理程序必须位于文档就绪回调中，但它执行的函数不必是 -

$("#button").on('click',function(){
  btnClickHandler(); // this can be defined outside the ready callback.
});

所以你看，代码本身不需要用ready回调封装，但是执行插件的代码应该在那里，因为只有这样你才知道你的文档已经准备好了被操纵...

将代码放在文档就绪回调中始终是一个好主意。您还可以在不同的文件中拥有多个文档就绪回调 - 一旦您的 DOM 准备好，每个回调都会被调用。如果存在多个就绪回调，则将它们写入页面的顺序将决定首先执行的回调。始终首先引用 jQuery，以便执行准备好的回调。

• .ready()