88

来自jQuery API 文档站点ready

以下所有三种语法都是等效的：

  • $(文档).ready(处理程序)
  • $().ready(handler) （不推荐）
  • $（处理程序）

做完功课阅读和玩源代码后，我不知道为什么

$().ready(handler)

不推荐。第一种和第三种方式完全相同，第三种方式在缓存的 jQuery 对象上调用 ready 函数document：

rootjQuery = jQuery(document);
...
...

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

但是ready函数与被选中节点元素的选择器没有交互，ready源码：

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

如您所见，它只是将回调添加到内部队列（readyList）中，而不会更改或使用集合中的元素。这使您可以ready在每个 jQuery 对象上调用该函数。

像：

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

最后......我的问题：为什么$().ready(handler)不推荐？

4

6 回答 6

89
于 2012-05-27T20:55:54.523 回答
11

由于不同选项的作用与您指出的几乎相同，因此是时候戴上图书馆作家的帽子并进行一些猜测了。

  1. 也许 jQuery 的人希望$()将来可以使用（令人怀疑，因为$().ready有文档证明可以工作，即使不推荐；它也会污染$if 特殊情况下的语义）。

  2. 一个更实际的原因：第二个版本是唯一没有结束 wrapping的版本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 的评论所指出的，从工程的角度来看ready，它确实应该是一种静态方法，因为它的工作原理是这样的。

更新#2：挖掘源代码，似乎在 1.4 分支中的某个时间点$()更改为 match $([])，而在 1.3 中它的行为类似于$(document). 这一变化将加强上述理由。

于 2012-05-25T11:19:39.503 回答
4

我会说它只是$()返回一个空对象的事实，而$(document)您并不适用ready()于不同的事物；它仍然有效，但我会说它不直观。

$(document).ready(function(){}).prop("title") // the title
$().ready(function(){}).prop("title")  //null - no backing document
于 2012-05-25T11:23:15.557 回答
3

这很可能只是一个文档错误，应该修复，使用的唯一缺点$().ready(handler)是它的可读性。当然，争辩说这$(handler)同样难以理解。我同意，这就是我不使用它的原因。

你也可以争辩说一种方法比另一种更快。但是，您多久在单个页面上连续多次调用此方法以注意到差异？

最终归结为个人喜好。$().ready(handler)除了可读性参数之外，使用没有任何缺点。我认为在这种情况下，文档是误导性的。

于 2012-05-25T14:33:30.940 回答
2

只是为了清楚地表明这三者之间存在一些不一致，另外我添加了第四种常用形式：(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 约定一致，即在获得文档选择器时返回有用的东西，并且使用 Passed 表单你必须返回一些东西（我认为我不会这样做，但把它放在显示“内部”它有一些东西）。

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

于 2012-05-25T13:06:10.263 回答
0

我认为这真的比其他任何事情都更具有可读性。

这个没有表现力

$().ready(handler);

作为

$(document).ready(handler)

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

于 2012-05-25T12:11:57.540 回答