使用级联命名空间

在下面的演示中，点击无序列表（#Foo或#Biz）中的一个应附加从相应的数组包含文本3 li的，无论是arrayFoo或arrayBiz动态指JS阵列。尽管我在动态引用正确的数组时遇到了问题，但我想避免在实际项目中使用冗长的if/else语句集，其中可能有5到30个元素/数组。使用级联命名空间

Fiddle

我想通过建立像这样listArray = (array + listName)命名空间动态选择阵列，但不起作用。有什么办法连接一个原始的变量名，即使它不像那个语法那么简洁？

理想情况下，我想保留数组原样，我不想将它们组合成更大的数组阵列，或将它们转换成字典，但如果这是唯一的解决方案，我肯定会接受它。

<ul id="Foo">Foo</ul> 
<ul id="Biz">Biz</ul>

arrayFoo = [ 
    "first foo item", 
    "second foo item", 
    "third foo item"]; 

arrayBiz = [ 
    "first biz item", 
    "second biz item", 
    "third biz item"]; 

$('ul').click(function() { 
    listName = $(this).attr('id'); 

    // hardcoding this var so demo works...  
    listArray = arrayBiz; 
    // I want to set listArray equal to (array + listName) 
    // but I'm not sure how. When working correctly, 
    // clicking #Foo should append the arrayFoo items, 
    // and clicking #Biz should append arrayBiz items. 

    listArray.forEach(function (listItem) { 
     $('#' + listName).append('<li>' + listItem + '</li>'); 
    }); 
});

来源

2015-04-21 Dpeif

https://jsfiddle.net/m841o7ys/6/ 不过我建议你incapsulate你的数据给对象。请参阅@ RoryMcCrossan的答案... –

如果你修改你的数组包含一个对象，你可以通过使用括号标记一个字符串变量访问它们之内。事情是这样的：

var data = { 
    Foo: [ 
     "first foo item", 
     "second foo item", 
     "third foo item" 
    ], 
    Biz: [ 
     "first biz item", 
     "second biz item", 
     "third biz item" 
    ] 
} 

$('ul').click(function() { 
    var $ul = $(this); 
    data[this.id].forEach(function (listItem) { 
     $ul.append('<li>' + listItem + '</li>'); 
    }); 
});

Updated fiddle

来源

2015-04-21 08:26:10

我想尝试避免将数组包装到一个对象中，这就是我想要保留它的原因（尽管我确实同意你的看法，并且已经看到了这一点解决方案）。如果你不能这样做，例如数组分散在多个文件中，但仍然可以通过.click（）函数访问，这仍然可行吗？ – Dpeif

当然。如果数组分布在多个文件中，则可以通过使用'$ .extend（）'组合它们来使用此模式。 –

'$ .extend（）'是缺失的部分，这对于我所需要的是完美的。非常感激。 – Dpeif

做的肮脏的方式是通过窗口元素访问。

var a = "Foo"; 
window["array" + a];

但我建议不要这样做，正确的方法是将数组填充到对象中并使用键值获取它。

来源

2015-04-21 08:31:34 JuniorDev

只有在全局（'window'）范围内才有效 –

你可以尝试这样的，但它是一些什么样的@Rory实现：

var arrayFoo = [ 
 
    "first foo item", 
 
    "second foo item", 
 
    "third foo item"]; 
 

 
var arrayBiz = [ 
 
    "first biz item", 
 
    "second biz item", 
 
    "third biz item"]; 
 
var arr=[]; 
 
arr['arrayFoo']=arrayFoo; 
 
arr['arrayBiz']=arrayBiz; 
 
$('ul').click(function() { 
 
    listName = $(this).attr('id'); 
 
    listArray = "array"+listName;// it will not refer to the declared array.it will be merely a string so can be used as key. 
 
console.log(listArray); 
 
    arr[listArray].forEach(function (listItem) { 
 
     $('#' + listName).append('<li>' + listItem + '</li>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
    <ul id="Foo">Foo</ul> 
 
<ul id="Biz">Biz</ul>

来源

2015-04-21 08:41:11

使用级联命名空间

回答

相关问题