javascript - 将元素插入 DOM 的 JS 链接模式

Question

我正在努力使下面的模式起作用。我对使用图书馆不感兴趣。

function _createElement(tagNm, attr){
    var el = document.createElement(tagNm);
    for(var at in attr){
        el.setAttribute(at, attr[at]);
    }
}
//below function is not correct just for giving you idea
function _append(ele){
    this.appendChild(ele)
    return this;
}
// I would like to be able to achive following chaining patter with this.
var div = document.getElementById('div');
div._append( _createElement('div', {
    id : 'parent', className: 'parent'
})).appendChile( _createElement('div', {
    id : 'child', className: 'child'
}));

Answer 1

要使类似的东西起作用，您将必须有某种对象作为链接调用的焦点。该对象将是 this 的值，换句话说，在你的“_append”函数中。另一种方法是让您的函数扩展 native DOM 对象原型(prototype)，但这在较旧的 IE 版本中不起作用(甚至可能不适用于较新的版本；我不确定)。

您也许可以将所有内容都放在一个围绕 document.getElementById() 的包装器中.您将为所有 append() 设置一个“类”对象和 appendChild以及您想为该设施收集的任何其他功能。这些功能都将在原型(prototype)上进行:

function chainingWrapper(elem) {
  this.targetElement = elem;
}

chainingWrapper.prototype = {
  append: function(arg) {
    // do the append operation
    return this;
  },
  appendChild: function(arg) {
    // do the appendChild operation
    return this;
  },
  // ...
};

现在您将拥有一个实用程序来开始:

function forElement(id) {
  return new chainingWrapper(document.getElementById(id));
}

那么你可以这样做:

var div = forElement("myDiv");
div.appendChild(xyz).append(abc);

在像“append”这样的函数中，你可以引用 <div>作为this.targetElement .当然，您可以使用这种结构做无数其他有趣的事情。