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以外的任何内容。

创建javascript事件listerner

1 个答案: