在 jQuery 中定义 Javascript 函数

Question

我正在一个专有网站上工作，但遇到了一些问题。我将 jQuery 与原型一起使用，并且我已经对其进行了正确的命名空间，因此在这个问题中假设您可以使用 $ 或 jQ 作为对 jQuery 的命名空间引用。

所以我有很多函数，有些混合了 jQuery 和 javascript，有些是纯 javascript，有些只是 jQuery。现在，目前有些函数是在 document.ready jQuery 函数内定义的，有些是在其外部定义的，有点像这样：

jQ(document.ready(function($) {

  if ( ifConfig ) {
    //page check, function calls here
    fnc1();
    fnc2();
    fnc3();
    fnc4();
  }

  function fnc1() {
    //fnc code in here
  }
  function fnc2() {
    //fnc code in here
  }
});  //end document.ready

function fnc3() {
}
function fnc4() {
}

现在这都是伪代码，您可以假设这些函数是有效的并且其中包含有效的代码。最近我正在做一些调试，我在 document.ready 中声明和调用的函数之一说它是未定义的。我将其移到 document.ready 之外，一切又恢复正常了。

我基本上是想更好地理解函数如何启动/调用的顺序，所以我的问题是何时在 document.ready 内部声明函数以及何时在外部声明它们？您是否仅在该 document.ready 中调用它们时才在内部声明？或者我应该总是在 document.ready 之外声明它们？

谢谢。

Answer 1

一般来说，您应该声明 &定义您自己的命名空间，所有应用程序逻辑（包括函数/方法）都位于其中。这样您就可以避免与站点上的其他脚本发生冲突，这样您的代码就会更加干净且更易于维护。

var myapp = function(){
    var foobar1 = null,
        foobar2 = null,
        foobar3 = null;

    return {
        getFoobar1:  function(){
           return foobar1;
        },
        getFoobar2:  function(){
           return foobar2;
        },
        setFoobar1:  function(foo){
           foobar1 = foo;
        },
        clickhandler: function(e){
           alert('I am an event handler, and I am not anonymous');
        }
        // etc.
    };
};

$(document).ready(function(){
    var Application = myapp();

    Application.getFoobar2();

    $(document).bind('click', Application.clickhandler);
});

该模式（有些人称之为“方法模式”）创建一个封闭的函数/对象，它还保证命名空间内的私有成员变量，只能通过外部的 getter 函数访问。

这实际上只是一个非常基本的例子，你可以推动这个想法&图案延伸，这是非常好的&一件好事（IMO）。

Douglas Crockford 的《Javascript：The Good Parts》是一本关于这方面内容的好书，经常被命名和推荐。

Answer 2

如果函数仅在文档就绪函数内部使用，则在内部声明它，这样就不会污染全局范围。否则，请在外部声明它，以便脚本的其余部分可以访问这些函数。

Answer 3

(document).ready 更多地用于需要在页面加载时执行的事情，而不是函数声明。如果您在 (document).ready 内部声明它们，它们的作用域将是该块的本地范围 - 如果它们仅在本地使用，那很好，它们应该在那里声明。否则，将其声明到外部。

因此，在您的示例中，如果函数仅在该块中使用，则应在其中声明它们。如果另外在其他地方使用，则应对外声明。