Question

具有以下结构（示例本身无法正常工作，在这里可以了解结构）：sandbox

在此结构中，将重复执行某些操作。如何避免JS代码重复？例如，在自调用功能中。

Conditional deletions incur a non-negligible performance cost and should be used sparingly.

// 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)
}

我真的不想把观察者的变异挂在他们的共同父母身上，以重做很多。但是，如果这是唯一的方法，那就写下来吧

Answer 1

唯一避免重复的方法是使用参数。

自调用功能只能在现场运行一次，不能重复使用。

因此，如果您具有重复功能，则可以单独使用功能和/或将参数用于可变数据。

两种可能的解决方案：

将参数传递给自调用函数

https://jsfiddle.net/uxcva6wy/1/

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

创建单独的可调用函数

https://jsfiddle.net/uxcva6wy/2/

ArrayList<String> allFields = new ArrayList<String>{number. priority …… };

如果您需要更具体的答案，请发布更具体的代码段。

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

1 个答案: