函数内部未定义URLSearchParams错误

Question

这很奇怪，使用DW CC 2018（如果问题出在哪里），当我在HTML页面的脚本标签内使用URLSearchParams时，它不会被标记为“错误”。

我将URLSearchParams放在函数中的外部JS文件中，将其标记为“未定义”。 DW将其标记为错误，但是它仍然可以工作，因此，它必须比错误更像是“警告”。 即使发出警告，这也让我有些担心，因为它可能会在上线时发生故障。

我应该担心，还是只是其中的一件事情而忽略？

Answer 1

Dreamweaver可能在其索引器中使用了过时的“预期全局变量”列表，由于它是相对较新的，因此未更新为包括URLSearchParams API 。

如果您不关心向后兼容性* cough * IE * cough * ，只需将其添加到有问题的文件中以使Dreamweaver关闭：

const URLSearchParams = window.URLSearchParams;

如果Dreamweaver不支持ES6语法（我从未使用过），则必须将其添加到不在顶层的位置：

(function () {
  // must be in a closure
  var URLSearchParams = window.URLSearchParams;

  ...
})();

原因是因为顶级var在某些浏览器中会覆盖全局名称空间。

Answer 2

您可以编写自定义URLSearchParams类

class UrlSearchParams {
  constructor(query) {
    this.query = query;
  }
  getSearchObject = () => {
    const { query } = this;
    return query
    ? (/^[?#]/.test(query) ? query.slice(1) : query)
      .split("&")
      .reduce((params, param) => {
        let [key, value] = param.split("=");
        params[key] = value
          ? decodeURIComponent(value.replace(/\+/g, " "))
          : "";
        return params;
      }, {})
  : {};
  };
  getAll = () => {
    const searchParams = this.getSearchObject();
    return searchParams;
  }
  get = param => {
    const searchParams = this.getSearchObject();
    return searchParams[param];
  };
  setUrl = (param, value) => {
    const searchParams = this.getSearchObject();
    searchParams[param] = value;
    return Object.keys(searchParams)
    .map(key => key + "=" + searchParams[key])
    .join("&");
  };
}

export default UrlSearchParams;