将空对象传递给jQuery函数
在阅读Ben Alman的Pub / Sub库时,我对第一行将一个空对象传递给jQuery函数感到困惑。 此外,他使用绑定函数对象只是将它应用于几乎“空”的对象(我使用firebug来检查该对象,它只返回一个jQuery对象包含空对象)。 有人可以为我解释这个逻辑吗? 非常感谢! P / S:我理解非框架上下文中Pub / Sub模式背后的用法和想法,只是不了解它在jQuery中的实现。
这是我读过的图书馆代码:
(function($){ var o = $({}); $.subscribe = function() { o.bind.apply( o, arguments ); }; $.unsubscribe = function() { o.unbind.apply( o, arguments ); }; $.publish = function() { o.trigger.apply( o, arguments ); }; })(jQuery);
当您创建元素的jQuery对象时…最终对象包括所有jQuery方法
简化示例:
{ element: 'div' jQuery:{ hide:function(){}, animate:function(){} on:function(){} } }
演示代码中的空对象用于执行相同的操作。 一旦它被包装在$()
就可以将jQuery事件处理程序绑定到它,因为该对象包含许多jQuery方法(不是全部)作为属性
你可以写:
o.on('myCustomeEvent',doSomething);
在代码的另一部分
o.trigger('myCustomeEvent');
它只是一种创建某种空容器来存储事件处理程序的方法。
一些jQuery方法也可用于DOM元素以外的对象,如jQuery
文档[docs]中所述 :
使用普通对象
目前,jQuery包装的普通JavaScript对象支持的唯一操作是:
.data()
.prop()
.unbind()
.trigger()
.triggerHandler()
.trigger()
和.triggerHandler()
。 在普通对象上使用.data()
(或任何需要.data()
方法)将在对象上生成一个名为jQuery{randomNumber}
的新属性(例如jQuery123456789
)。// define a plain object var foo = {foo:'bar', hello:'world'}; // wrap this with jQuery var $foo = $(foo); // test accessing property values var test1 = $foo.prop('foo'); // bar // test setting property values $foo.prop('foo', 'foobar'); var test2 = $foo.prop('foo'); // foobar // test using .data() as summarized above $foo.data('keyName', 'someValue'); console.log($foo); // will now contain a jQuery{randomNumber} property // test binding an event name and triggering $foo.bind('eventName', function (){ console.log('eventName was called'); }); $foo.trigger('eventName'); // logs 'eventName was called'
[…]
和.trigger
文档[docs] :
.trigger()
方法可用于jQuery集合,它们包含类似于pub / sub机制的纯JavaScript对象; 触发事件时,将调用绑定到对象的任何事件处理程序。
这正是代码中发生的事情:
-
var o = $({});
从空的普通对象创建一个jQuery对象。 -
o.bind.apply( o, arguments );
将事件处理程序绑定到该对象。 -
o.trigger.apply( o, arguments );
触发绑定到该对象的事件处理程序。