Question

有时我遇到的情况是我必须创建相同的变量，并检索完全相同类型的信息 over＆amp;在一个对象文字内部，例如 .on() 出于纯粹的好奇心，以及必须有一个更好的方式，我在这里。< / p>

注意我不谈论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');

Answer 1

有几种方法：

编写自己的函数，返回上面的JSON;你可以遍历属性以避免重复工作。
编写一个返回这些变量的函数（例如：作为JSON），这样每次只需要调用一个函数。
编写一个函数将这些变量设置为全局属性，并根据需要引用它们。

Answer 2

您可以使用event data将一些静态变量传递给事件，以及制作方法明智的技巧来传递“动态”变量：

$(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")
        };
    }
});

DEMO： http://jsfiddle.net/LHPLJ/

Answer 3

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

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...

Answer 4

如果你总是瞄准相同的元素（即如果有一个元素具有类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');

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

Answer 5

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

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

Answer 6

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

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

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

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

Answer 7

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

window.yourVariable = "whatever";

这样做你想要的，但肯定不是最干净的方式。如果可以，您可以考虑通过$(element).data("key", "value")

将所需数据保存到对象本身

在.on（）或任何对象文字中创建可重用的变量

7 个答案: