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

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

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'
}));

---

要让这样的东西起作用，你必须有某种对象作为链接调用的焦点。对象将是

this

的值，换句话说，在“\u append”函数中。另一种方法是让您的函数扩展本机DOM对象原型，但这在较旧的IE版本中不起作用（甚至可能在较新的版本中也不起作用；我不确定）

您也许可以在

document.getElementById（）周围的包装器中创建所有根目录。您需要为所有
append（）
和
appendChild
以及您希望为此工具收集的任何其他函数设置一个“class”对象。这些功能都将在原型上实现：

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”之类的函数中，您可以将该
称为
this.targetElement
。当然，对于这种结构，你还可以做很多其他有趣的事情。
要想让类似的东西起作用，你必须有某种对象作为链接调用的焦点。对象将是
this
的值，换句话说，在“\u append”函数中。另一种方法是让您的函数扩展本机DOM对象原型，但这在较旧的IE版本中不起作用（甚至可能在较新的版本中也不起作用；我不确定）

您也许可以在
document.getElementById（）周围的包装器中创建所有根目录。您需要为所有
append（）
和
appendChild
以及您希望为此工具收集的任何其他函数设置一个“class”对象。这些功能都将在原型上实现：

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”之类的函数中，您可以将该
称为
this.targetElement
。当然，使用这种结构还可以做很多其他有趣的事情。
问题是
div
（DOM元素）没有名为
\u append
的方法。您无法可靠地修改DOM元素的原型，因此无法添加该方法（即使可以，这也不是一个好主意）

相反，您需要创建一个包装器对象，并在其上创建
append
方法：

function Appender(id) {
    if (!(this instanceof Appender)) { // if the new keyword wasn't used
        return new Appender(el);
    }

    this.element = document.getElementById(id); // create an instance variable of the element with the id passed

    this.append = function(child) { // proxy the appendChild function
        this.element.appendChild(child);
        return this; // return the Appender object for chaining
    };
}

然后，您可以按如下方式使用它：

Appender('div').append(_createElement('div', {
    id : 'parent', className: 'parent'
})).append( _createElement('div', {
    id : 'child', className: 'child'
}));

注意：如果您想采用这种方法，您需要更多地了解Javascript的对象模型
 您遇到的问题是
div
（DOM元素）没有名为
\u append
的方法。您无法可靠地修改DOM元素的原型，因此无法添加该方法（即使可以，这也不是一个好主意）

相反，您需要创建一个包装器对象，并在其上创建
append
方法：

function Appender(id) {
    if (!(this instanceof Appender)) { // if the new keyword wasn't used
        return new Appender(el);
    }

    this.element = document.getElementById(id); // create an instance variable of the element with the id passed

    this.append = function(child) { // proxy the appendChild function
        this.element.appendChild(child);
        return this; // return the Appender object for chaining
    };
}

然后，您可以按如下方式使用它：

Appender('div').append(_createElement('div', {
    id : 'parent', className: 'parent'
})).append( _createElement('div', {
    id : 'child', className: 'child'
}));

注意：如果您想采用这种方法，您需要更多地了解Javascript的对象模型
 即使您不想使用它，也应该防备地查看一些JavaScript库，如。他们做的正是你想要达到的

jQuery通过将domeElement放在包装器中，然后调用该包装器上的函数来实现这一点。这些函数操作下面的给定对象

您的示例如下所示：

var div = document.getElementById('div');
$(div).append( _createElement('div', {id : 'parent', className: 'parent'})...

您可以尝试实现jQuery的“$”函数。代码可以找到。
即使您不想使用它，您也应该防备地查看一些JavaScript库，如。他们做的正是你想要达到的

jQuery通过将domeElement放在包装器中，然后调用该包装器上的函数来实现这一点。这些函数操作下面的给定对象

您的示例如下所示：

var div = document.getElementById('div');
$(div).append( _createElement('div', {id : 'parent', className: 'parent'})...

您可以尝试实现jQuery的“$”函数。可以找到代码。
可以扩展DOM。下面是一个工作示例：

HTMLElement.prototype.append = function(ele) {
    return this.appendChild(ele); // returns the new child
}

function _createElement(tagNm, attr){
    var el = document.createElement(tagNm);
    for (var at in attr) {
        el.setAttribute(at, attr[at]);
    }
    return el;
}

var div = document.getElementById('myDiv');
div.append(_createElement('div', {
    id : 'parent', className: 'parent'
})).appendChild( _createElement('div', {
    id : 'child', className: 'child'
})).appendChild(document.createTextNode("test"));

但这可能不是个好主意：


可以扩展DOM。下面是一个工作示例：

HTMLElement.prototype.append = function(ele) {
    return this.appendChild(ele); // returns the new child
}

function _createElement(tagNm, attr){
    var el = document.createElement(tagNm);
    for (var at in attr) {
        el.setAttribute(at, attr[at]);
    }
    return el;
}

var div = document.getElementById('myDiv');
div.append(_createElement('div', {
    id : 'parent', className: 'parent'
})).appendChild( _createElement('div', {
    id : 'child', className: 'child'
})).appendChild(document.createTextNode("test"));

但这可能不是个好主意：


其他人所说的是正确的。您需要了解如何将方法_append添加到对象中。例如，jQuery在每次调用后返回一个jQuery对象。jQuery对象具有.each、.ajax等函数。它是一个大包装器

像这样的东西会让你找到你想要的锁链：

    function _createElement(tagNm, attr){
        var el = document.createElement(tagNm);
        for(var at in attr){
            el.setAttribute(at, attr[at]);
    }
    return el;
}

function customObj(Id) {
    var obj = document.getElementById(Id);
    obj._append = function(el) { this.appendChild(el); return this; }
    return obj;
}

// I would like to be able to achive following chaining patter with this.
var div = customObj('test');
div._append( _createElement('div', {
    id : 'parent', className: 'parent'
}))._append( _createElement('div', {
    id : 'child', className: 'child'
}));

其他人所说的是正确的。您需要了解如何将方法_append添加到对象中。例如，jQuery在每次调用后返回一个jQuery对象。jQuery对象具有.each、.ajax等函数。它是一个大包装器

像这样的东西会让你找到你想要的锁链：

    function _createElement(tagNm, attr){
        var el = document.createElement(tagNm);
        for(var at in attr){
            el.setAttribute(at, attr[at]);
    }
    return el;
}

function customObj(Id) {
    var obj = document.getElementById(Id);
    obj._append = function(el) { this.appendChild(el); return this; }
    return obj;
}

// I would like to be able to achive following chaining patter with this.
var div = customObj('test');
div._append( _createElement('div', {
    id : 'parent', className: 'parent'
}))._append( _createElement('div', {
    id : 'child', className: 'child'
}));

lwburks是另一种方式，它与扩展dom无关。lwburks是另一种方式，与扩展dom无关。