统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装

背景：

我的项目在各种不同的域名使用，在不同域名需要展现的信息也不同，我就想要去做如何能统一管理

1.公共封装统一配置类

TypeScript 复制代码

// 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()方法会返回匹配的客户端配置，如果没有匹配项则返回undefined
        const options = this.clientMap.get(this.browserLocation.value.hostname);
        //这是一个条件语句，使用了可选链操作符（?.）
        //如果 options 存在且 options.name 也存在，则执行 useTitle(options.name)
        //useTitle() 是一个设置浏览器标签页标题的函数，将页面标题设置为当前客户端的名称
        options?.name && useTitle(options?.name);
        //使用空值合并操作符（??）返回结果
        //如果 options 不是 null 或 undefined，则返回 options    
        //否则返回默认配置 defaultOptions
        return 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.使用写法
TypeScript 复制代码
<script lang="ts" setup>
    import clientManager from './testClient.ts';
    onMounted(()=>{
       //根据当前客户端域名，获取当前域名对应的信息
       console.log(clientManager.currentClient);
       //获取所有的客户端环境
       console.log(clientManager.getClients);
    })
</script>
知识点：

（1）什么是单例模式？

1.单例模式就是，通过 export const clientManager = new ClientManager();创建并导出唯一的实例

2.全局访问点：在整个项目中可以通过导入clientManager来访问这个唯一的实例

3.延迟初始化：实例在模块加载时创建，而不是在第一次使用时创建