JQuery 如何用另一个包含事件处理程序的元素来扩展一个元素？

Question

是否有解决方案来创建一个虚拟元素及其属性、方法和事件处理程序，并用它扩展现有元素？ 例如：

var dummyElement = $('<div />', {
  // properties
  ...
  // methods
  ...
  // event handlers
  ...
});

然后，

$.extend( $('#myElement'), dummyElement );

现在，$('#myElement') 除了它自己的属性、方法和事件处理程序之外，还具有 dummyElement 的属性、方法和事件处理程序。

是否可以？我怎样才能用 JQuery 做到这一点？

谢谢

Answer 1

IMO 你根本不需要虚拟元素。在下面的示例中，我演示了一种在纯 J​​avaScript 中创建元素的简单方法。

源代码

createElement: function (options) {
    /// <summary>Creates a document object model (DOM) element.</summary>
    /// <param name="options" type="Object">An object that contains tag name, attributes, events, properties and children.</param>

    var clone = this.extend({}, options);

    // Create element
    var e = document.createElement(clone.tag);
    delete clone.tag;

    // Assign attributes
    if (clone.attributes) {

        for (var attrib in clone.attributes) {
            e.setAttribute(attrib.replace('
您可以使用 jQuery 重写上述代码来扩展您的元素，而不是创建一个新元素。
 使用
Util.createElement({
    tag: 'input',
    type: 'checkbox',
    checked: this.checked,
    events: {
        change: function(e) { // ... }
    }
});

, ''), clone.attributes[attrib]);
        }

        delete clone.attributes;
    }

    // Create and append children if has
    if (clone.children) {

        for (var idx in clone.children) {
            e.appendChild(this.createElement(clone.children[idx]));
        }

        delete clone.children;
    }

    // Assign event handlers
    if (clone.events) {

        for (var en in clone.events) {

            var handler = clone.events[en];

            if (handler instanceof Function)
                this.addHandler(e, en, handler);
        }

        delete clone.events
    }

    // Assign properties
    for (var prop in clone) {
        e[prop] = clone[prop];
    }

    return e;

},

addHandler: function (element, eventName, handler) {

    // Firefox is first, Of cource after chrome :p
    if (element.addEventListener) {
        element.addEventListener(eventName, handler, false);
    }
    else if (element.attachEvent) {
        element.attachEvent('on' + eventName, handler);
    }

},

extend: function (expando, properties, override) {

    if (properties && typeof (properties) == 'object') {

        for (var prop in properties) {

            var val = properties[prop];

            if (!expando[prop] || override)
                expando[prop] = val;

        }

    }

    return expando;

}

您可以使用 jQuery 重写上述代码来扩展您的元素，而不是创建一个新元素。

使用

Answer 2

查看 jQuery 的 clone() 方法。与 replaceWith() 结合使用，我认为您可以完成类似的事情（但不完全是）您要查找的内容：

// 1- create dummy
var dummy - $('<div />');

// 2- add stuff to dummy...
// ex: adding a click handler, and an "alt" attribute
dummy.click(function(evt) { console.log("click"); }
dummy.attr("alt", "this is the alt text for dummy");

// 3- clone dummy, and the replace `#myElement` with the clone
$('#myElement').replaceWith( dummy.clone(true) );

注意：在示例中创建 dummyElement 时使用的代码不是 jQuery 函数。据我所知，您不能仅通过将属性、方法和处理程序作为第二个参数传递给 jQuery 函数来添加它们。如果您确实传递了第二个参数，jQuery 会将其解释为解析选择器的上下文。我展示了添加单击处理程序和属性的示例。

---

编辑：如果您只是尝试将对象属性（如您所说：“属性”、“方法”和“事件处理程序”）从一个 HTML 元素复制到另一个 HTML 元素，则 $ .extend(...) 是完成这项工作的工具。只需确保您正在操作 HTML 元素本身，而不是 Jquery 集对象。看起来像这样：

var dummy = $('<div />');
var myElement = $('#myElement');
$.extend(myElement.get(0), dummy.get(0));

Answer 3

好的。感谢不同的答案，特别是来自Lee的答案。
看起来 $.extend(...) jQuery 方法并不是为了从另一个 DOM 元素扩展一个 DOM 元素而设计的。但它可以从对象扩展 DOM 元素。这是一个解决方案：

1）首先我创建扩展对象。每个扩展都必须定义一个 initExtension() 方法。下面是创建两个扩展对象的示例：

var myObjExtension1 = {
  // constructor
  initExtension : function() {
    // Add some data properties
    this.something = 'something';

    // Add some method properties
    this.doSomething = function() { alert(this.something); };

    // Add some DOM elements
    $(this).append('<div>element created from extension 1</div>');  

    // Add some event handlers
    $(this).click(
      function(evt) {
        $(this).append('<div>element created from extension 1 click event</div>');
      }
    );
  }
};

var myObjExtension2 = {
  // constructor
  initExtension : function() {
    // Add some data properties
    this.more = 'more';

    // Add some method properties
    this.doMore = function() { alert(this.more); };

    // Add some DOM elements
    $(this).append('<div>element created from extension 2</div>');  

    // Add some event handlers
    $(this).click(
      function(evt) {
        $(this).append('<div>element created from extension 2 click event</div>');
      }
    );
  }
};

2) 为了轻松扩展我需要扩展的所有元素，我创建了一个小 jQuery 插件。该插件包含一种使用指定扩展名扩展源元素的方法：

(function($){
  $.fn.extendWith = function( objExtension ) {
    this.each( 
      function(index) {
        $.extend( this, objExtension );
        this.initExtension();
      }
    );
    return this; // jQuery chaining
  }
})(jQuery);

3) 最后，我扩展了一些 jQuery 元素。请注意，在下面的示例中，我通过链接扩展了与 someElement 类匹配的元素，首先使用 myObjExtension1，然后使用 myObjExtension2 extendWith(...) 插件方法：

$('.someElement').extendWith( myObjExtension1 ).extendWith( myObjExtension2 );

现在，所有 myObjExtension1 和 myObjExtension2 数据属性、方法属性和事件处理程序可从我的 $('.someElement') 元素中获得。例子：

$('.someElement').each( function() {
  this.doSomething();
  this.doMore();
});