0

编辑：有些人（实际上，我认为每个愿意花时间提供帮助的人 :)）都将其误解为关于在这种情况下我应该如何进行编码的问题。我的错。它不是。不要这样编码，人们，否则你会让婴儿耶稣哭泣。我在问Javascript如何使用内存，以及浏览器如何处理（无效）代码。感谢 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 。

4

4 回答 4

4

Stop using inline JS, and write code with proper event handlers

<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);
}

note: add attachEvent for older IE

EDIT:

Or.... If you really have 1000 elements, you can save more by delegating the event to one single parent element, like so :

<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);

That's one event handler for all the elements !

于 2013-11-06T23:25:16.350 回答
3

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

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

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

于 2013-11-06T23:20:52.177 回答
0

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

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

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

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

在您的具体情况下，我建议将您的代码与 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 原则，那将使您走上正确的道路。就像我对速度的评论一样，我通常会尝试编写高效的代码（不浪费内存），但我不会花时间尝试优化内存使用，除非我知道或怀疑我在特定的内存使用方面存在特定问题一段代码。

于 2013-11-06T23:44:14.500 回答
0

Learn and start using jQuery. It will save you a lot of work, which should be your biggest concern. Working example:

<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>
于 2013-11-06T23:53:42.067 回答