Здравствуйте,
есть вот такой код инициализации компонентов:
k = {
find: ( el, selector ) => el.querySelector( selector ),
findAll: ( el, selector ) => el.querySelectorAll( selector ),
};
k.on( document, 'DOMContentLoaded', () => {
k.body = document.body;
k.initAddedComponents();
k.mutation = new MutationObserver( ( records ) => {
console.log( records );
let addedNodes = [];
let removedNodes = [];
records.forEach( record => {
if ( 0 < record.addedNodes.length ) {
addedNodes.push.apply( addedNodes, record.addedNodes );
}
if ( 0 < record.removedNodes.length ) {
removedNodes.push.apply( removedNodes, record.removedNodes );
}
} );
if ( 0 < removedNodes.length ) {
k.removeDeletedComponents();
}
addedNodes.forEach( el => {
if ( el instanceof Element ) {
//k.initAddedComponents( el );
}
} );
} );
k.mutation.observe( document.documentElement, {
subtree: true,
characterData: true,
childList: true,
} );
} );
removeDeletedComponents: () => {
for ( let id in k.components ) {
if ( false === document.body.contains( k.components[ id ].el ) ) {
k.remove( id );
}
}
},
initAddedComponents: ( element ) => {
let resEl = ( undefined === element ) ? document : ( ( null !== element.parentElement ) ? element.parentElement : element );
k.declaration.forEach( ( component ) => {
let elList = k.findAll( resEl, component.elSelector );
elList.forEach( ( el ) => {
if ( el[ component.name + 'Id' ] === undefined ) {
let id = k.genId( component.name );
el[ component.name + 'Id' ] = id;
el.names = Array.isArray( el.names ) ? el.names : [];
if ( ! el.names.includes( component.name ) ) {
el.names.push( component.name );
}
k.components[ id ] = new component.classDecl( el, component.elSelector );
}
} );
} );
},
Проблема в производительности: при большом количестве addedNodes в мутациях (например, при отрисовке выпадающего списка в селекте), код в функции initAddedComponents начинает сильно тормозить браузер. С другой стороны, запускать initAddedComponents полностью на document целиком тоже не правильно. Возможно, есть какой-нибудь способ обнаруживать элементы с нужным классом более оптимально? Буду признателен за любую помощь и критику, спасибо!
