将动态参数传递给 IIFE

Question

我遇到了将变量传递给 IFFE 的问题。读了一些书，还是没弄明白。真的很感激这里的一些指导。

我有一个点击事件处理函数，它从 DOM 单击时。
我需要将该 ID 传递给 IIFE
IFFE 需要 add/remove 来自数组的 ID，取决于它是否已经存在。

这是我得到的：

事件：

$(document).on('click', 'input[type="checkbox"]', check);

单击处理程序：

function check() {
    var id = $(this).closest('ul').attr('data-id');
    return id;
}

IIFE:

var checkID = (function (val) {

    var arr = [];

    return function () {

        var i = arr.indexOf(val);

        if (i === -1) {
            arr.push(val);
        } else {

            arr.splice(i, 1);
        }
        return arr;
    }

})(id);

现在我正在获取 ID，但无处返回。

在我的 IIFE 中，我确实传递了一个 id 变量，但它是未定义的。

那么，如何将我从 check() 获取的 ID 变量传递给 checkID IIFE？

也欢迎其他解决方案。

谢谢

Answer 1

在您的 clickHandler 中

function check() {
    var id = $(this).closest('ul').attr('data-id');
    checkID(id);
}

并将checkID更改为

var checkID = (function () {

    var arr = [];

    return function (val) {

        var i = arr.indexOf(val);

        if (i === -1) {
            arr.push(val);
        } else {

            arr.splice(i, 1);
        }
        return arr;
    }

})();

Answer 2

我认为你需要做一些相反的事情。您的 check 函数将 return 事件处理程序使用的函数，但在点击处理程序运行传递您的数组后，它还会调用回调。

check 函数看起来像是两个函数的 mash-up：

function check(callback){
  var arr = [];
  return function(){
    var id = $(this).closest('ul').attr('data-id');
    var i = arr.indexOf(id);

    if (i === -1) {
        arr.push(id);
    } else {

        arr.splice(i, 1);
    }
    callback(arr);
  }
}

如您所见，它以一个回调函数作为参数，每次执行时都会调用该回调函数，并传递当前数组 arr。例如，这是我的测试回调：

function handler(arr){
 alert("Array has " + arr.length + " elements");
}

最后，您的事件处理程序将如下所示：

$(document).on('click', 'input[type="checkbox"]', check(handler));

实例：https://jsfiddle.net/src282d6/

Answer 3

在您的 IIFE 函数中使用 getter/setter-like 函数可以使它更有组织性和可读性。然后，使用这些函数在您的 IIFE 函数中传递、存储和读取数据。

var checkID = (function () {
    // your array
    var arr = [];
    // public
    return { 
      // get
      getArray: function(){
        return arr;
      },
      // set value
      setArray: function(val) {
        var i = arr.indexOf(val);
        if (i === -1) {
          arr.push(val);
        } else {
          arr.splice(i, 1);
        }
      }
    }
})();

使用方法如下：

checkID.getArray(); // returns default empty array []
checkID.setArray('car1');
checkID.setArray('car2');
checkID.setArray('car3');
checkID.setArray('car4');
checkID.setArray('car4'); // test splice()
checkID.getArray(); // returns ["car1", "car2", "car3"]

将动态参数传递给 IIFE

Pass dynamic params to IIFE

javascript

jquery

iife