diff --git a/miniprogram/core/EventEmitter.ts b/miniprogram/core/EventEmitter.ts new file mode 100644 index 0000000..2dc3cd7 --- /dev/null +++ b/miniprogram/core/EventEmitter.ts @@ -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 = (event: T) => void; +export type WildcardHandler> = ( + type: keyof T, + event: T[keyof T] +) => void; + +// An array of all currently registered event handlers for a type +export type EventHandlerList = Array>; +export type WildCardEventHandlerList> = Array>; + +// A map of event types and their corresponding event handlers. +export type EventHandlerMap> = Map< + keyof Events | '*', + EventHandlerList | WildCardEventHandlerList +>; + +export interface Emitter> { + all: EventHandlerMap; + + on(type: Key, handler: Handler): void; + on(type: '*', handler: WildcardHandler): void; + + off(type: Key, handler?: Handler): void; + off(type: '*', handler: WildcardHandler): void; + + emit(type: Key, event: Events[Key]): void; + emit(type: undefined extends Events[Key] ? Key : never): void; +} + +/** + * Mitt: Tiny (~200b) functional event emitter / pubsub. + * @name mitt + * @returns {Mitt} + */ +export default function mitt>( + all?: EventHandlerMap +): Emitter { + type GenericEventHandler = + | Handler + | WildcardHandler; + 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(type: Key, handler: GenericEventHandler) { + const handlers: Array | undefined = all!.get(type); + if (handlers) { + handlers.push(handler); + } + else { + all!.set(type, [handler] as EventHandlerList); + } + }, + + /** + * 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(type: Key, handler?: GenericEventHandler) { + const handlers: Array | 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(type: Key, evt?: Events[Key]) { + let handlers = all!.get(type); + if (handlers) { + (handlers as EventHandlerList) + .slice() + .map((handler) => { + handler(evt!); + }); + } + + handlers = all!.get('*'); + if (handlers) { + (handlers as WildCardEventHandlerList) + .slice() + .map((handler) => { + handler(type, evt!); + }); + } + } + }; +} \ No newline at end of file diff --git a/miniprogram/core/Module.ts b/miniprogram/core/Module.ts index 9f84597..802563f 100644 --- a/miniprogram/core/Module.ts +++ b/miniprogram/core/Module.ts @@ -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> = { * 页面模组 * @template M 所属 Manager * @template DEP 模组依赖 + * @template E 模组事件 * @template TD 模组 Data 类型 */ class Modular< M extends Manager = Manager, DEP extends Depends = Depends, + E extends Record = Record, TD extends IAnyTypeObject = IAnyTypeObject> -implements WXContext { +implements WXContext, Emitter { // [x:string]: any; @@ -87,17 +93,17 @@ implements WXContext { /** * 模组使用的函数列表 */ - private functionList:Set; + public functionList:Set; /** * 函数使用的参数列表 */ - private paramList:Set; + public paramList:Set; /** * 命名空间 */ - private nameSpace:string; + public nameSpace:string; // 映射主上下文属性 public get is():string { return this.context.is }; @@ -125,6 +131,34 @@ implements WXContext { this.functionList = new Set(); this.paramList = new Set(); this.nameSpace = nameSpace; + + this.emitter = mitt(); + + } + + /** + * 内部事件控制器 + */ + private emitter:Emitter; + + public get all():EventHandlerMap { return this.emitter.all }; + + on(type: Key, handler: Handler): void; + on(type: "*", handler: WildcardHandler): void; + on(type: any, handler: any): void { + return this.emitter.on(type, handler); + } + + off(type: Key, handler?: Handler): void; + off(type: "*", handler: WildcardHandler): void; + off(type: any, handler?: any): void { + return this.emitter.off(type, handler); + } + + emit(type: Key, event: E[Key]): void; + emit(type: undefined extends E[Key] ? Key : never): void; + emit(type: any, event?: any): void { + return this.emitter.emit(type, event); } public setData(data:Partial, callback?: () => void):void { @@ -293,40 +327,44 @@ class Manager { * 创建指定生命周期的钩子 * @param key 生命周期键值 */ - public creatHooks(key:keyof ILifetime):ILifetime[keyof ILifetime] { - return (...arg: any[]) => { + public creatHooks(key:keyof ILifetime):(...arg: any[]) => Promise { + return async (...arg: any[]) => { let hooks:Promise[] = []; - let simple:any; for(let i = 0; i < this.modules.length; i++) { - let res: Promise | 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 = 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 { /** * 加载全部的模块 + * @param query onLoad 接收的参数 */ public loadAllModule(query:Record) { + + // 创建全部钩子 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) => void) { + Page({ + async onLoad(query) { + let manager = new Manager(this); + fn(manager); + manager.loadAllModule(query); + } + }) + } + } export { Manager, Modular, AnyWXContext, WXContext, ILifetime} \ No newline at end of file diff --git a/miniprogram/pages/Timetable/Timetable.ts b/miniprogram/pages/Timetable/Timetable.ts index 0cc3a60..d39adb2 100644 --- a/miniprogram/pages/Timetable/Timetable.ts +++ b/miniprogram/pages/Timetable/Timetable.ts @@ -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 extends Modular { + +class M1 extends Modular implements Partial { + + data = { + a:1, + b:{} + } public onLoad(){ } + + public onReady() { + console.log(this); + this.emit("lll", {a:1}) + } } class M2 extends Modular}> { - - 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); + } } \ No newline at end of file diff --git a/miniprogram/pages/Timetable/Timetable.wxml b/miniprogram/pages/Timetable/Timetable.wxml index 4720305..94c4bb7 100644 --- a/miniprogram/pages/Timetable/Timetable.wxml +++ b/miniprogram/pages/Timetable/Timetable.wxml @@ -1,3 +1,3 @@ -pages/Timetable/Timetable.wxml +pages/Timetable/Timetable.wxml{{m1$a}}