还在学习前端组件数据通信？用hajimi就够了。

前端框架层出不穷，React、Vue、Angular、Svelte...

每个框架都有自己的规则去实现组件间方法调用。父调子，子调父，有的组件毫不相干，有时组件外想调用组件内方法。

那么，有没有办法可以实现所有前端框架都通用的数据通信呢？试试hajimi吧。

安装

• 使用 npm:

npm install hajimi

• 使用script标签:

<script src="./dist/hajimi.min.js"></script>
<script>
    const { Provider, Subscriber } = window.hajimi
</script>

• import

import { Provider, Subscriber } from "hajimi"

• require

const { Provider, Subscriber } = require("hajimi")

例子

实例化Provider和Subscriber时，可以传入相同的字符串参数进行关联。Provider负责提供方法，Subscriber负责调用Provider提供的方法。

即使是两个嵌套关系很复杂的组件，只要Provider加载了需要被调用的方法，Subscriber就能在其他组件中调用到被Provider加载的方法。

• Provider

import { Provider } from "hajimi"

const provider = new Provider("THE_SAME_STRING_1");

provider.load({
    add(a, b) {
        return a + b;
    },
    // 支持Async function
    async subtract(a, b) {
        return a - b;
    },
});

• Subscriber

import { Subscriber } from "hajimi"

const foo = new Subscriber("THE_SAME_STRING_1");

foo.add(1, 2); // 3

(async () => {
    await foo.subtract(9, 5); // 4
})();

• 当组件销毁时，记得一定将Provider的实例destroy。

provider.destroy();

总之，hajimi不仅可以实现组件内的数据通信，还可以应用于组件外调用组件外方法，或者组件外调用组件内的方法。

在功能实现上，hajimi基于CustomEvent和Proxy，具体实现请看Github。

Github: github.com/ceshu/hajim…

NPM: www.npmjs.com/package/haj…