2

有时我会遇到必须创建相同变量的情况，并在对象文字内部一遍又一遍地检索完全相同类型的信息，例如.on()出于纯粹的好奇心，以及必须做一个更好的方法，我来了。

注意我不是在谈论 jQuery.data()或任何类型的普通window.全局变量。我说的是在对象文字的闭包内维护的一个。

当然，其中一些变量是实时变化的，因此我总是将它们放在每个方法中.on()

一个例子：

$(document).on({
    focusin: function () {
        var placeHolder = $(this).attr('data-title'),
            status      = $(this).attr('data-status');
        // etc etc
    },
    focusout: function () {
        var placeHolder = $(this).attr('data-title'),
            status      = $(this).attr('data-status');
        // etc etc
    },
    mouseenter: function () {
        // same variables
    },
    mouseleave: function () { }
}, '.selector');

有没有办法将变量存储在某个地方，并在每个事件中检索？他们需要是动态的

$(document).on({
     // Basially:

     // var placeHolder; etc
     // each event gets these values

     focusin: function () {
         // now here I can simply use them
         if (placeHolder === 'blahblah') {} 
         // etc
     }
}, '.selector');
4

7 回答 7

1

有几种方法：

  1. 编写您自己的函数，该函数将返回上面的 JSON；您可以遍历属性以避免重复工作。

  2. 编写一个返回这些变量的函数（例如：作为 JSON），这样您每次只需要调用一个函数。

  3. 编写一个函数将这些变量设置为全局属性并根据需要引用它们。

于 2012-11-14T18:54:27.727 回答
1

您可以使用事件数据将一些静态变量传递给事件，也可以使用方法技巧来传递“动态”变量：

$(document).on({
    focusin: function(e) {
        var attrs = e.data.getAttributes($(this)),
            var1 = e.data.var1;

        var placeHolder = attrs.title,
            status = attrs.status;
        // ...
    },
    focusout: function(e) {
        var attrs = e.data.getAttributes($(this)),
            var1 = e.data.var1;

        var placeHolder = attrs.title,
            status = attrs.status;
        // ...
    },
    // ...
}, ".selector", {
    // static variables
    var1: "some static value",

    // dynamic "variables"
    getAttributes: function($this) {
        return {
            title: $this.data("title"),
            status: $this.data("status")
        };
    }
});

演示：http: //jsfiddle.net/LHPLJ/

于 2012-11-14T18:57:04.987 回答
1

为什么不简单地添加一个辅助函数来提取它呢？

var getData = function(elm) {
    return { 
      placeHolder : $(elm).attr('data-title'),
      status : $(elm).attr('data-status');
  };
};


$(document).on({
  focusin: function () {
    var data = getData (this);
    // do stuff with data.status etc.
  },
  //repeat...
于 2012-11-14T19:23:43.213 回答
0

如果您始终针对同一个元素（即，如果有一个带有 class 的元素selector），并且如果这些变量的值在事件触发的不同时间之间不会发生变化，则可以将它们存储在相同的范围内处理程序定义：

var placeHolder = $('.selector').attr('data-title'),
    status      = $('.selector').attr('data-status');

$(document).on({
    focusin: function () {
        // etc etc
    },
    focusout: function () {
        // etc etc
    },
    mouseenter: function () {
        // same variables
    },
    mouseleave: function () { }
}, '.selector');

在与这些变量相同的范围内声明的函数将可以访问它们。

于 2012-11-14T18:54:28.070 回答
0

我建议将所有内容包装在函数范围内，以便变量不是全局的。如果这些属性永远不会改变，您可以执行以下操作：

(function(sel){
    var placeHolder = $(sel).attr('data-title'),
        status      = $(sel).attr('data-status');

    $(document).on({
        focusin: function () {
            // etc etc
        },
        focusout: function () {
            // etc etc
        },
        mouseenter: function () {
            // same variables
        },
        mouseleave: function () { }
    }, sel);
})('.selector');

否则，您可以这样做（在现代浏览器中，IE9+）

(function(sel){
    var obj = {};
    Object.defineProperty(obj, 'placeHolder', {
        get:function(){return $(sel).attr('data-title');}
    });
    Object.defineProperty(obj, 'status', {
        get:function(){return $(sel).attr('data-status');}
    });

    $(document).on({
        focusin: function () {
            console.log(obj.placeHolder, obj.status);
            //etc etc
        },
        focusout: function () {
            // etc etc
        },
        mouseenter: function () {
            // same variables
        },
        mouseleave: function () { }
    }, sel);
})('.selector');
于 2012-11-14T18:58:43.567 回答
0

你做的很接近正确，但最好的方法是：

$(document).on({
    focusin: function () {
        var el = $(this), //cache the jQ object
            placeHolder = el.data('title'),
            status = el.data('status');
        // etc etc
    }
}, '.selector');

为此目的创建了数据，不要担心尝试创建可重复使用的项目。如果您使用对象委托事件，那么可能是因为元素并不总是在页面上，在这种情况下，您需要获取每个单独事件中的变量。

最后，不要在不需要的时候尝试优化。

于 2012-11-14T19:14:56.317 回答
-1

您可以将它们保存在 window 对象中并使它们成为全局对象。

window.yourVariable = "whatever";

这可以满足您的要求，但肯定不是最干净的方式。如果可以，您可以考虑通过以下方式将所需数据保存到对象本身$(element).data("key", "value")

于 2012-11-14T18:52:50.693 回答