Javascript：在js文件中包含大量列表

我有一個城市名稱列表。我想使用javascript在html選擇列表中填充此列表。列表中有超過1000個城市名稱。不需要服務器請求。列表是靜態的。Javascript：在js文件中包含大量列表

將這樣的大列表包含到js文件中的最佳方式是什麼？考慮到性能問題，我認爲在js中聲明大數組會使其緩慢。

2013-02-01 prashant

爲什麼你需要使用Javascript來填充HTML元素？爲什麼不在HTML文件中創建列表？ –

我認爲解析一個大的JavaScript列表的代價將會比使用瀏覽器渲染相同大小的HTML選擇列表所需的時間更長。 – Henrik

@Henrik如果您使用基於該列表的JavaScript構建HTML DOM，瀏覽器無論如何都需要渲染。 – MCL

將其作爲JSON包含在script標記中，其MIME類型不由瀏覽器處理，例如，

<script type="conf/cities" id="citieslist"> 
['New York', 'London' ... 'Amsterdam'] 
</script>

然後可以檢索內容，例如，使用jQuery：

var citylist = $.parseJSON($("#citieslist").text());

更新： 另一種方法是，包括列表作爲一個簡單的文本字符串，通過換行分隔的名字。這將允許您簡單地使用string.split()來獲取列表。

var citylist = $("#citieslist").text().split('\n');

如下所示，這是相當節省空間的。

<script type="conf/cities" id="citieslist"> 
New York 
London 
Amsterdam 
</script>

2013-02-01 12:54:22 Henrik

爲了能夠使用JSON對象，「eval（）」文本內容不是強制性的嗎？ – MCL

不，對'parseJSON'（內置版本或庫）的調用足以對其進行安全解析。 – Henrik

是的，這就是我的意思。您可以將該步驟添加到您的答案中。 – MCL

將它作爲一個javascript數組包含在其中。這樣，您可以輕鬆地循環並填充選擇框。

var cities = [ 'London', 'Paris', 'Rome' ]; 
for (index in cities) { 
    var city = cities['index']; 
    //add value to select box 
}

如果你需要比城市名稱較多，可以使對象的數組：

var cities = [ { id : '1', name : 'Rome' }, { id : '2', name : 'London' }, ... ];

2013-02-01 12:56:11 Gunslinger

如果只有JS參與，你可以創建一個這樣

VAR城市一些事情= ['City1'，'City2'，'City3'，...];

如果控制器也參與其中。您可以在您的控制器中組成城市陣列，將其分配到視圖和視圖文件中

var cities = [echo $ cityList; ]。

其中$ cityList是來自控制器的數組。

2013-02-01 12:59:51

回答