为什么不build议“$()。ready(handler)”?

从jQuery API文档站点 ready

以下所有三种语法都是等价的:

  • $(文件)。就绪(句柄)
  • $()。ready(处理程序)(不build议这样做)
  • $(句柄)

做完功课后 – 阅读和播放源代码 ,我不知道为什么

 $().ready(handler) 

不推荐。 第一种和第三种方式是完全一样的,第三种方法调用caching的jQuery对象上的ready函数,其中包含document

 rootjQuery = jQuery(document); ... ... // HANDLE: $(function) // Shortcut for document ready } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } 

但是ready函数与所选节点元素的select符没有交互作用, ready源代码:

 ready: function( fn ) { // Attach the listeners jQuery.bindReady(); // Add the callback readyList.add( fn ); return this; }, 

正如你所看到的,它只是添加callback到一个内部队列( readyList ),并不会改变或使用集合中的元素。 这可以让你在每个jQuery对象上调用ready函数。

喜欢:

  • 常规select器: $('a').ready(handler) DEMO
  • 废话select器: $('fdhjhjkdafdsjkjriohfjdnfj').ready(handler) DEMO
  • 未定义的select器: $().ready(handler) DEMO

最后…对我的问题: 为什么不build议$().ready(handler)

我得到了jQuery开发人员的正式答复:

$().ready(fn)只能工作,因为$()曾经是$(document)的快捷方式(jQuery <1.4)
所以$().ready(fn)是一个可读的代码。

但是人们曾经做过像$().mouseover()和其他各种疯狂的事情。
人们必须做$([])来获得一个空的jQuery对象

所以在1.4中,我们改变了它,所以$()给出了一个空的jQuery,我们只是让$().ready(fn)工作,以免打破大量的代码

$().ready(fn)现在只是在核心中进行了修补,使其可以正常工作。

ready函数的最佳位置是$.ready(fn) ,但是这是一个非常古老的devise决定,而这正是我们现在所拥有的。


我问他(过去式:

你认为$(fn)比$()。ready(fn)更可读吗?

他的回答是:

我总是在实际的应用程序中做$(document).ready(fn),通常在应用程序中只有一个文档就绪块,它不完全像维护的东西。

我认为$(fn)也是相当难读的 ,这只是一件你必须知道的作品™

由于不同的选项与你指出的几乎完全相同,现在是时候把图书馆作家的帽子,并作出一些猜测。

  1. 也许jQuery的人们希望将$()用于将来的使用(因为$().ready被logging为$().ready ,即使不被推荐也是如此);如果特殊情况,它也会污染$的语义。

  2. 一个更实际的原因是:第二个版本是唯一一个不包含document ,因此在维护代码时更容易中断。 例:

     // BEFORE $(document).ready(foo); // AFTER: works $(document).ready(foo).on("click", "a", function() {}); 

    与此对比

     // BEFORE $().ready(foo); // AFTER: breaks $().ready(foo).on("click", "a", function() {}); 
  3. 与上面相关: ready就是一个怪物,它是(唯一的)方法,无论jQuery对象包装什么(即使它不包含任何东西),它的工作方式也是一样的。 这与其他jQuery方法的语义有很大的不同,所以特别依赖这个方法是合理的。

    更新:正如Esailija的评论指出的那样,从工程angular度来看,准确地说应该是一个静态方法,因为它的工作原理就是这样。

更新#2:挖掘源,似乎在1.4分支$()中的某个点更改为匹配$([]) ,而在1.3它performance得像$(document) 。 这一改变将加强上述理由。

我会说它简单的事实, $()返回一个空的对象,而$(document)不会这样你应用ready()到不同的事情; 它仍然有效,但我会说它不直观。

 $(document).ready(function(){}).prop("title") // the title $().ready(function(){}).prop("title") //null - no backing document 

更可能这只是一个文档错误,应该修复,使用$().ready(handler)的唯一缺点是它的可读性。 当然,争辩说$(handler)是一样不可读的。 我同意, 这就是为什么我不使用它

你也可以争辩说,一种方法比另一种更快。 但是,您多久一次在单个页面上连续调用这种方法才能发现差异?

最终归结为个人偏好。 除了可读性参数以外,使用$().ready(handler)没有任何缺点。 在这种情况下,我认为这个文档是无法领先的。

为了明显地说明三者之间存在一些不一致,我加了第四个常用的forms: (function($) {}(jQuery));

有了这个标记:

 <div >one</div> <div>two</div> <div id='t'/> 

和这个代码:

 var howmanyEmpty = $().ready().find('*').length; var howmanyHandler = $(function() {}).find('*').length; var howmanyDoc = $(document).ready().find('*').length; var howmanyPassed = (function($) { return $('*').length; }(jQuery)); var howmanyYuck = (function($) {}(jQuery)); var howmanyYuckType = (typeof howmanyYuck); $(document).ready(function() { $('#t').text(howmanyEmpty + ":" + howmanyHandler + ":" + howmanyDoc + ":" + howmanyPassed + ":" + howmanyYuckType); }); 

上一条语句的div的显示结果是:0:9:9:9:undefined

所以,只有Handler和Doc版本符合jQuery约定返回使用的东西,因为他们得到的文档select器和通过的forms,你必须返回的东西(我不会这样做,我会想,但只是把它显示“里面”有东西)。

这是好奇的小提琴版本: http : //jsfiddle.net/az85G/

我认为这比可读性更好。

这一个不是很有performance力

 $().ready(handler); 

 $(document).ready(handler) 

也许他们正在尝试推广某种forms的惯用jQuery。