JS工具函数与代码优化实战

一、拼接 url 参数函数

js 中拼接参数，需要特殊处理因为原来的 url 可能已经有参数，可能没有，所以需要判断是否有 【?】所以最好是封装一个工具函数

1.1 原代码

if (url.indexOf('?') != -1) {
   url = url + '&key=' + encodeURIComponent(value)
} else {
   url = url + '?key=' + encodeURIComponent(value)
}

1.2 封装成工具方法

const addParam = (url, key, value) => {
  if (!value) return url
  if (url.includes(`${key}=`)) return url
  return url + (url.includes("?") ? "&" : "?") +`${key}=${encodeURIComponent(value)}`
}

1.3 使用 URL 优化方法

const appendQueryParam = (url, key, value) => {
  if (!value) return url
  const url = new URL(url, window.location.origin) // 第二个参数是基准地址，防止相对路径报错
  if (!url.searchParams.has(key)) {
    url.searchParams.set(key, value)
  }
  return url.toString()
}

但是使用这个方法，你需要自己斟酌一下兼容性能不能符合你的需求，一般来说问题不大，因为我们已经不需要兼容 ie 了。

二、配置常量优化

一般来说会把一些常量放在一个 constant.ts 或者是 enum.ts 文件中，但是随着业务越来越多，什么常量都放进去也不好。

2.1 config 文件夹

所以我们可以在 src 下面建一个 config 文件夹，按照功能把不同的常量新建一个对应的文件，如 file.ts 、layout.ts 等，然后在 config/index.ts 中统一导出。

export * from './file'
export * from './enums'

2.2 统一导出

统一导出很有用，否则如果你有很多文件，如果在另一个文件中引入的时候，import 的地方会很长，如果统一导出就都成 config/index.ts 中导入就行了。

同理，如果我们 store 文件夹中有很多不能功能模块的文件，也可以在 store/index.ts 统一导出。

三、模块导入方式

3.1 使用 import * as xx 一次性导入模块

假设你有一个文件 file.ts 中有很多方法，且都会用到，你可以一次性导入整个模块，这样用的时候直接调用 XX.fn 就可以了，避免在导入的时候写一长串的 import 语句。

而为可以避免函数名称重复，命名空间隔离，只要你 as 后面的名称在用的时候不重复就可以。

但是需要注意一次行导入模块，在打包工具 tree-shaking 的时候可能无法完全去掉未使用的导出，导致打包体积略大，所以你要自己斟酌你是否要使用这个方法。

3.2 按需导入模块

我的建议是如果是你自己写的文件，你能保证每个方法都会被使用和使用频率，那你可以使用一次性导入。

但是如果你使用第三方库，比如 lodash ，那还是按需导入更合适。

四、eventBus 分组管理

我们在使用 eventBus 的时候经常会把所有的时间名写在一个配置文件中，但是随着功能越来越多配置越来越长，即不好看，也不好找。

export const EventBusName = {
  Login: 'Login',
  RefreshUserInfo: 'RefreshUserInfo',
  GetFileList: 'GetFileList',
  DeleteFile: 'DeleteFile',
  // ... 很多很多的事件名称
} as const

4.1 按业务功能分组

我们可以把相同功能模块的事件拆开定义，然后再合并

// 用户相关事件
export const UserEvents = {
  Login: 'Login',
  RefreshUserInfo: 'RefreshUserInfo'
} as const

// 文件相关事件
export const FileEvents = {
  GetFileList: 'GetFileList',
  DeleteFile: 'DeleteFile',
} as const

4.2 合并

export const EventBusName = {
  ...UserEvents,
  ...FileEvents
} as const

export type EventBusKeys = keyof typeof EventBusName