javascript - 创建 JavaScript 事件监听器

Question

我试图理解以下代码并将其转换为 JavaScript，我猜它是用 TypeScript 编写的，所以我试图理解它在做什么

addEventListener("direct-upload:initialize", event => {
  const { target, detail } = event
  const { id, file } = detail
  target.insertAdjacentHTML("beforebegin", `
    <div id="direct-upload-${id}" class="direct-upload direct-upload--pending">
      <div id="direct-upload-progress-${id}" class="direct-upload__progress" style="width: 0%"></div>
      <span class="direct-upload__filename">${file.name}</span>
    </div>
  `)
})

这是我迄今为止的尝试

addEventListener("direct-upload:initialize", doSomething, false);

function doSomething(e) {
  var target
  var details
}

然后我就迷路了。如果有人能向我解释上面的代码在做什么，我将非常感激

Answer 1

这不是 TypeScript，而是 JavaScript。具体来说，它是使用 ES2015 规范中的功能(箭头函数、解构赋值、const、模板文字)并依赖于自动分号插入的 JavaScript。这些 ES2015 功能适用于最新的现代浏览器(Chrome、Firefox、Safari、Edge)；它们不适用于任何版本的 IE。在 MDN 上查找它们了解详细信息以及与 ES5 及更早版本的对比。您还可以使用Babel's REPL将 ES2015+ 代码转换为 ES5(尽管它可能依赖于 polyfill)。

在 ES5 及更早版本中，它看起来像这样:

addEventListener("direct-upload:initialize", function(event) {
  var target = event.target;
  var detail = event.detail;
  var id = detail.id;
  var file = detail.file;
  target.insertAdjacentHTML("beforebegin",
    '<div id="direct-upload-' + id + '" class="direct-upload direct-upload--pending">' +
      '<div id="direct-upload-progress-' + id + '" class="direct-upload__progress" style="width: 0%"></div>' +
      '<span class="direct-upload__filename">' + file.name + '</span>' +
    '</div>'
  );
});

<小时/>

旁注:这两行:

const { target, detail } = event
const { id, file } = detail

...可以这样写:

const { target, detail = {id, file} } = event;

...因为 detail 除了获取 id 和 file 之外不用于任何其他用途。