javascript - 如何在 IIFE 中正确包装此代码或使用不同的方法

Question

我想限制此代码与其他代码的接触，因为我不想使用全局变量 var targetElement; 它应该只在 IIFE 区域中可见。我尝试这样做，但是当我单击复选框时，会弹出一个错误，这是合乎逻辑的，但我不知道如何正确执行以使其工作。

我的代码如何工作？

<小时/>

   激活复选框，=> 允许进行编辑。选择单元格=>文本落入输入。更改文本，按应用 => 文本已更改。

<小时/>

    <table id="tableCinema" style="border-collapse: collapse;" border="1" >
        <tr>
            <th >Type</th>
            <th >Name</th>
            <th >Time</th>
        </tr>                   
        <tr>
            <td >1</td><td >*</td><td >*</td>
        </tr>                           
    </table>

    Change: <input id="changes" type="checkbox" name=""
    onclick="eventsInTable()"><br>

    Get text for change: <input id="changeText" type="text" name="" value="">

    <button id="applyToChanges">Apply</button>

<小时/>

var targetElement;

var inputChangeText = document.getElementById('changeText');
var applyChanges = document.getElementById('applyToChanges');

applyChanges.addEventListener('click', function() {
  if (targetElement) {
    targetElement.textContent = inputChangeText.value;
  }
}, false);

//change text
var changeText = function(e) {
  inputChangeText.value = e.target.textContent;
  targetElement = e.target;
}

//allow to change
function eventsInTable() {
    var checkBoxChanges = document.getElementById('changes');
    var table = document.getElementById('tableCinema');

    if (checkBoxChanges.checked) {
        table.addEventListener('click', changeText, false);
    } else {
        table.removeEventListener('click', changeText, false);
        alert("You haven't access to change");
    }
}   

Answer 1

如果您想从 HTML 属性调用它，那么它必须是全局可用的，但是，可以将全局污染保留在单个全局变量中，并将其他所有内容作为属性放在该变量上。

window.MyNamespace = (function() {
   // your protected code

   // return an object that has whatever you want to access
   return {
     eventsInTable: myLocalEventsInTableFunction
     // other stuff
   }
})();

然后通过命名空间调用您的处理程序。

Change: <input id="changes" type="checkbox" name=""
  onclick="MyNamespace.eventsInTable()"><br>