函數內部未定義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;