匿名函数与单独的命名函数在jQuery中进行初始化


9

假设我们有一些代码,用于在页面加载时初始化事物,看起来像这样:

function initStuff() { ...}
...
$(document).ready(initStuff);

仅从代码段的第三行调用initStuff函数。再也不。因此通常人们将其放入这样的匿名回调中:

$(document).ready(function() { 
    //Body of initStuff
});

将函数放在代码中的专用位置并不能真正帮助提高可读性,因为调用ready()可以使这很明显是初始化代码。

还有其他理由更喜欢另一个吗?


4
第一个使全局名称空间混乱。选择第二个。
riwalk 2012年

Answers:


10

正如@ Stargazer712所提到的,第一个混乱了全局名称空间,因此第二个是赢家恕我直言。话虽如此,由于在第二个示例中使用的是匿名函数,因此调试器的调用栈将变得无用,并且根据您使用的调试器的不同,将获得不同的结果。通常,我最终要使用的是:

$(document).ready(function MODULE_init() { 
    //Body of initStuff
});

这样,全局名称空间不会变得混乱,并且您会有一个有用的调用栈。

我倾向于在所有匿名(好了,不再是匿名的;)函数定义中使用以上约定。这是我浏览Firefox JS代码时发现的约定。

编辑:现在已经说了这么多,Oliver在单元测试中提出了一个好观点。以上内容旨在充当更复杂操作的包装,而不是容纳大量未经测试的代码。


+1关于调试。我经常在Node.js代码中看到“命名回调”的使用(不知道这个术语是否确实存在),所以我也认为这是个好习惯。
奥利弗·韦勒

kangax.github.com/nfe命名函数表达式-本文告诉您您想了解的所有内容。
肖恩·麦克米伦

7

我想在这种情况下可能没关系,但是如果您有匿名回调函数(调用其他匿名回调函数),则我倾向于使用第一种方法,因为它使代码更具可读性且易于遵循。

关于单元测试,第一种方法会更好,因为您将能够单独测试initstuff功能。


通常,这些初始化函数中没有很多代码。它可能会从几个地方获取一些数据,仅此而已
Martin N.

3

我会选择第一个,用于可读性/调试/测试等。您可以通过简单地为页面上所有功能创建本地名称空间来避免全局名称空间混乱的问题。按照Paul Irish的建议,我使用对象表示法样式(请参见http://paulirish.com/2009/perf/上的幻灯片13-15 )

var MYPAGE = {
  onReady : function(){
  // init code
  },
  someOtherCallback : function(){}
};

jQuery(document).ready(MYPAGE.onReady);

2

还有第三种注册初始化方法而又不会使我更喜欢的全局名称空间混乱的方法:

jQuery(function(){....});

它很简短,避免了像DOM文档查找

jQuery(document).ready(function(){...}); 

做。


+1:我认为这是标准做法,但为了避免与定义冲突的任何问题,$我更喜欢:jQuery(function($) {...});
kevin cline 2012年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.