要素を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"関数の値になります。代わりに、あなたの関数がネイティブのDOMオブジェクトのプロトタイプを拡張することがありますが、それは古いIEのバージョンでは機能しません（そして、新しいバージョンでも動作しません;私は分かりません）。

document.getElementById()のラッパーですべてをルートできます。 append()とappendChildのすべての "クラス"オブジェクトを設定し、この機能のために収集したい他の機能を設定します。これらの機能はすべてのことのプロトタイプに行くだろう：

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

それではあなたができる：

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; 
    }, 
    // ... 
}; 

今、あなたは物事を始めるためのユーティリティを持っています

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

"append"のような関数の中では、<div>をthis.targetElementと呼ぶことができます。もちろん、この種の構造でできることは他にもたくさんあります。

Answer 2

あなたが持っている問題は、_appendというメソッドがdiv（DOM要素）にありません。 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' 
})); 

NBをあなたがフォローしたい場合このアプローチでは、Javascriptのオブジェクトモデルについてもう少し詳しく知る必要があります。

Answer 3

もしあなたがそれを使いたくないとしても、控え目には、jQueryのようないくつかのJavaScriptライブラリを見てください。彼らはあなたが達成しようとしているものとまったく同じです。

jQueryは、DOMElementをWrapperに入れて、そのラッパーの関数を呼び出します。これらの関数は、指定されたDOMObjectの下を操作します。 jQueryの "$" 機能を実装するために

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

そして、あなたの挑戦：

あなたの例では、次のようになります。コードはhereです。

Answer 4

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")); 

しかし、それはおそらく良い考えではありません。他の人が言っている何

In Javascript, can you extend the DOM?

http://perfectionkills.com/whats-wrong-with-extending-the-dom/

Answer 5

が正しいです。 _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' 
}));