统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
背景：
我的项目在各种不同的域名使用，在不同域名需要展现的信息也不同，我就想要去做如何能统一管理
1.公共封装统一配置类
// clientTest
import { userBrowserLocation } from '@vueuse/core'; interface ClientTypes {}export const licenses = [{text:``},
]const defaultOptions: ClientOptions = {key: 'Artmate',logos: ['logo'],
}
/** 创建一个客户端 */
const createClient = (arr:string[],options?:ClientTypes )=>{let clientOptions=[];for(let i=0;i<arr.length;i++){clientOptions.push([arr[i],{...defaultOptions,...options}]);}
}
class ClientManager {private clientMap = new Map<string, ClientOptions>([...createClient(['客户端1']),/** */...createClient(['客户端2','客户端3'],{'key1' : 'val2','key2' : 'val1'}),])/** 浏览器相关信息 */private browserLocation = useBrowserLocation();/** 是否存在某个客户端环境 */get hasClient() {return this.clientMap.has;}/** 获取当前客户端数据 */get currentClient() {//从 clientMap中根据当前浏览器的主机名获取对应的客户端配置//this.browserLocation.value.hostname 是当前访问网络的域名或IP地址//this.clientMap.get()方法会返回匹配的客户端配置，如果没有匹配项则返回undefinedconst options = this.clientMap.get(this.browserLocation.value.hostname);//这是一个条件语句，使用了可选链操作符（?.）//如果 options 存在且 options.name 也存在，则执行 useTitle(options.name)//useTitle() 是一个设置浏览器标签页标题的函数，将页面标题设置为当前客户端的名称options?.name && useTitle(options?.name);//使用空值合并操作符（??）返回结果//如果 options 不是 null 或 undefined，则返回 options //否则返回默认配置 defaultOptionsreturn options ?? defaultOptions;}/** 获取客户端环境 */getClient(name : string) {const options = this.clientMap.get(name);if(!options) {throw new Error(`client ${name} not exists`);}}/** 获取所有客户端环境 */getClients() {return Array.from(this.clientMap.values());}
}export const clientManager = new ClientManager();2.使用写法
<script lang="ts" setup>import clientManager from './testClient.ts';onMounted(()=>{//根据当前客户端域名，获取当前域名对应的信息console.log(clientManager.currentClient);//获取所有的客户端环境console.log(clientManager.getClients);}) </script>知识点：
（1）什么是单例模式？
1.单例模式就是，通过
export const clientManager = newClientManager();创建并导出唯一的实例
2.全局访问点：在整个项目中可以通过导入clientManager来访问这个唯一的实例3.延迟初始化：实例在模块加载时创建，而不是在第一次使用时创建