Question

我正在做一个React项目，但我认为这个问题与所有JS有关

我有一个包含以下功能的令牌文件：

export default {
      set(token) {
        Cookies.set(key, token);
        return localStorage.setItem(key, token);
      },
      clear() {
        Cookies.remove(key);
        return localStorage.removeItem(key);
      },
      get() {
        try {
          const retVal = localStorage.getItem(key) || '';
          return retVal;
        } catch (e) {
          return '';
        }
      },

现在，我想为这3个函数的域添加一组本质上是环境变量的集合。就我而言，它基于window.location.hostname，但实际上可以是任何东西。

在这种情况下，假设我们希望基于window.location.hostname的密钥是dev，uat或prod

getKey = host => {
 if(host === 'a')
  return 'dev'
 elseIf (host === 'b')
  return 'uat'
 else
return 'prod'
}

我认为以上是返回您想要的密钥的相当标准。但是如果您的密钥有6个变量，或者8个或20个，该怎么办？如何设置所有变量，以便在调用set（），clear（）和get（）时可以访问它们？

基本上我想将导出文件包装在设置一些变量的函数中？

为了进一步说明这一点

class session extends Repo {
  static state = {
    current: false,
  };

  current(bool) {
    this.state.current = bool;
    return this;
  }

  query(values) {
      <Sequelize Query>
    });
  }

export session = new Session();

使用此方法，我可以调用current（true）.session（）并将会话状态设置为true。我想对令牌文件应用类似的模式，但是我不想将所有调用从Token.set（token）更改为Token.env（hostname）.set（token）

Answer 1

这完成了我想要的，由于窗口在加载时不可用，因此我不得不从其他函数中调用该函数。它从本质上说明了我正在寻找的模式。感谢Jim Jeffries为我指出答案。

class Token {
  constructor(props) {
    this.state = {
      testKey: null,
    };
  }

  setCred = host => {
    if (host === 'uat') {
      this.state.testKey = 'uat';
    } else if (host === 'prod') {
      this.state.testKey = 'prod';
    } else {
      this.state.testKey = 'dev';
    }
  };
  set(token) {
    this.setCred(window.location.hostname);
    Cookies.set(testKey, token);
    return localStorage.setItem(testKey, token);
  }
  clear() {
    this.setCred(window.location.hostname);
    Cookies.remove(testKey);
    return localStorage.removeItem(testKey);
  }
  get() {
    this.setCred(window.location.hostname);
    try {
      const retVal = localStorage.getItem(key) || '';
      return retVal;
    } catch (e) {
      return '';
    }
  }
}
export default new Token();

如果还有其他想法，请分享。

JS设计模式，用于为函数设置变量集

1 个答案: