JavaScript : 라이브 콜렉션의 요소를 자동으로 초기화하는 방법이 있습니까?

Question

는 다음과 같은 예를

// a sample constructor 
var SampleConstructor = function(element,options); 

// a full live collection 
var domCollection = document.getElementsByTagName('*'); 

// bulk init 
for (var i = 0; i < domCollection.length; i++) { 
    if ('some conditions required by component') { 
    new SampleConstructor(domCollection[i], {}); 
    } 
} 

질문

• 는 DOM에 새로 추가 된 요소 샘플 생성자에 의해 초기화받을 것인가를 생각해?
• 그렇지 않은 경우 jQuery없이 간격마다 컬렉션을 반복하지 않아도됩니다.

주

필요한 솔루션은 내가 확인하기 위해 가장 효율적인 생각 IE8 +

Answer 1

function compare(arr,newarr,callback){ 
    var index=0; 
    var newindex=0; 
    while(newarr.length!=newindex){ 
    if (arr[index] == newarr[newindex]) { 
    index++; newindex++; 
    } else { 
    callback (newarr[newindex]); 
    newindex++; 
    } 
    } 
} 
//onload 
var store=[]; 
compare([],store=document.getElementsByClassName("*"),yourconstructor); 
//regular 
var temp=document.getElementsByClassName("*"); 
compare(store,temp,yourconstructor); 
store=temp; 

입니다. 내가 아는 유일한 해결책은 setTimeout을 사용하여 정기적으로 수행하는 것입니다.

var add = Element.prototype.appendChild; 
Element.prototype.appendChild=function(el){ 
yourconstructor(el); 
add.call(this,el); 
}; 

참고 : 다음

Answer 2

내 comment을 설명하는 코드 샘플 매우 해키 또 다른 방법은 모든 DOM 변경, 같은 것을 JS 감지하는 것입니다. 그러나 DOM 변경 사항을 추적 할 수는 없지만 Angular와 같은 최신 JavaScript 프레임 워크에서 널리 사용되는 반대 방법을 선호합니다. 즉, 원시 데이터 구조를 관찰하고 이에 따라 DOM을 업데이트합니다. 당신이 직접 DOM 조작을 처리하는 경우

// Observable 
 

 
Observable = function() { 
 
    this.observers = []; 
 
}; 
 

 
Observable.prototype.addObserver = function (observer) { 
 
    this.observers.push(observer); 
 
}; 
 

 
Observable.prototype.emit = function (evt, args) { 
 
    var i, n = this.observers.length; 
 
    for (i = 0; i < n; i++) { 
 
    this.observers[i].update(this, evt, args); 
 
    } 
 
}; 
 

 
// Collection 
 

 
Collection = function() { 
 
    this.items = []; 
 
    Observable.call(this); 
 
}; 
 

 
Collection.prototype = new Observable(); 
 

 
Collection.prototype.size = function() { 
 
    return this.items.length; 
 
}; 
 

 
Collection.prototype.add = function (item) { 
 
    this.items.push(item); 
 
    this.emit("added", [item]); 
 
}; 
 

 
Collection.prototype.removeAt = function (i) { 
 
    var items = this.items.splice(i, 1); 
 
    this.emit("removed", [items[0], i]); 
 
}; 
 

 
// program 
 

 
var i, s = "h*e*l*l*o"; 
 
var collection = new Collection(); 
 
var words = document.getElementsByTagName("div"); 
 
var wordA = words[0], wordB = words[1]; 
 

 
collection.addObserver({ 
 
    update: function (src, evt, args) { 
 
    this[evt](args); 
 
    }, 
 
    added: function (args) { 
 
    wordA.appendChild(
 
     this.createSpan(args[0]) 
 
    ); 
 
    wordB.appendChild(
 
     this.createSpan(args[0]) 
 
    ); 
 
    }, 
 
    removed: function (args) { 
 
    wordB.removeChild(
 
     wordB.childNodes[args[1]] 
 
    ); 
 
    }, 
 
    createSpan: function (c) { 
 
    var child; 
 
    child = document.createElement("span"); 
 
    child.textContent = c; 
 
    return child; 
 
    } 
 
}); 
 

 
for (i = 0; i < s.length; i++) { 
 
    collection.add(s[i]); 
 
} 
 

 
for (i = 1; i < 5; i++) { 
 
    collection.removeAt(i); 
 
} 
 

 
function rdm (max) { 
 
    return Math.floor(
 
    Math.random() * max 
 
); 
 
} 
 

 
function addRdmLetter() { 
 
    collection.add(
 
    (rdm(26) + 10).toString(36) 
 
); 
 
} 
 

 
function removeRdmLetter() { 
 
    var n = collection.size(); 
 
    if (n > 0) collection.removeAt(rdm(n)); 
 
} 
 

 
function showLetters() { 
 
    alert(collection.items.join("")); 
 
}

body { 
 
    font-size: 16px; 
 
    font-family: Courier; 
 
} 
 

 
span { 
 
    padding: 5px; 
 
    display: inline-block; 
 
    margin: -1px 0 0 -1px; 
 
    border: 1px solid #999; 
 
} 
 

 
#buttons { 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 10px; 
 
}

<p>wordA</p><div></div> 
 
<p>wordB</p><div></div> 
 
<div id="buttons"> 
 
    <button type="button" onclick="addRdmLetter()">Add letter</button> 
 
    <button type="button" onclick="removeRdmLetter()">Remove letter</button> 
 
    <button type="button" onclick="showLetters()">Show letters</button> 
 
</div>