javascript - 引用对象中的公共(public)值

Question

我有一个包含嵌套对象的对象，这些嵌套对象在这些嵌套对象属性中具有相同的变量。我试图通过将公共(public)变量合并到该嵌套对象的属性中来使我的代码更干，但我不确定这是正确的还是最好的编写方式。有人有什么想法吗？

用法

我调用各种函数作为 jQuery each/onclick 语句的回调。

$('#foo').each(foo.part1.begin);
$('.bar a').on('click', foo.part1.middle);

在我使用 .each 的情况下，我附加了数据属性以便在分析工具中进行跟踪，即当用户单击链接时，它会与这些属性一起发送。在绑定(bind)到事件的情况下，我会为自定义事件发送一个特殊的分析标签。

我更新了 foo 对象中的第一个属性 begin 来说明我在做什么。我有一个实用程序库，其中包含一个接受 $this 和一个对象的函数，该函数循环遍历该对象并设置 anchor 标记上的所有属性，等等。

当前实现:

var foo = {
    part1: {
        begin: function () {
            var $this = jQuery(this),
                name = 'the beginning of time',
                color = 'blue',
                type = 'blackberries';

            utility.loopThroughAndSetAttributes($this, {
                name: name,
                color: color,
                type: type
            });
        },

        middle: function () {
            var name = 'the beginning of time',
                color = 'blue',
                type = 'strawberries';

            console.log(name + color + type);
        },

        end: function () {
            var name = 'the beginning of time',
                color = 'blue',
                type = 'raspberries';

            console.log(name + color + type);
        }
    },
    part2: {
        begin: function () {
            var name = 'the middle of the city',
                color = 'green',
                type = 'pluto';

            console.log(name + color + type);
        },

        middle: function () {
            var name = 'the middle of the city',
                color = 'green',
                type = 'mars';

            console.log(name + color + type);
        },

        end: function () {
            var name = 'the middle of the city',
                color = 'green',
                type = 'earth';

            console.log(name + color + type);
        },
    }
};

建议的解决方案:为嵌套对象创建一个新属性并在函数中引用该属性。

var foo = {
    part1: {

        name: 'the beginning of time',
        color: 'blue',

        begin: function () {
            var name = foo.part1.name,
                color = foo.part1.color,
                type = 'blackberries';

            console.log(name + color + type);
        },

        middle: function () {
            var name = foo.part1.name,
                color = foo.part1.color,
                type = 'strawberries';

            console.log(name + color + type);
        },

        end: function () {
            var name = foo.part1.name,
                color = foo.part1.color,
                type = 'raspberries';

            console.log(name + color + type);
        }
    },
    part2: {

        name: 'the middle of the city',
        color: 'green',

        begin: function () {
            var name = foo.part1.name,
                color = foo.part1.color,
                type = 'pluto';

            console.log(name + color + type);
        },

        middle: function () {
            var name = foo.part1.name,
                color = foo.part1.color,
                type = 'mars';

            console.log(name + color + type);
        },

        end: function () {
            var name = foo.part1.name,
                color = foo.part1.color,
                type = 'earth';

            console.log(name + color + type);
        },
    }
};

Answer 1

您缺少 this关键词:

part1: {
   name: 'the beginning of time',
   color: 'blue',
   begin: function () {
       var name = this.name,
       // ...         
   },

您还可以创建构造函数并避免重复代码片段。

var Foo = function(params) {
   this.name = params.name;
   this.color = params.color;
   // ...
}

Foo.prototype.begin = function() {
    // this.name...
};

var foo = {};
foo.part1 = new Foo({
    name: 'the beginning of time',
    color: 'red'
});

foo.part2 = new Foo({
   name: 'bar',
   color: 'baz'
});

编辑:我不太确定你到底想达到什么目的，但有些观点可能是相关的。

jQuery on 方法将传递函数的 this 值设置为单击的元素。要覆盖 this 值以引用实例，您可以使用 Function.prototype.bind 或 jQuery $.proxy 方法:

$('.bar a').on('click', foo.part1.middle.bind(foo.part1));

Foo.prototype.middle = function(event) {
    var clickedElement  = event.currentTarget;
    // `this` here refers to the instance
};

另一种选择是使用 jQuery .data() 方法将实例附加到元素:

$('element').data('foo', foo.part1);

然后为了获取数据，您可以使用 data 方法作为 getter:

var foo = $('element').data('foo');

建议使用 D3 库进行分析!