0

下面的示例显示了在自定义 JavaScript 对象中提供事件处理的两种常见的现代方法。（我认为。）该示例基于通过 AJAX 在 jQuery 中加载数据的常见场景，其中传入的参数也需要在发布的最终完成事件中提供。

CustomClass.prototype.loadData(param1) {

  var thisObj = this;
  $.ajax({
    url : this.reqUrl,
    context: this,

    // There are various ways to do this, including writing the handlers inline
    // or using $.proxy. Shouldn't be important for this question.
    success : function(dataResp, textStatus) {thisObj.onSuccess(dataResp,
                                                                textStatus,
                                                                param1)}
  });
};

// Manage listeners. Storing functions here, but
// could also use objects with predefined functions.
CustomClass.prototype.addListener(callbackFunc) {
  this.listeners.Add(callbackFunc);
}

CustomClass.prototype.onSuccess(dataResp, textStatus, param1) {

  //**OPTION 1**
  // Publish event via callbacks/listeners
  for(var i=0; i<this.listeners; i++)
    this.listeners[i](dataResp, param1);

  //**OPTION 2**
  // Publish event via trigger/on
  $(this).trigger('my-event-name', [dataResp, param1]);

};

下面显示了这两个选项在代码中的外观：

function handler(dataResp, param1) {
  // do work, param1 == 'whatever'
}

c1 = new CustomClass();
c1.addListener(handler);
c1.loadData('whatever');

c2 = new CustomClass();
$(c2).on('my-event-name', handler);
c2.loadData('whatever');

结果与上述任一选项相同。使用 jquery 的 on/trigger 支持消除了管理监听器的代码，但是：

  • 一种方法肯定比另一种更好吗？
  • 使用 on/trigger 时是否有任何重大的权衡，例如性能？

关于将事件侦听器样式编程与 DOM 元素结合使用的好处，有很多关于 SO 的问题/答案。并且有很多关于在非 DOM 对象中提供事件处理的各种方法的问题/答案。但是，对于非 DOM 对象的首选方法和潜在的权衡，我找不到任何明确的信息，尤其是在上述示例等非平凡用例中。

编辑...当然在发布后，我看到这个问题/答案（非常）接近。但是，除了向自定义对象添加其他属性之外，它不指示是否有任何其他后果。另外，我相信我的问题提供了一个更清晰的用例。

4

1 回答 1

0

回答我自己的问题：

在编写自定义对象时最好使用回调，这些对象不会生成或使用事件作为 DOM 交互的一部分。jQuery 的 on/trigger 事件处理的使用继承了许多额外的代码路径，因为它与 jQuery 更大的事件处理子系统挂钩。一些逻辑用于处理浏览器差异。使用附加代码是因为它重用和/或复制了 Web 浏览器中的事件处理功能，但在跨浏览器上下文中。

相比之下，使用自定义回调处理是微不足道的。Jquery 还提供了 $.Callbacks 函数，它可以节省一些编码，并且可以选择包含更高级的回调功能。

对这个问题的更完整的答案将提供各种方法的时序分析。但是，仅 jquery v1.9.1 的来源就提供了强有力的轶事证据：

jQuery的触发方法：

trigger: function( event, data, elem, onlyHandlers ) {
    var handle, ontype, cur,
        bubbleType, special, tmp, i,
        eventPath = [ elem || document ],
        type = core_hasOwn.call( event, "type" ) ? event.type : event,
        namespaces = core_hasOwn.call( event, "namespace" ) ? event.namespace.split(".") : [];

    cur = tmp = elem = elem || document;

    // Don't do events on text and comment nodes
    if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
        return;
    }

    // focus/blur morphs to focusin/out; ensure we're not firing them right now
    if ( rfocusMorph.test( type + jQuery.event.triggered ) ) {
        return;
    }

    if ( type.indexOf(".") >= 0 ) {
        // Namespaced trigger; create a regexp to match event type in handle()
        namespaces = type.split(".");
        type = namespaces.shift();
        namespaces.sort();
    }
    ontype = type.indexOf(":") < 0 && "on" + type;

    // Caller can pass in a jQuery.Event object, Object, or just an event type string
    event = event[ jQuery.expando ] ?
        event :
        new jQuery.Event( type, typeof event === "object" && event );

    event.isTrigger = true;
    event.namespace = namespaces.join(".");
    event.namespace_re = event.namespace ?
        new RegExp( "(^|\\.)" + namespaces.join("\\.(?:.*\\.|)") + "(\\.|$)" ) :
        null;

    // Clean up the event in case it is being reused
    event.result = undefined;
    if ( !event.target ) {
        event.target = elem;
    }

    // Clone any incoming data and prepend the event, creating the handler arg list
    data = data == null ?
        [ event ] :
        jQuery.makeArray( data, [ event ] );

    // Allow special events to draw outside the lines
    special = jQuery.event.special[ type ] || {};
    if ( !onlyHandlers && special.trigger && special.trigger.apply( elem, data ) === false ) {
        return;
    }

    // Determine event propagation path in advance, per W3C events spec (#9951)
    // Bubble up to document, then to window; watch for a global ownerDocument var (#9724)
    if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) ) {

        bubbleType = special.delegateType || type;
        if ( !rfocusMorph.test( bubbleType + type ) ) {
            cur = cur.parentNode;
        }
        for ( ; cur; cur = cur.parentNode ) {
            eventPath.push( cur );
            tmp = cur;
        }

        // Only add window if we got to document (e.g., not plain obj or detached DOM)
        if ( tmp === (elem.ownerDocument || document) ) {
            eventPath.push( tmp.defaultView || tmp.parentWindow || window );
        }
    }

    // Fire handlers on the event path
    i = 0;
    while ( (cur = eventPath[i++]) && !event.isPropagationStopped() ) {

        event.type = i > 1 ?
            bubbleType :
            special.bindType || type;

        // jQuery handler
        handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" );
        if ( handle ) {
            handle.apply( cur, data );
        }

        // Native handler
        handle = ontype && cur[ ontype ];
        if ( handle && jQuery.acceptData( cur ) && handle.apply && handle.apply( cur, data ) === false ) {
            event.preventDefault();
        }
    }
    event.type = type;

    // If nobody prevented the default action, do it now
    if ( !onlyHandlers && !event.isDefaultPrevented() ) {

        if ( (!special._default || special._default.apply( elem.ownerDocument, data ) === false) &&
            !(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem ) ) {

            // Call a native DOM method on the target with the same name name as the event.
            // Can't use an .isFunction() check here because IE6/7 fails that test.
            // Don't do default actions on window, that's where global variables be (#6170)
            if ( ontype && elem[ type ] && !jQuery.isWindow( elem ) ) {

                // Don't re-trigger an onFOO event when we call its FOO() method
                tmp = elem[ ontype ];

                if ( tmp ) {
                    elem[ ontype ] = null;
                }

                // Prevent re-triggering of the same event, since we already bubbled it above
                jQuery.event.triggered = type;
                try {
                    elem[ type ]();
                } catch ( e ) {
                    // IE<9 dies on focus/blur to hidden element (#1486,#12518)
                    // only reproducible on winXP IE8 native, not IE9 in IE8 mode
                }
                jQuery.event.triggered = undefined;

                if ( tmp ) {
                    elem[ ontype ] = tmp;
                }
            }
        }
    }

    return event.result;
}

有关其他信息，请参阅@kevin-b 对这个问题的评论，以及这个较旧的问题/答案。

于 2013-03-04T14:09:34.207 回答