javascript - 如何将命名空间变量传递给单击函数参数变量？ jQuery

Question

所以我找到了一个awesome solution以避免需要在 jQuery 中使用全局变量。我到处提到命名空间，最初我打算使用全局变量。

但是，我无法通过简单的点击函数上的参数发送我的命名空间变量。

我想这样做是因为我需要保存这些变量并用于创建模态窗口，并让应用程序知道哪些动态创建的按钮控制哪些模态。

下面是我首先创建变量的 namespace 对象的示例 我的 jQuery 命名空间对象:

$.reg = { 
    masterRole : " ", 
    role_ID : " ",
    row_Name : " ",
    ary_Check_Role : []
}; 

$(document).ready(function () {
    ...

当您浏览应用程序时，当您单击此按钮时，这些命名空间变量的值就会被设置(从 HTML 中获取数据) 变量在我的 roleBtnClicked 函数上设置

function roleBtnClicked(event){

    $.reg.masterRole  = $(this).html();            /* Get role name: Actor */
    $.reg.role_ID     = $(this).attr('role');      /* Get role-1 */
    $.reg.rowName     = $(this).attr('row');       /* Get row-role-1 */
    $.reg.blueBtn     = $(this).attr('blue');      /* Get blue-btn-1 */

现在，在单击一些复选框并将数据插入数组后，会弹出一个模式窗口，当您单击完成按钮(如下)时，所有变量都需要再次保存到命名空间变量中。

我的完成按钮点击函数，我试图通过参数变量传递我的命名空间变量

$(".doneButton").click(
    {
        param1: $.reg.masterRole,
        param2: $.reg.role_ID,
        param3: $.reg.rowName,
        param4: $.reg.ary_Check_Role
    },
    doneBtnClicked);

function doneBtnClicked(event){
    alert('$.reg.roleName    = '+$.reg.roleName);
    alert('event.data.param1 = '+event.data.param1);

    masterRole= event.data.param1;
    role_ID  = event.data.param2;
    rowName  = event.data.param3;
    ary_Check_Role = event.data.param4;

<小时/>

请注意上面点击函数中的 2 个警报，第一个警报将显示正确的值，但第二个警报不会显示任何内容。在让数组通过时也遇到问题。

所以问题:我应该这样做吗？如何正确地将数组传递到 jQuery 命名空间中，然后将其传递到单击函数参数中？

Answer 1

首先，您应该避免将内容放入 jQuery 对象中。为此使用闭包。

第二:您应该使用 HTML data-... 属性和 jQuery data()将自定义属性附加到 HTML 元素。避免使用非标准属性。

第三:您可以为事件处理程序使用单独的命名函数定义，但是当您实际在代码中为不同元素重复使用这些函数时，这是最有意义的(您似乎没有这样做)那)。例如，使用直接传递给 .click() 的匿名函数会产生更易于理解的代码。

// use this shorthand instead of $(document).ready(function () { ... });
$(function () {

  // variable reg will be available to all functions 
  // defined within this outer function. This is called a closure.
  var reg = { 
    masterRole : " ", 
    role_ID : " ",
    row_Name : " ",
    ary_Check_Role : []
  };

  $(".roleButton").click(function (event) {
    // modify state
    reg.masterRole  = $(this).html();            /* Get role name: Actor */
    reg.role_ID     = $(this).data('role');      /* Get role-1 */
    reg.rowName     = $(this).data('row');       /* Get row-role-1 */
    reg.blueBtn     = $(this).data('blue');      /* Get blue-btn-1 */

    // note that this requires markup like this:
    // <button data-role="foo" data-row="bar" data-blue="baz">

    // ...
  });

  $(".doneButton").click(function (event) {
    // debug output
    alert(JSON.stringify(reg, 2, 2));
  });

});

使用多个 $(function () { ... }); block 来分隔应该分开的内容。

不要忘记始终对您声明的每个变量使用var。没有 var 声明的变量将是全局变量 - 而您不需要全局变量。