javascript - 根据同一对象的其他属性设置属性值

Question

这是我的代码。

var myApp = {
    nav               : $('#top_nav .nav'),
    primary_navs      : $('#top_nav .nav').find('> li'),
    secondary_navs    : $('#top_nav .nav').find('> li').find('.secondary > li')
}

这可行，但我不希望一遍又一遍地重复 jquery 选择器功能。我想要做，

    primary_navs      : nav.find('> li')

但这给了我“导航未定义”。我已经尝试过myApp.nav, 和this，但显然两者都不像我认为的那样有效。在定义同一对象的新属性时，如何引用对象的属性？

Answer 1

缓存变量

var $nav = $('#top_nav .nav');

然后你可以在你的代码中多次使用它

var $nav = $('#top_nav .nav'),
    $childrenLi = $nav.children('li');

var myApp = {
    nav               : $nav ,
    primary_navs      : $childrenLi ,
    secondary_navs    : $childrenLi.find('.secondary > li')
}

您也可以使用children来获取直系子级。

$('#top_nav .nav').find('> li') 如同 $('#top_nav .nav').children('li')

Answer 2

new您可以使用匿名函数创建对象：

var myApp = new function(){
    this.nav =  $('#top_nav .nav');
    this.primary_navs = this.nav.children('li');
    this.secondary_navs = this.primary_navs.find('.secondary > li')
};

Answer 3

您可以将其封装到执行并返回对象的匿名函数中：

var myApp = (function($nav) {
    return {
        nav: $nav,
        primary_navs: $nav.find('> li'),
        secondary_navs: $nav.find('> li').find('.secondary > li')
    };
}($('#top_nav .nav')));

Answer 4

声明对象时的所有语句都会同时评估，因此您不能使用前一个属性的结果一秒钟。但是，您可以将 MyApp 设置为等于立即评估并返回对象的函数。

例如

var myApp = function() {
   var $nav,  $primary_navs;   
   var $nav = $('#top_nav .nav');
   var $primary_navs = $nav.find('> li');
  return {
    nav: $nav,
    primary_navs:  $primary_navs,
    secondary_navs = $primary_navs.find('.secondary > li')
  }  
}();