Question

编辑：有些人（实际上，我认为每个人都花时间帮忙:)）误解了这是一个关于我应该如何在这种情况下进行编码的问题。我的错。不是。不要这样编码的人，否则你会让宝宝耶稣哭泣。我问的是Javascript如何使用内存，以及如何（in）高效代码由browswer处理。感谢Joe坚持不懈地与我一起解决我的问题，并感谢Adeneo展示应该如何完成。现在，回到问题....

假设我有这段代码：

<ul>
  <li><a onclick="myFunction(this.innerHTML)">List item 1</a></li>
  <li><a onclick="myFunction(this.innerHTML)">List item 2</a></li>
  ....snip....
  <li><a onclick="myFunction(this.innerHTML)">List item 1000</a></li>
</ul>

我也有一个脚本标签：

function myFunction(myString) {
  console.log(myString);
  console.log(myString);
  console.log(myString);
}

这比内存更有效：

<ul>
  <li><a onclick="console.log(this.innerHTML);console.log(this.innerHTML);console.log(this.innerHTML);">List item 1</a></li>
  <li><a onclick="console.log(this.innerHTML);console.log(this.innerHTML);console.log(this.innerHTML);">List item 2</a></li>
  ....snip....
  <li><a onclick="console.log(this.innerHTML);console.log(this.innerHTML);console.log(this.innerHTML);">List item 1000</a></li>
</ul>

我不会为第二个示例所需的所有输入所需的额外开发时间而烦恼，因为代码是在AngularJS中生成的。在我看来，第一种方式会占用更少的内存，但我一直在看第二种方法。在运行时是否与浏览器完全相同？

编辑：正如Adeneo在下面所述，任何值得他或她的盐的编码器都会使用.addEventListener作为这个例子。

Answer 1

停止使用内联JS，并使用适当的事件处理程序编写代码

<ul>
  <li><a href="#" class="list_item">List item 1</a></li>
  <li><a href="#" class="list_item">List item 2</a></li>
  ........
  <li><a href="#" class="list_item">List item 1000</a></li>
</ul>

JS

var elems = document.getElementsByClassName('list_item');

for (var i=elems.length; i--;) {
    elems[i].addEventListener('click',function() {
        console.log(this.innerHTML);
    },false);
}

注意：为旧IE添加attachEvent

修改的

或....如果你真的有1000个元素，你可以通过将事件委托给一个单个父元素来节省更多元素，如下所示：

<ul id="myUL"> <li><a href="#">List item 1</a></li> <li><a href="#">List item 2</a></li> ........ <li><a href="#">List item 1000</a></li> </ul>

JS

var ul = document.getElementById('myUL'); ul.addEventListener('click',function(event) { if (event.target.tagName.toLowerCase() == 'a') console.log(event.target.innerHTML); },false);

这是所有元素的一个事件处理程序！

Answer 2

如果你担心从计算机中挤出每个字节和时钟周期，你就不会编写JavaScript而你也不会编写Web应用程序。我假设你不这样做，但我正在努力做到尽职尽责。

我认为这是错误的。你有很多其他问题比这更重要。第一种可能会使用较少的内存，并且执行时可能会涉及较少的工作，但这根本不重要。

编写代码的一个重要因素是可维护性。您将通过编写更少的代码并重新使用它来实现此目的。

Answer 3

我不会使用你提出的任何一种技术。

以下是编写代码（按顺序）的优先级：

正确的代码（有效，没有错误，处理所需的边缘情况）
可维护，描述性，清晰且易于遵循或修改代码。
简洁，简洁DRY code。
快速代码。

通常情况下，如果您执行前三项，则可能只有零个，一个或两个您真正需要担心性能的地方。在担心之前的其他三个项目之前，你不应该担心性能。并且，只有在您有实际测量证据表明您遇到性能问题并且需要对其执行某些操作时才会担心性能。随着时间的推移，您将学习正确，可维护，紧凑和快速的技术，您可以一次完成所有这些工作。但是，你应该做的最后一件事是在其他项目之前担心速度。

在您的具体情况下，我建议将您的代码与HTML分开并按照以下方式执行：

<ul id="myList">
  <li><a>List item 1</a></li>
  <li><a>List item 2</a></li>
  ....snip....
  <li><a>List item 1000</a></li>
</ul>

<script>
    // add click handlers to the links in my list
    var items = document.querySelectorAll("#myList a");
    for (var i = 0; i < items.length; i++) {
        items[i].addEventListener("click", function() {
            // put any code here for the event handler
            // the this pointer will refer to the DOM item that was clicked on
            console.log(this.innerHTML);
        });
    }
</script>

至于内存使用，一个好的一般经验法则是较少的代码将占用较少的内存，因此重复的代码块通常比共享公共代码块效率低。如果您遵循DRY原则，那将使您走上正确的道路。就像我关于速度的评论一样，我通常会尝试编写高效的代码（不浪费内存），但我不会花时间尝试优化内存使用，除非我知道或怀疑我在特定的内存使用方面存在特定问题一段代码。

Answer 4

学习并开始使用jQuery。这将为您节省大量工作，这应该是您最关心的问题。工作示例：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$( document ).ready( function()
{
    $( "a" ).on( "click", function( event )
    {
        console.log( this.innerHTML );
    });
});
</script>

<ul>
  <li><a href="#">List item 1</a></li>
  <li><a href="#">List item 2</a></li>
  ........
  <li><a href="#">List item 1000</a></li>
</ul>

哪个更好：调用函数或在线完整输入脚本？

4 个答案: