Merge pull request 'Add EventEmitter into Module, Optimize Manger so that it can load data' (#8) from dev-mrkbear into master
Reviewed-on: http://git.mrkbear.com/MrKBear/mini-dlpu-v3/pulls/8
This commit is contained in:
commit
0528c2865d
119
miniprogram/core/EventEmitter.ts
Normal file
119
miniprogram/core/EventEmitter.ts
Normal file
@ -0,0 +1,119 @@
|
||||
export type EventType = string | symbol;
|
||||
|
||||
// An event handler can take an optional event argument
|
||||
// and should not return a value
|
||||
export type Handler<T = unknown> = (event: T) => void;
|
||||
export type WildcardHandler<T = Record<string, unknown>> = (
|
||||
type: keyof T,
|
||||
event: T[keyof T]
|
||||
) => void;
|
||||
|
||||
// An array of all currently registered event handlers for a type
|
||||
export type EventHandlerList<T = unknown> = Array<Handler<T>>;
|
||||
export type WildCardEventHandlerList<T = Record<string, unknown>> = Array<WildcardHandler<T>>;
|
||||
|
||||
// A map of event types and their corresponding event handlers.
|
||||
export type EventHandlerMap<Events extends Record<EventType, unknown>> = Map<
|
||||
keyof Events | '*',
|
||||
EventHandlerList<Events[keyof Events]> | WildCardEventHandlerList<Events>
|
||||
>;
|
||||
|
||||
export interface Emitter<Events extends Record<EventType, unknown>> {
|
||||
all: EventHandlerMap<Events>;
|
||||
|
||||
on<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>): void;
|
||||
on(type: '*', handler: WildcardHandler<Events>): void;
|
||||
|
||||
off<Key extends keyof Events>(type: Key, handler?: Handler<Events[Key]>): void;
|
||||
off(type: '*', handler: WildcardHandler<Events>): void;
|
||||
|
||||
emit<Key extends keyof Events>(type: Key, event: Events[Key]): void;
|
||||
emit<Key extends keyof Events>(type: undefined extends Events[Key] ? Key : never): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mitt: Tiny (~200b) functional event emitter / pubsub.
|
||||
* @name mitt
|
||||
* @returns {Mitt}
|
||||
*/
|
||||
export default function mitt<Events extends Record<EventType, unknown>>(
|
||||
all?: EventHandlerMap<Events>
|
||||
): Emitter<Events> {
|
||||
type GenericEventHandler =
|
||||
| Handler<Events[keyof Events]>
|
||||
| WildcardHandler<Events>;
|
||||
all = all || new Map();
|
||||
|
||||
return {
|
||||
|
||||
/**
|
||||
* A Map of event names to registered handler functions.
|
||||
*/
|
||||
all,
|
||||
|
||||
/**
|
||||
* Register an event handler for the given type.
|
||||
* @param {string|symbol} type Type of event to listen for, or `'*'` for all events
|
||||
* @param {Function} handler Function to call in response to given event
|
||||
* @memberOf mitt
|
||||
*/
|
||||
on<Key extends keyof Events>(type: Key, handler: GenericEventHandler) {
|
||||
const handlers: Array<GenericEventHandler> | undefined = all!.get(type);
|
||||
if (handlers) {
|
||||
handlers.push(handler);
|
||||
}
|
||||
else {
|
||||
all!.set(type, [handler] as EventHandlerList<Events[keyof Events]>);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove an event handler for the given type.
|
||||
* If `handler` is omitted, all handlers of the given type are removed.
|
||||
* @param {string|symbol} type Type of event to unregister `handler` from, or `'*'`
|
||||
* @param {Function} [handler] Handler function to remove
|
||||
* @memberOf mitt
|
||||
*/
|
||||
off<Key extends keyof Events>(type: Key, handler?: GenericEventHandler) {
|
||||
const handlers: Array<GenericEventHandler> | undefined = all!.get(type);
|
||||
if (handlers) {
|
||||
if (handler) {
|
||||
handlers.splice(handlers.indexOf(handler) >>> 0, 1);
|
||||
}
|
||||
else {
|
||||
all!.set(type, []);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Invoke all handlers for the given type.
|
||||
* If present, `'*'` handlers are invoked after type-matched handlers.
|
||||
*
|
||||
* Note: Manually firing '*' handlers is not supported.
|
||||
*
|
||||
* @param {string|symbol} type The event type to invoke
|
||||
* @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
|
||||
* @memberOf mitt
|
||||
*/
|
||||
emit<Key extends keyof Events>(type: Key, evt?: Events[Key]) {
|
||||
let handlers = all!.get(type);
|
||||
if (handlers) {
|
||||
(handlers as EventHandlerList<Events[keyof Events]>)
|
||||
.slice()
|
||||
.map((handler) => {
|
||||
handler(evt!);
|
||||
});
|
||||
}
|
||||
|
||||
handlers = all!.get('*');
|
||||
if (handlers) {
|
||||
(handlers as WildCardEventHandlerList<Events>)
|
||||
.slice()
|
||||
.map((handler) => {
|
||||
handler(type, evt!);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,3 +1,7 @@
|
||||
import mitt, { Emitter, EventHandlerMap, EventType, Handler, WildcardHandler } from "./EventEmitter";
|
||||
import { LogLabel, LogStyle } from "./LogLabel";
|
||||
import { Logger } from "./Logger";
|
||||
import { LevelLogLabel } from "./PresetLogLabel";
|
||||
|
||||
/**
|
||||
* 自定义对象类型
|
||||
@ -52,13 +56,15 @@ type Depends<M extends Manager<AnyWXContext>> = {
|
||||
* 页面模组
|
||||
* @template M 所属 Manager
|
||||
* @template DEP 模组依赖
|
||||
* @template E 模组事件
|
||||
* @template TD 模组 Data 类型
|
||||
*/
|
||||
class Modular<
|
||||
M extends Manager<AnyWXContext> = Manager<AnyWXContext>,
|
||||
DEP extends Depends<M> = Depends<M>,
|
||||
E extends Record<EventType, unknown> = Record<EventType, unknown>,
|
||||
TD extends IAnyTypeObject = IAnyTypeObject>
|
||||
implements WXContext<TD, IAnyTypeObject> {
|
||||
implements WXContext<TD, IAnyTypeObject>, Emitter<E> {
|
||||
|
||||
// [x:string]: any;
|
||||
|
||||
@ -87,17 +93,17 @@ implements WXContext<TD, IAnyTypeObject> {
|
||||
/**
|
||||
* 模组使用的函数列表
|
||||
*/
|
||||
private functionList:Set<string>;
|
||||
public functionList:Set<string>;
|
||||
|
||||
/**
|
||||
* 函数使用的参数列表
|
||||
*/
|
||||
private paramList:Set<string>;
|
||||
public paramList:Set<string>;
|
||||
|
||||
/**
|
||||
* 命名空间
|
||||
*/
|
||||
private nameSpace:string;
|
||||
public nameSpace:string;
|
||||
|
||||
// 映射主上下文属性
|
||||
public get is():string { return this.context.is };
|
||||
@ -125,6 +131,34 @@ implements WXContext<TD, IAnyTypeObject> {
|
||||
this.functionList = new Set<string>();
|
||||
this.paramList = new Set<string>();
|
||||
this.nameSpace = nameSpace;
|
||||
|
||||
this.emitter = mitt<E>();
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 内部事件控制器
|
||||
*/
|
||||
private emitter:Emitter<E>;
|
||||
|
||||
public get all():EventHandlerMap<E> { return this.emitter.all };
|
||||
|
||||
on<Key extends keyof E>(type: Key, handler: Handler<E[Key]>): void;
|
||||
on(type: "*", handler: WildcardHandler<E>): void;
|
||||
on(type: any, handler: any): void {
|
||||
return this.emitter.on(type, handler);
|
||||
}
|
||||
|
||||
off<Key extends keyof E>(type: Key, handler?: Handler<E[Key]>): void;
|
||||
off(type: "*", handler: WildcardHandler<E>): void;
|
||||
off(type: any, handler?: any): void {
|
||||
return this.emitter.off(type, handler);
|
||||
}
|
||||
|
||||
emit<Key extends keyof E>(type: Key, event: E[Key]): void;
|
||||
emit<Key extends keyof E>(type: undefined extends E[Key] ? Key : never): void;
|
||||
emit(type: any, event?: any): void {
|
||||
return this.emitter.emit(type, event);
|
||||
}
|
||||
|
||||
public setData(data:Partial<TD>, callback?: () => void):void {
|
||||
@ -293,40 +327,44 @@ class Manager<WXC extends AnyWXContext = AnyWXContext> {
|
||||
* 创建指定生命周期的钩子
|
||||
* @param key 生命周期键值
|
||||
*/
|
||||
public creatHooks(key:keyof ILifetime):ILifetime[keyof ILifetime] {
|
||||
return (...arg: any[]) => {
|
||||
public creatHooks(key:keyof ILifetime):(...arg: any[]) => Promise<any> {
|
||||
return async (...arg: any[]) => {
|
||||
|
||||
let hooks:Promise<any>[] = [];
|
||||
let simple:any;
|
||||
|
||||
for(let i = 0; i < this.modules.length; i++) {
|
||||
|
||||
let res: Promise<any> | any =
|
||||
(this.modules[i] as IAnyTypeObject)[key](...arg);
|
||||
let fn:Function = (this.modules[i] as IAnyTypeObject)[key];
|
||||
|
||||
if(fn === void 0) continue;
|
||||
let res: Promise<any> | any = fn.apply(this.modules[i], arg);
|
||||
|
||||
if (res instanceof Promise) {
|
||||
hooks.push(res);
|
||||
|
||||
} else {
|
||||
hooks.push(Promise.resolve(res));
|
||||
}
|
||||
|
||||
if (
|
||||
key === "onShareAppMessage" ||
|
||||
key === "onShareTimeline" ||
|
||||
key === "onAddToFavorites"
|
||||
) {
|
||||
|
||||
// 如果返回值有特殊含义在处理时进行 MinIn
|
||||
simple = Object.assign({}, simple, res);
|
||||
} else {
|
||||
simple = res;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(hooks.length === 0) return;
|
||||
if(hooks.length === 1) return simple;
|
||||
if (
|
||||
key === "onShareAppMessage" ||
|
||||
key === "onShareTimeline" ||
|
||||
key === "onAddToFavorites"
|
||||
) {
|
||||
|
||||
// 如果返回值有特殊含义在处理时进行 MinIn
|
||||
return Promise.all(hooks).then((res) => {
|
||||
|
||||
let simple:IAnyTypeObject = {};
|
||||
|
||||
for(let i = 0; i < res.length; i++) {
|
||||
simple = Object.assign({}, simple, res);
|
||||
}
|
||||
|
||||
return Promise.resolve(simple);
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
return Promise.all(hooks);
|
||||
}
|
||||
@ -344,13 +382,81 @@ class Manager<WXC extends AnyWXContext = AnyWXContext> {
|
||||
|
||||
/**
|
||||
* 加载全部的模块
|
||||
* @param query onLoad 接收的参数
|
||||
*/
|
||||
public loadAllModule(query:Record<string, string | undefined>) {
|
||||
|
||||
// 创建全部钩子
|
||||
this.creatAllHooks();
|
||||
|
||||
// 加载全部模组数据
|
||||
for(let i = 0; i < this.modules.length; i++) {
|
||||
|
||||
if(this.modules[i].data)
|
||||
for(let key in this.modules[i].data) {
|
||||
|
||||
if(this.context.data === void 0) this.context.data = {};
|
||||
|
||||
if(this.modules[i].data !== void 0) {
|
||||
this.context.data[`${ this.modules[i].nameSpace }$${ key }`] =
|
||||
( this.modules[i].data as IAnyTypeObject )[key];
|
||||
// this.modules[i]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 将全部数据发布到视图层
|
||||
if(this.context.data !== void 0)
|
||||
this.context.setData(this.context.data);
|
||||
|
||||
// 调用全部模块的 onLoad 周期
|
||||
let res = this.creatHooks("onLoad")(query as any);
|
||||
|
||||
// 打印每个模块的键值对使用情况
|
||||
for(let i = 0; i < this.modules.length; i++) {
|
||||
let data:string[] = [];
|
||||
let func:string[] = [];
|
||||
|
||||
for(let key of this.modules[i].paramList) {
|
||||
data.push(`[${ key }]`);
|
||||
}
|
||||
|
||||
for(let key of this.modules[i].functionList) {
|
||||
func.push(`[${ key }]`);
|
||||
}
|
||||
|
||||
let log:string = `模块 [${ this.modules[i].nameSpace }] 加载完成...\n`;
|
||||
if(data.length > 0) log += `Using Props: ${ data.join(", ") }\n`;
|
||||
if(func.length > 0) log += `Using Function: ${ func.join(", ") }\n`;
|
||||
|
||||
Logger.log(log, LevelLogLabel.TraceLabel, Manager.AddModuleLabel);
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
/**
|
||||
* 模块被添加时的标签
|
||||
*/
|
||||
public static readonly AddModuleLabel = new LogLabel("addModule",
|
||||
new LogStyle().setBorder("4px", `1px solid #8600FF`)
|
||||
.setColor("#FF00FF", "rgba(54, 0, 255, .2)").setBlank("0 5px")
|
||||
)
|
||||
|
||||
/**
|
||||
* 加载 Manager 控件
|
||||
* @param fn 约束后调用的函数用来添加模块
|
||||
*/
|
||||
public static Page(fn:(manager:Manager<AnyWXContext>) => void) {
|
||||
Page({
|
||||
async onLoad(query) {
|
||||
let manager = new Manager(this);
|
||||
fn(manager);
|
||||
manager.loadAllModule(query);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { Manager, Modular, AnyWXContext, WXContext, ILifetime}
|
||||
@ -2,67 +2,84 @@ import { Logger } from "../../core/Logger";
|
||||
import { LevelLogLabel, LifeCycleLogLabel } from "../../core/PresetLogLabel";
|
||||
import { Manager, Modular, AnyWXContext, ILifetime } from "../../core/Module";
|
||||
|
||||
Page({
|
||||
let manager;
|
||||
|
||||
/**
|
||||
* 课程表页面加载
|
||||
*/
|
||||
onLoad: async function () {
|
||||
// Page({
|
||||
|
||||
this;
|
||||
// /**
|
||||
// * 课程表页面加载
|
||||
// */
|
||||
// onLoad: async function (query) {
|
||||
|
||||
let manager = new Manager(this);
|
||||
let m1 = manager.addModule(M1, "m1");
|
||||
let m2 = manager.addModule(M2, "m2", {m1});
|
||||
// manager = new Manager(this);
|
||||
// console.log(manager);
|
||||
|
||||
let manager2 = new Manager(this);
|
||||
let m22 = manager.addModule(M2, "m1", {m1});
|
||||
|
||||
this.setData;
|
||||
// // this.setData;
|
||||
|
||||
Logger.log("课程表 (Timetable) 页面加载...",
|
||||
LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel);
|
||||
// // Logger.log("课程表 (Timetable) 页面加载...",
|
||||
// // LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel);
|
||||
|
||||
let systemInfo = wx.getSystemInfoSync();
|
||||
// // let systemInfo = wx.getSystemInfoSync();
|
||||
|
||||
//状态栏高度
|
||||
let statusBarHeight = Number(systemInfo.statusBarHeight);
|
||||
// // //状态栏高度
|
||||
// // let statusBarHeight = Number(systemInfo.statusBarHeight);
|
||||
|
||||
let menu = wx.getMenuButtonBoundingClientRect()
|
||||
// // let menu = wx.getMenuButtonBoundingClientRect()
|
||||
|
||||
//导航栏高度
|
||||
let navBarHeight = menu.height + (menu.top - statusBarHeight) * 2
|
||||
// // //导航栏高度
|
||||
// // let navBarHeight = menu.height + (menu.top - statusBarHeight) * 2
|
||||
|
||||
//状态栏加导航栏高度
|
||||
let navStatusBarHeight = statusBarHeight + menu.height + (menu.top - statusBarHeight) * 2
|
||||
// // //状态栏加导航栏高度
|
||||
// // let navStatusBarHeight = statusBarHeight + menu.height + (menu.top - statusBarHeight) * 2
|
||||
|
||||
console.log('状态栏高度',statusBarHeight)
|
||||
// // console.log('状态栏高度',statusBarHeight)
|
||||
|
||||
console.log('导航栏高度',navBarHeight)
|
||||
// // console.log('导航栏高度',navBarHeight)
|
||||
|
||||
console.log('状态栏加导航栏高度',navStatusBarHeight)
|
||||
// // console.log('状态栏加导航栏高度',navStatusBarHeight)
|
||||
|
||||
this.setData({barh: navStatusBarHeight});
|
||||
// // this.setData({barh: navStatusBarHeight});
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
// })
|
||||
|
||||
|
||||
Manager.Page((manager)=>{
|
||||
let m1 = manager.addModule(M1, "m1");
|
||||
let m2 = manager.addModule(M2, "m2", {m1});
|
||||
})
|
||||
|
||||
class M1<M extends Manager> extends Modular<M, {}> {
|
||||
|
||||
class M1<M extends Manager> extends Modular<M, {}> implements Partial<ILifetime> {
|
||||
|
||||
data = {
|
||||
a:1,
|
||||
b:{}
|
||||
}
|
||||
|
||||
public onLoad(){
|
||||
|
||||
}
|
||||
|
||||
public onReady() {
|
||||
console.log(this);
|
||||
this.emit("lll", {a:1})
|
||||
}
|
||||
}
|
||||
|
||||
class M2<M extends Manager> extends Modular<M, {m1:M1<M>}> {
|
||||
|
||||
public onLoad() {
|
||||
// this.setData();
|
||||
}
|
||||
// hhh(){
|
||||
|
||||
// }
|
||||
|
||||
hh(){}
|
||||
data = {
|
||||
a: 1
|
||||
}
|
||||
|
||||
public onLoad() {
|
||||
this.setData({a:1});
|
||||
this.depends?.m1.on("lll", (e)=>{
|
||||
console.log(e)
|
||||
})
|
||||
console.log(this);
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
<view class="status-bar" style="height:{{barh}}px"></view>
|
||||
|
||||
<text>pages/Timetable/Timetable.wxml</text>
|
||||
<text>pages/Timetable/Timetable.wxml{{m1$a}}</text>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user