#说明

将收录常量操作相关工具

笔记分享：hongjilin

一、实现不同端同一常量变量指向不同常量

Ⅰ-实现功能:

实现不同端同一常量变量指向不同常量

Ⅱ-需求场景分析

本项目有多端场景,如管理员端与用户端,但是登录是通用的,这时我需要在登录后将部分用户数据存入本地用作后续校验使用,但该如何区分两个端呢?不区分又如何分别存储呢?又有什么比较方便的做法吗?这时这个封装函数就相对适用了

Ⅲ-代码示例

  1. 封装代码

```jsx //constant.ts import { uniqueId } from ‘lodash/fp’; /**

  • 使用示例:
  • const USER = constant(‘USER’);
  • USER.of(‘ON’) => USER.ON
  • USER.of(‘ON’, 1) => USER.ON = 1 */ class Constants { uniqueId: string; namespace: string;

constructor(namespace: string) { //生成一个随机ID,可以不使用,看自己需求,无唯一标识需求可以删除 this.uniqueId = uniqueId(); this.namespace = namespace; } //这是后续更换常量变量的函数 of(key: string, value: any): string { //将传入的key转换为大写 key = key.toUpperCase(); //如果要改变的key已经存在,则不进行修改 —>此处可以改变为都能修改,只是此处这样更符合当前需求 if (typeof this[key] !== ‘undefined’) return this[key];

  1. this[key] =
  2.   value !== undefined
  3.     ? value

//此变量时第一次构造函数中传入的 例如USER—> const USER: UserConstant = constant(‘USER’); //创建实例 : this.namespace //USER.of(‘LAST_LOGIN’);—>相当于 USER.LAST_LOGIN=’USER.LAST_LOGIN’ ? ${this.namespace}.${key} //如果构造函数调用时没传入this.namespace,则我直接用key USER.of(‘LAST_LOGIN’);—>相当于 USER.LAST_LOGIN=’LAST_LOGIN’ : key; return this[key]; } }

//导出 export default (function () { //声明一个空对象
const store = {}; //此处调用构造函数,封装构造函数,简化后续调用时操作 return function constant(namespace: string) { //如果传入数据为空,或者空字符串
if (!namespace) return new Constants(‘’); //将传入构造函数的变量都转换为大写 namespace = namespace.toUpperCase(); //当store对象中没有此传入变量属性时,才进行构造 —>此处可以改变,只是此处这样更符合当前需求 if (!store[namespace]) store[namespace] = new Constants(namespace); return store[namespace]; }; })();

  2. > 2. 构造创建示例
  4. > ```tsx
  5. //创建USER实例,用作后续使用  --> const.js
  6. import constant from '~/utils/constant'; //调用封装函数
  7. interface UserConstant extends Constant {
  8.   LAST_LOGIN?: string;
  9.   LAST_USER?: string;
  10.   LAST_PASS?: string;
  11.   TOKEN?: string;
  12.   LOCAL_USER_KEY?: string;
  13.   USER_LOCAL_USER_KEY:string;
  14. }
  15. //此处构造的的不能对后面需要多端更改的部分进行of,详细原因见上方注释
  16. const USER: UserConstant = constant('USER');  //创建实例
  17. USER.of('LAST_LOGIN'); //此处是创建USER中的常量 相当于 USER.LAST_LOGIN='USER.LAST_LOGIN '(此处结果原因看上方封装)
  18. USER.of('LAST_USER');
  19. USER.of('LAST_PASS');
  20. USER.of('LOCAL_USER_KEY');
  21. // USER.of('USER_LOCAL_USER_KEY');
  22. export default USER;
  1. 调用示例

```tsx //此处在两个端的入口index,js处调用 import { PLATFORM, USER } from ‘~/const’; //管理员端 —>需要进行不同端修改的常量切记不可在之前的构造js中调用,详细原因见封装注释 USER.of(‘TOKEN’, ‘ADMIN_TOKEN’); USER.of(‘USER_LOCAL_USER_KEY’, ‘ADMIN_LOCAL_USER_KEY’);

//用户端 USER.of(‘TOKEN’, ‘TOKEN’); USER.of(‘USER_LOCAL_USER_KEY’, ‘LOCAL_USER_KEY’);

//具体调用 init = () => { let user: User = loginDB.get(USER.USER_LOCAL_USER_KEY); if (user) { this.user = user; } console.log(‘user’, user); };

cache = (user: User) => { // LocalStorage.set(USER.LOCAL_USER_KEY, user); LocalStorage.set(USER.USER_LOCAL_USER_KEY, user); }; ```

  1. 结果:在管理员端打印USER.USER_LOCAL_USER_KEY会是ADMIN_LOCAL_USER_KEY,而在用户端打印结果是LOCAL_USER_KEY,就可以不用改具体实现代码,在入口处调用即可

Ⅳ-注意点

  1. 实现不同端同一变量指向不同常量需要在不同端的入口文件js中使用总常量实例.of("要改变的常量名","改变后的常量名")
  2. 因为个人封装时对于—已经创建的key进行了不为空则不改变的判断—所以,用一要改变常量的of只能调用一次,也只能生效一次
  3. 注释写的很清楚了,对于2中需求不满的可以将代码部分删除,本人已经指出
  4. 主要还是提供一个思路,这东西要做成通用的还是需要相对麻烦点,以后变强后我会进行整理,但不是现在