There is the following structure (the example itself is non-working, it is here to understand the structure): sandbox
And in this structure some actions are repeated. How to avoid JS code duplication? For example in self-invoking functions.
// ObserverAddRule function ObserverAddRule() { const target1 = document.querySelector('#form_edit_rule.sc') const target2 = document.querySelector('#form_edit_rule.sc1') const config = { childList: true } const callback = function (mutationsList, observer) { for (let mutation of mutationsList) { if (mutation.type === 'childList') { (function(){ let scFrstItem = Array.from(document.querySelectorAll('.sc.acrList.frstItem.mySelect')).slice(-1) let scScndItem = Array.from(document.querySelectorAll('.sc.acrList.scndItem.scnd-title.mySelect')).slice(-1) let scElements = scFrstItem.concat(scScndItem) initChoices(false, '', false, false, scElements) delegateEventChoices() // <here you need to pass.sc> })(); (function(){ let sc1FrstItem = Array.from(document.querySelectorAll('.sc1.acrList.frstItem.mySelect')).slice(-1) let sc1ScndItem = Array.from(document.querySelectorAll('.sc1.acrList.scndItem.scnd-title.mySelect')).slice(-1) let sc1Elements = sc1FrstItem.concat(sc1ScndItem) initChoices(false, '', false, false, sc1Elements) delegateEventChoices() // <here you need to pass.sc1> })(); } } } const observer = new MutationObserver(callback) observer.observe(target1, config) observer.observe(target2, config) }
<form action="" id="form_edit_rule" method="post"> <div class="sc"> <div class="acrList"> <div class="frstItem"> <p class="mySelect">ТЕКСТ</p> </div> <div class="scndItem scnd-title"> <p class="mySelect">ТЕКСТ</p> </div> </div> </div> <br><br> <div class="sc1"> <div class="acrList"> <div class="frstItem"> <p class="mySelect">ТЕКСТ</p> </div> <div class="scndItem scnd-title"> <p class="mySelect">ТЕКСТ</p> </div> </div> </div> </form>
I really do not want to hang the mutation of the observer on their common parent - to redo a lot. But if this is the only method, then write about it
Only way to avoid duplication is by using parameters.
Self-invoked function is intended to run on-spot, only once, it's not intended to repeat.
So, if you have repeating functionality, then separate function(s) and/or use parameters for changeable data.
Two possible solutions:
https://jsfiddle.net/uxcva6wy/1/
const callback = function (mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
(function(namespaces){
for(let namespace in namespaces) {
let scFrstItem = Array.from(document.querySelectorAll(namespace + ' .acrList .frstItem .mySelect')).slice(-1)
let scScndItem = Array.from(document.querySelectorAll(namespace + ' .acrList .scndItem.scnd-title .mySelect')).slice(-1)
let scElements = scFrstItem.concat(scScndItem)
initChoices(false, '', false, false, scElements)
delegateEventChoices() // <here you need to pass .sc>
}
})(['.sc', '.sc1']);
}
}
}
https://jsfiddle.net/uxcva6wy/2/
const doSomething = function(namespace){
let scFrstItem = Array.from(document.querySelectorAll(namespace + ' .acrList .frstItem .mySelect')).slice(-1)
let scScndItem = Array.from(document.querySelectorAll(namespace + ' .acrList .scndItem.scnd-title .mySelect')).slice(-1)
let scElements = scFrstItem.concat(scScndItem)
initChoices(false, '', false, false, scElements)
delegateEventChoices() // <here you need to pass .sc>
};
const callback = function (mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
doSomething('.sc');
doSomething('.sc1');
}
}
}
If you need more specific answer, please post more specific snippet.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.