Javascript 代码无法加载页面

Question

我的 JavaScript 代码有一点问题，当我在列表中添加更多网站时，页面无法加载。我必须添加超过 200 个站点。

我是一个 JavaScript 菜鸟。有人可以解释一下问题是什么吗

我做错了吗？

 <script language="JavaScript" type="text/javascript">
var a = new Array(
'notiziepericolose.blogspot.it',
'ilcorrieredellanotte.it',                                       
'ilmattoquotidiano.it',
'ilfattonequotidiano.com',
'rebubblica.altervista.org',
'coriere.net'

);
var aa = a.slice();
aa.sort();
document.write("<ol>");
document.write("<b>");
for (i = 0; i < a.length; i=i+1) {
document.write('<li id="demo'+i+'">'+a[i]+'</li>');
}
document.write("</b>");
document.write("</ol>");
</script>

Answer 1

我想第一件事是 document.write 现在很少使用，因为有更好、更有效的方法将事物(元素、文本等)添加到 DOM(稍后会详细介绍) )。此外，就您而言，您没有意识到 document.write 与 echo 或 println 不同；每次使用它时都会清除文档，这可能就是您看不到任何内容的原因。换句话说，多个 document.write 的结果不是累积的。

第二件事是，有比使用 id 更好的“标记”元素的方法，特别是当页面上有很多元素时(就像您将拥有的那样)。同样，现在有比十年或十五年前更好的定位元素或捕获事件的方法。

那么，我们来谈谈您的代码。

您可以使用[]括号快速创建数组。

var arr = [
  'notiziepericolose.blogspot.it',
  'ilcorrieredellanotte.it',
  'ilmattoquotidiano.it',
  'ilfattonequotidiano.com',
  'rebubblica.altervista.org',
  'coriere.net'
];

您不必创建数组的副本来对其进行排序 - 它可以就地完成:

arr.sort();

我将保留您的循环，但向您展示将字符串连接在一起的不同方法。有些人喜欢将字符串添加在一起，但我更喜欢这种方式，即创建字符串的小部分的数组，然后 join() 将它们组合在一起**。

// Set l as the length, and create an output array called list
for (var i = 0, l = arr.length, list = []; i < l; i++) {

  // I've changed things here. I've added a class called item
  // but also changed the element id to a data-id instead
  var li = ['<li class="item" data-id="', i, '">', arr[i], '</li>'];

  // Push the joined li array of strings into list
  list.push(li.join(''));
}

假设您的页面上有一个名为“main”的元素:

HTML

<div id="main"></div>

JS

您可以使用 [insertAdjacentHTML] 方法将列表数组作为 HTML 字符串添加到 main 中:

var main = document.getElementById('main');

// Note that I've given the ordered list an id called list
var HTML = ['<ol id="list"><b>', list.join(''), '</b></ol>'].join('');
main.insertAdjacentHTML('beforeend', html);

好的，这很简单。但我敢打赌您会问如何定位列表中的各个项目，以便如果我单击其中一个项目，它会提醒它是什么(或其他内容)。

我们不会向每个列表项添加事件监听器(我们可以这样做，但项目越多，执行成本就会越高)，我们将一个附加到在 ol 元素中，我们添加了 list id 并在项目冒泡时捕获其中的事件:

var ol = document.getElementById('list');

然后，事件监听器会添加到列表中，告诉我们在引发单击事件时调用哪个函数 (checkItem):

ol.addEventListener('click', checkItem);

我们的函数使用事件 (e) 来找出事件的目标是什么(单击了哪个项目)，并提醒其文本内容。

function checkItem(e) {
  alert(e.target.textContent);
}

您可以看到所有这些工作 in this demo 。希望其中的一些内容能有所帮助。

** 这是另一种排序方式，并使用 reduce 循环遍历数组。 :

var list = arr.sort().reduce(function (p, c, i) {
  return p.concat(['<li class="item" data-id="', i, '">', c, '</li>']);
}, []).join('');

DEMO