为什么要在DOM事件触发之前声明命名函数

Why declare named function before DOM event fires?

本文关键字：声明 函数 DOM 事件 为什么      更新时间：2023-11-28

我正在读Jon Duckett的书《Javascript和jQuery》。在关于事件监听器的部分，他说：

如果在所选DOM节点上触发事件时使用命名函数，请先编写该函数。（您也可以使用匿名函数）

接着是这个代码：

function checkUsername() {
  var elMsg = document.getElementById('feedback');
  if (this.value.length < 5) {
    elMsg.textContent = 'Username must be 5 characters or more';
  } else {
    elMsg.textContent = '';
  }
}
var elUsername = document.getElementById('username');
elUsername.addEventListener('blur', checkUsername, false);

既然解释器要在is处理脚本之前遍历并查找所有命名的函数和变量，那么为什么函数在传递到addEventListener之前就出现了呢？

就脚本执行而言，这并不重要，但它有助于保持一致的可维护性顺序，这实际上只是一种说法，它使代码更容易阅读和理解。

在JavaScript中，函数和变量声明总是被提升到其包含范围的顶部，所以函数写在哪里并不重要。

我建议订购：

  1. 指令
  2. 变量声明
  3. 函数声明
  4. 变量实例化
  5. 代码执行

使用此顺序还允许开发人员轻松地将函数声明转换为变量实例化，例如：

function foo() {
    ...do stuff...
}

至

var foo;
foo = switch ? function () {
        ...do stuff...
    } : function () {
        ...do other stuff...
    };

而且，它有助于防止作者错误地定义函数或变量的范围时出现愚蠢的错误。

这对功能来说并不重要（因为声明是挂起的），但在使用它们之前定义它们是一种很好的做法。

相关文章：