好家伙，

0.索引

在阿里的低开项目中，使用这种形式去注册组件，我不禁好奇，这到底是个什么玩意

1.概念

在 JavaScript 中，注册模式（Registry Pattern）是一种设计模式，它用于管理对象、函数或其他类型的实例，并提供一种机制来访问它们。注册模式通常用于将对象实例注册到一个中心注册表中，以便在需要时能够轻松地检索和使用这些实例。

注册模式通常包含以下几个核心组件：

注册表（Registry）：注册表是一个存储对象实例的集合，通常以键值对的形式存储。可以将对象实例注册到注册表中，也可以从注册表中检索对象实例。
注册（Registration）：注册是指将对象实例添加到注册表中的过程。通常会将对象实例与一个唯一的标识符（如字符串）相关联，以便在需要时能够通过该标识符检索对象实例。
检索（Retrieval）：检索是指从注册表中获取对象实例的过程。通过提供相应的标识符，可以从注册表中检索相应的对象实例。

使用注册模式的一个常见场景是在应用程序中管理和访问多个服务、插件或组件。通过将这些服务、插件或组件注册到一个中心注册表中，可以在需要时轻松地获取它们，而无需直接引用它们的实现细节。

2.实践

然后我发现我的低开物料库也能这么干，

具体怎么做呢？
1.写个注册表

2.写个注册方法

3.写出相应的检索方法

3.注册表

const componentList = [];

以数组的形式存在，可以直接push

4.注册方法

function createEditorConfig() {
  const componentList = [];
  return {
    componentList,
    componentMap,
    register: (component) => {
      componentList.push(component);
    }
  };
}

5.检索

function createEditorConfig() {
  const componentList = [];
  const componentMap = {};
  console.log(componentList,componentMap)
  return {
    componentList,
    componentMap,
    register: (component) => {
      componentList.push(component);
      componentMap[component.key] = component;
    }
  };
}

export let registerConfig = createEditorConfig();
registerConfig.register({
  label: '文本',
  preview: () => '预览文本',
  render: function(h) {
    return h('div', '渲染文本');
  },
  key: 'text'
});
registerConfig.register({
  label: '按钮',
  preview: () => 预览按钮,
  render: function(h) {
    return 渲染按钮;
  },
  key: 'button'
});
registerConfig.register({
  label: '输入框',
  preview: () => "预览输入框">预览按钮,
  render: function(h) {
    return "渲染输入框">预览输入框;
  },
  key: 'input'
});

这里，我们为每个注册的组件配置配置相应的key值（比如输入框组件的key值是input）

componentMap是一个对象，用于将组件的 key与组件对象进行映射。

当注册一个新组件时，会将组件对象以 key-value 的形式存储在componentMap对象中，其中 key 是组件的唯一标识符，通常用于查找特定组件。

通过维护一个组件映射，可以快速通过 key 查找到对应的组件对象。

6.使用注册表

既然注册表已经做好了，那么我们去将这个注册表中的组件渲染出来

"material" v-for="(component, key) in registerConfig.componentMap" :key="component.key">
                {{ key }}
                "component">
            



components: {
        lcEditor, lcRender, test, Material,
     服务器托管网   component: {
            functional: true,
            render(h, { data }) {
                return h(registerConfig.componentMap[data.key]);
            }
        }
    },

成功渲染

7.疑问：为什么要将componentList,componentMap包在方法内部？

将componentList和componentMap包在createEditorConfig方法内部的主要目的是为了封装这两个变量，并且通过闭包的方式创建了一个私有作用域，避免了这两个变量被外部直接访问和修改。

具体原因如下：

封装数据: 将componentList和componentMap包在方法内部，可以将它们视为createEditorConfig方法的私有属性，外部无法直接访问或修改这两个变量，只能通过register方法来操作它们，从而保证了数据的封装性服务器托管网。
避免全局污染: 将变量包在方法内部可以避免将这些变量暴露在全局作用域中，减少了全局变量的数量，避免了可能出现的命名冲突和全局污染。
提供了私有作用域: 通过闭包的方式，register方法可以访问到componentList和componentMap变量，但外部无法直接访问这两个变量，确保了数据的私有性。
简化调用方式: 将componentList和componentMap封装在方法内部，使得创建配置对象和注册组件的操作更加简洁明了，只需调用createEditorConfig()方法即可获得一个包含componentList和componentMap的配置对象，然后通过register方法注册组件。

总的来说，将componentList和componentMap包在方法内部是一种良好的编程实践，有利于提高代码的可维护性、可读性，并且能够更好地控制数据的访问权限和作用域。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: Java数据类型你真的懂吗？看完之后在说

1.包装类型 boolean/1 byte/8 char/16 short/16 int/32 float/32 long/64 double/64 基本类型都有对应的包装类型，基本类型与其对应的包装类型之间的赋值使用自动装箱与拆箱完成。 Integer x …

第145篇：js设计模式注册模式及相应实践