哪个更好:调用函数或完整、内联键入脚本

Which is better: call a function or type the script out in full, inline?

本文关键字：脚本 更好 调用 函数      更新时间：2023-09-26

>编辑：有些人（实际上，我认为每个花时间帮助:)的人）都误解为关于我在这种情况下应该如何编码的问题。我的坏。不是。人们，不要这样编码，否则你会让婴儿耶稣哭泣。我问的是Javascript如何使用内存，以及浏览者如何处理（低）高效的代码。感谢乔坚持了足够长的时间，解决了我的要求，感谢阿德尼奥展示了应该如何做。现在，回到问题。

假设我有以下代码：

<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。

停止使用内联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添加附加事件

编辑：

或。。。。如果您确实有 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);

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

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

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

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

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

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

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

学习并开始使用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>
相关文章：