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

Question

我有一个城市名称列表。我想使用 javascript 在 html 选择列表中填充此列表。列表有 1000 多个城市名称。不需要服务器请求。列表是静态的。

将如此大的列表包含到您的 js 文件中的最佳方法是什么？考虑到性能问题，我认为在 js 中声明大数组会使其变慢。

Answer 1

将其作为 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' }, ... ];

Answer 2

将其作为 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>

Answer 3

如果只涉及JS，你可以创建这样的东西

var city = ['City1', 'City2', 'City3', ... ];

如果控制器也参与。您可以在控制器中形成城市数组，将其分配给视图和视图文件

var city = [ echo $cityList; ];

其中 $cityList 是一个来自控制器的数组。