@netty0911/tiny-module-controller v1.1.4

如何使用

在 script 标签引入 tmc.min.js

<script type="text/javascript" src="/tmc.min.js"></script>

注：tmc.min.js 在 @netty0911/ting-module-controller 中 dist 获取

npm install @netty0911/ting-module-controller

TMC 设计

名词解释

业务 (product)

指产品业务, 产品业务对应一级路由, 一般产品业务包含多个模块;

每个产品业务都有依赖的资源, 可以在业务配置中进行配置;

模块 (module)

指业务模块, 业务模块对应二级路由, 每个模块都有如下属性：

• moduleId: 模块 id
• title: 模块标题
• status: 活跃状态
• render: 模块渲染方法
• destroy: 模块销毁方法

注: 属性status 由 tmc 内部维护, 其他属性由模块自行实现, 并通过 tmc.register() 注册到模块字典

内部属性和方法

log

打印日志, 在开发模式下, TMC 的内部方法被调用时, 会在控制台输出日志:

getEnv

获取当前运行环境

enter

进入开发模式

exit

退出开发模式

resourceSet

资源集合, 用于存放已经加载的资源 url, 避免模块切换时重复加载资源

renderCallbackMap

渲染回调字典, 用于存放 render 方法的 callback, 因为这些回调方法可能不是立即执行的，需要暂存在这里用于将来执行

moduleMap

模块字典, 用于存放 moduleConfig

load

资源加载, 用于加载业务依赖资源

register

模块注册, 该方法会将 moduleId 和 config 添加到 moduleMap

• 该方法定义为 window.tmc.register() 提供给外部调用;
• 我们在 tiny-app 中提供了通用注册方法 app.routes(), 它在内部定义了模块的 title、render、destroy 属性, 并调用了 window.tmc.register();
• 我们在子业务入口文件中, 直接引用 tiny-app 并调用 app.routes() 方法进行模块注册;

render

模块渲染, 该方法会使用 moduleId 在 moduleMap 中查询对应的模块信息, 并调用模块内部的 render() 方法

destroy

模块销毁, 该方法会使用 moduleId 在 moduleMap 中查询对应的模块信息, 并调用模块内部的 destroy() 方法

moduleRender

模块渲染, 组合了 render 和 destroy 方法, 通过 tmc.render 给外部使用;

• 检查 activeModule 的值, 如果值有效则说明当前已经有模块呈现, 我们需要调用内部方法 destroy() 销毁旧的模块
• 调用了内部方法 render() 并更新 activeModule 的值;

对外提供的数据和方法

tmc.environment

当前运行环境

tmc.load

资源加载, 一般在一级路由被命中时调用, 传递 productKey 给 tmc.load()

tmc.register

模块注册, 一般在业务项目中被调用

tmc.render

模块渲染, 一般在二级路由被命中时调用, 传递 moduleId 给 tmc.render()

注: moduleId 是一个结构为 [controller]-[action] 的字符串