npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

motx

v3.1.4

Published

A lightweight application state transfer and storage tool based on the mediator pattern and provides efficient solutions to communication problems between multiple processes or closed modules

Downloads

10

Readme

MotX

一个基于中介者模式实现的轻量级应用状态传递和存储的工具,并为多进程或封闭模块之间的通讯问题提供高效的解决方案

Start

npm i motx --save

内置 TypeScript 声明文件


    // #############################################
    // 以下代码跑在worker进程

    import MotX from 'motx'
    const motx = new MotX({
        // 使用存储状态前需先定义存储字段及初始状态
        store: {
            bean: { count: 1 }
        },
        // 注册频道
        channels:[
            // 用户通知更改bean数量
            'change-count'
        ]
    })

    // 订阅
    motx.subscribe('change-count', (count)=>{
        // 更新store状态
        motx.setState('bean', {count})
    })

    // 默认初始同步执行一次,以及bean状态变更后自动异步执行,同步多次变更状态会自动节流
    motx.autorun(({bean})=>{
        console.log(bean.count)
    })

    // 发布
    motx.publish('change-count', 2)

    console.log(motx.getState('bean').count) // 2

    // 接收来自master进程的消息并发布相应消息
    process.on('message', (message)=>{
        motx.onReceive(message)
    })

    //#################################################
    // 以下代码跑在master进程

    import MotX from 'motx'
    const worker = ... // worker handler
    const motx = new MotX({
        pipes:{
            // 定义 worker 数据传送管道
            worker(jsonStringifyed) {
                // 向 worker process 发送motx消息json字符串
                worker.send(jsonStringifyed)
            }
        }
    })
    // 通过 worker 管道将消息传送到 worker 进程
    motx.pipe('worker').publish('change-count', 3)

work with Vue

In entry

import MotxVue from 'motx/motx-vue'
const motx = new MotxVue({ store: { hello: `hello world ~ ~` } })
Vue.use(motx)

In vue components

<template>
    <section>{{ hell }}</section>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { State } from 'motx/motx-vue'
@Component({})
export default class App extends Vue {
    @State('hello')
    protected hell
}
</script>

基础概念

Mediator

MotX 基于中介者模式实现消息发布和订阅机制,实现组件间松耦合通讯,订阅和发布都基于特定频道(channel), publish(channel, data1, data2, ...) subscribe(channel, data1, data2, ...)

为了更好地理解与维护这些 channel,MotX 限制使用 channel 前须先注册

Store & State

MotX 支持缓存全局应用状态,store 用于存储状态树数据,state 是 store 某字段当前状态快照,默认进行对象引用隔离

通过 getState 方法获得指定字段的 state,通过 setState 更改 store 的存储状态

订阅发布的数据不会流入 store,默认也会进行对象引用隔离

Hooks

MotX 作为 '中介',提供三个可以改变发布与更新缓存状态默认流程的钩子,让你可以灵活拓展 '中介' 的能力

Pipe

Motx 通过 pipe 联通多个进程或多个隔离模块,实现多进程或多隔离模块之间相互发布消息,pipe 需要你基于具体应用场景去定义如何传送 motx 消息字符串数据

同一全局上下文含有 name 属性的 MotX 实例可使用 name 作为 pipe 通道名,无需在 MotXOption.pipes 定义

API

MotXOptions

MotXOptions {
    name: string;
    store: Store;
    hooks?: Hooks;
    pipes?: {
        [pipeName: string]: Pipe;
    };
    isolate?: boolean;
    channels?: string[];
}
  • name 实例名,用于同一全局上下通过管道文传输消息,实例名作为管道名

  • store 定义存储状态字段和初始数据

    初始化后不可动态创建字段,也不支持赋值 undefined

    store 负责存储在 motx 内部的状态数据,只能通过 setStatepublish 变更消息来触发 store 的变更

  • isolate 定义数据传输过程是否需要隔离引用

  • hooks: 全局钩子

    • willPublish?(channel: string, args: any[]): boolean; 发布前执行,返回 false 可拦截发布
    • didPublish?(channel: string, args: any[]): void 发布之后执行
    • willSetState?(fieldName: string, newState: State, isolate: boolean, store: Store): State | undefined; 更改 store 数据前执行,返回非 undefined 数据可作为变更数据,返回 undefined 则停止更改数据
    • didSetState?(fieldName: string, newState: State, isolate: boolean, store?: Store): void 更改 store 数据后执行
  • pipes:{[pipeName: string]: (jsonStringifyed: string): void}: 定义向其他进程或隔离模块传送数据的方式

    发布的 channel 前加上 pipeName# 即可向该管道传送经过JSON.stringify 的 publish 相关数据,使 publish 动作应用在目标进程或隔离模块

    同一全局上下文不需要定义,默认使用 MotXOption.name 作为 pipeName

  • channels: string[] 注册频道

Methods

  • publish(channel: string, ...args: any[]): void

    发布消息,传递数据,支持多个参数

  • subscribe(channel: string, handler: Handler): void

    订阅消息

  • unsubscribe(channel: string, handler?: Handler): void

    取消订阅消息

  • getState(fieldName: string): State

    获得指定字段的当前状态数据

  • setState(fieldName: string, newState: State, silent?: boolean): void

    变更 store 状态,支持 silent 模式,为 true 时将不会自动发布字段变更消息

  • autorun(handler: (rootState: { [key: string]: any; }, isInitRun: boolean) => {}): RemoveAutorunFunction

  • 初始同步执行传入的handler,依赖的state变更后异步执行

  • pipe(rule: string): Pipe

    返回管道对象,支持publish和setState

    通过MotXOption.pipes定义的发送方式,向目标进程发送publish或setState动作相关json字符串

  • onReceive

    当前进程或隔离模块接收到其他进程或隔离模块通过管道发送来的数据后,需要执行该方法并将 json 字符串数据传入即可执行对应publish或setState动作

  • dispose()

    注销MotX实例