在 jQuery 中用 Javascript 定义函数

Posted 2023-02-22

【中文标题】在 jQuery 中用 Javascript 定义函数

【英文标题】：Defining Functions In Javascript Within jQuery

【发布时间】：2011-04-06 22:56:40

【问题描述】：

我正在开发一个专有网站，但遇到了一些问题。我将 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 之外声明它们？

谢谢。

【参考方案1】：

通常，您应该声明和定义自己的namespace，所有应用程序逻辑（包括函数/方法）都位于该位置。这样，您就可以避免 collision 与您网站上的其他脚本一起使用 + 这样您的代码就更简洁，更易于维护。

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》是一本关于这些东西的好书，经常被命名和推荐。

【讨论】：

我很喜欢这个，很有趣。使用此方法声明/调用函数对性能有何影响？

@bryan.taylor：性能与从全局（窗口）命名空间调用这些函数一样好。由于我们正在执行对象查找并扩展范围链，因此它可能会稍微慢一些，但这种差异就像什么都没有，真的应该不会阻止任何人这样做或类似。

【参考方案2】：

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

所以在你的例子中，如果函数只在那个块中使用，它们应该在那里声明。如果它们还用于其他地方，则应在外面声明。

【讨论】：

所以你说只有在 document.ready 中使用了很多本地函数时才在本地声明。否则只需全局声明。

如果仅在本地使用，请在本地声明。否则全局声明。对不起，如果我不够清楚。

【参考方案3】：

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

【讨论】：

处理程序怎么样？当您将 document.ready 内的事件处理程序分配给 document.ready 内的函数时，您需要在全局范围内声明还是仅在本地范围内声明？

@bryan taylor：内部准备好了 - 因为事件处理程序存储在该元素的单击处理程序列表中，所以当您退出该范围时引用不会丢失。