如何避免观察者变异中的代码重复

Question

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

Answer 1

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:

1. Pass parameter to self-invokable function

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

2. Create separate, callable function

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.