@beautywe/plugin-status NPM

介绍

npm bundle size

Feature

基于事件驱动的状态机
依赖于 beautywe-plugin-event
支持 BtPage，BtApp

安装

$ npm i @beautywe/plugin-event
$ npm i @beautywe/plugin-status

import BeautyWe from '@beautywe/core';
import event from '@beautywe/plugin-event';
import status from '@beautywe/plugin-status';

const app = new BeautyWe.BtApp();

// status 插件依赖于 beautywe-plugin-event
app.use(event());

// 使用 status 插件
app.use(status({
    // options
}));

使用

beautywe-plugin-status 弥补了微信小程序生命周期钩子不支持异步阻塞的问题。

假设我们有这样一个场景：在应用启动的时候进行全局的数据获取和初始化，待成功后，各页面再进行初始化。

那么我们可能是这样写代码：

// on app.js
App({
    onLaunch() {
        API
            .fetch('xxx')
            .then(data => this.globalData = data);
    },
});

// on page.js
Page({
    onLoad() {
        // 在微信小程序中，onLoad 执行的时候，可能数据还没返回呢。
        const globalData = getApp().globalData;
        if (globaleData) this.initPage(globalData);
    },
});

在原生的小程序启动流程中，因为无论 app，page，component 的生命周期钩子函数，都不支持异步阻塞。
但是实际项目中，我们有大量的类似的实际场景需要满足：登录态的初始化，全局数据的初始化等等。

beautywe-plugin-status 基于事件驱动，来满足这一类的需求：

// on app.js
const app = BtApp({
    onLaunch() {
        API
            .fetch('xxx')
            .then(data => this.globalData = data)

            // 把状态机设置为 success
            .then(() => this.status.get('fetchGlobalData').success());
    },
});

app.use(status({
    statuses: ['fetchGlobalData'],
}));

App(app);

// on page.js
Page({
    onLoad() {
        getApp()
            .status.get('fetchGlobalData')

            // 监听一次成功状态事件
            .onceSuccess(() => {
                const globalData = getApp().globalData;
                if (globaleData) this.initPage(globalData);
            });
    },
});

原生启动流程 VS 事件驱动启动流程

npm.io

状态机的获取，移除，注册，批量注册

// 批量注册（批量注册只能是在引入插件的时候）
app.use(status({
    statuses: [
        'abc',
        'def',
        'ghi',
    ],
}));

// 获取一个状态机实例
const statusInstance = app.status.get('abc');

// 移除一个状态机
app.status.remove('def');

// 新增一个状态机
app.status.add('jkl');

// 可以使用以下 api
statusInstance.success();
statusInstance.fail();
statusInstance.ing();
statusInstance.reset();
statusInstance.onceSuccess();
statusInstance.onceFail();
statusInstance.must();
statusInstance.isIng();
statusInstance.isSuccess();
statusInstance.isFail();