javascript - 如何在 jQuery/JavaScript 中扩展返回的对象

Question

我想扩展/派生自 jQuery 的 $.parseXML() 函数返回的 XML 文档，以添加我自己的属性/函数。我是 jQuery/JavaScript 对象继承的新手。我已经尝试阅读整个网络，但我没有“理解”它。

例如，在 C# 类中，我可以编写如下内容(保持简单):

public class MyXmlDocument : XmlDocument
{
  public MyXmlDocument(string xmlText)
  {
    this.LoadXml(xmlText);
  }

  public string SomeVariable;
  ...

  public XmlNode FindCertainNode()
  {
    return this.SelectSingleNode("certain");
  }
  ...
}

MyXmlDocument xmlDoc = new MyXmlDocument(xmlText);
xmlDoc.AppendChild(...);  // XmlDocument method
XmlNode xmlNode = xmlDoc.FindCertainNode();  // MyXmlDocument method
etc.

我犹豫是否要展示我的 jQuery/JavaScript 尝试，因为我很迷茫，但我知道人们喜欢看到一些东西，所以请将其视为“我一直在玩的一些想法”:

// One approach
function XMLDoc(xmlText)
{
  var parseXML = function (xmlText)
  {
    //var parser = new DOMParser();
    //var xmlDoc = parser.parseFromString(xmlText, "text/xml");
    var xmlDoc = $.parseXML(xmlText);
    return xmlDoc;
  };

  var findCertainNode = function ()
  {
    return this.find('certain');
  }

  return parseXML(xmlText);
}

// Another approach
var XMLDoc = $.extend({}, $.parseXML.prototype, {
  findCertainNode: function () {
    this.find('certain');
  }
});

我希望能够访问 XML 文档的现有功能以及我自己的扩展，如下所示:

var xmlDoc = new XMLDoc(xmlText);
var $xmlDoc = $(xmlDoc);
$xmlDoc.find('certain');  // jQuery method
$xmlDoc.findCertainNode();  // my additional method

我也知道我不清楚我的代码应该返回纯 JavaScript 对象还是 jQuery 对象。我正在考虑 jQuery 的，这样我就可以轻松地调用 jQuery 的 .find() 等。

对我来说重要的是代码应该全部包装在单个函数/对象或类似的函数/对象中以供编辑/查看，就像我的两次尝试一样。

如果有人可以展示他们将如何实现 C# 模式，我认为这会回答我的问题，我将不胜感激。

编辑:解决方案

我将下面@Karol 的解决方案 ( https://stackoverflow.com/a/42672481/489865 ) 标记为已接受的解决方案，因为他做了最多的工作来回答我的问题。

但是，我开始意识到从 $.parseXML()/DOMParser().parseFromString() 返回的对象不是一些特殊的“XML 文档” ，它只是一个元素，因此没有特殊的方法。从它派生/继承是不值得的，所以封装就足够了，也更简单了。我的模式看起来像:

var XMLDoc = function (xmlText) {
  this._xmlDoc = $.parseXML(xmlText);
};

$.extend(XMLDoc.prototype, {
    doc: this._xmlDoc,
    find: function (selector) {
      return $(this._xmlDoc).find(selector);
    },
    findCertain: function () {
      return $(this._xmlDoc).find("certain");
    },
    ...
});

var xmlDoc = new XMLDoc(xmlText);
xmlDoc.find('something');
xmlDoc.findCertainNode();

Answer 1

尝试这样做:

function XMLDoc(xmlText) { //constructor
  this._xmlDoc = $.parseXML(xmlText); //'_' is JS convention for private fields
}
XMLDoc.prototype = {
  findCertainNode: function() {
    return $(this._xmlDoc).find('certain');
  }
  /* other methods here */
}

var myXML = new XMLDoc('<a><certain /></a>')
myXML.findCertainNode(); //[<certain />]

或与 ES6 语法相同:

class XMLDoc {
  constructor(xmlText) {
    this._xmlDoc = $.parseXML(xmlText);
  }
  findCertainNode() {
    return $(this._xmlDoc).find('certain');
  }
}

var myXML = new XMLDoc('<a><certain /></a>')
myXML.findCertainNode(); //[<certain />]

我认为真正从 jQuery 继承是不可能的，但如果你真的想以 C# 的方式使用它，你可以这样做:

Object.keys(Object.getPrototypeOf($())).forEach(function(key){
  XMLDoc.prototype[key] = function() {
    return $(this._xmlDoc)[key].apply(null, arguments);
  }
})

或者在 ES6 中:

Object.keys(Object.getPrototypeOf($())).forEach(key => {
  XMLDoc.prototype[key] = () => {
    return $(this._xmlDoc)[key](...arguments);
  }
})

然后你可以触发所有继承的 jQuery 方法。

如果您想重载其中一些，请记住在上面的代码之后执行此重载。