contructor方法

  • 入参：接受config和额外的options和payload参数，不过options和payload参数当前没有用。
  • 将传入的传入的config参数保存到__DSL中，调用 init方法
  • 核心代码

image.png

init方法

核心流程

  • 将__DSL中的数据结构出来，包括models模型机 layers图层 states状态 frames片段
  • 执行reduceToViewMap 方法 处理 layers图层
  • 执行reduceToHookMap方法处理models模型机
  • 执行reduceFrameToNode方法处理frames，并且传入 处理后的layers__layerVos
  • 将state处理成stateVos
  • 使用pinia初始化store仓库

  • 调用state方法，处理状态机（调用hook更新state状态）

    reduceToViewMap方法

  • 参数： layers

  • 核心功能：将数组类型的layers转换成 map类型的layers

入参

  1. layers: [
  2.   {
  3.     key: "LayerReady",
  4.     view: LayerOne,
  5.     data: {
  6.       message: "layer one",
  7.     },
  8.   },
  9.   {
  10.     key: "LayerLoading",
  11.     view: LayerLoad,
  12.     data: {
  13.       message: "layer loading",
  14.       list: async (ctx: any) => {
  15.         return await ctx.model("feed").get("list");
  16.       },
  17.     },
  18.   },
  19.   {
  20.     key: "LayerTwo",
  21.     view: LayerTwo,
  22.     data: {
  23.       message: "layer two",
  24.     },
  25.   },
  26. ],

输入结果：

  1. this.__layerVos = {
  2.   LayerReady: {
  3.     view: LayerOne,
  4.     data: {
  5.       message: "layer one",
  6.     },
  7.   },
  8.   LayerLoading: {
  9.     view: LayerLoad,
  10.     data: {
  11.       message: "layer loading",
  12.       list: async (ctx: any) => {
  13.         return await ctx.model("feed").get("list");
  14.       },
  15.     },
  16.   },
  17.   LayerTwo: {
  18.     view: LayerTwo,
  19.     data: {
  20.       message: "layer two",
  21.     },
  22.   }
  23. }

reduceToHookMap方法

  • 和reduceToViewMap方法类似
  • 作用：将数组格式的models转换成 对象形式的 models

输入

  1. models: [
  2.   {
  3.     key: "user",
  4.     hook: new UserModel(),
  5.   },
  6. ],

输出

  1. this.__modelVos = {
  2.   user: new UserModel()
  3. }

reduceFrameToNode方法

将frams和layers结合，处理成更容易渲染的数据结构

输入：

  1. frames: [
  2.   {
  3.     // 第一部分
  4.     key: "head",
  5.     blocks: [
  6.       {
  7.         // 状态 映射
  8.         state: "root",
  9.         stateMaps: [
  10.           {
  11.             value: "READY",
  12.             layer: "LayerReady",
  13.           },
  14.           {
  15.             value: "LOADING",
  16.             layer: "LayerLoading",
  17.           },
  18.         ],
  19.       },
  20.     ],
  21.   },
  22.   {
  23.     // 第二部分
  24.     key: "foot",
  25.     blocks: [
  26.       {
  27.         // 状态 映射
  28.         state: "foot",
  29.         stateMaps: [
  30.           {
  31.             value: "READY",
  32.             layer: "LayerTwo",
  33.           },
  34.         ],
  35.       },
  36.     ],
  37.   },
  38. ],
  41. this.__layerVos = {
  42.   LayerReady: {
  43.     view: LayerOne,
  44.     data: {
  45.       message: "layer one",
  46.     },
  47.   },
  48.   LayerLoading: {
  49.     view: LayerLoad,
  50.     data: {
  51.       message: "layer loading",
  52.       list: async (ctx: any) => {
  53.         return await ctx.model("feed").get("list");
  54.       },
  55.     },
  56.   },
  57.   LayerTwo: {
  58.     view: LayerTwo,
  59.     data: {
  60.       message: "layer two",
  61.     },
  62.   }
  63. }

输出

  1. this.__nodes = [
  2.   {
  3.     state: 'root',
  4.     stateMaps: {
  5.       LOADING: {
  6.         view: LayerLoad,
  7.         data: {
  8.           message: "layer loading",
  9.           list: async (ctx: any) => {
  10.             return await ctx.model("feed").get("list");
  11.           },
  12.         },
  13.         path: "0/root/LOADING"
  14.       },
  15.       READY: {
  16.         view: LayerOne,
  17.         data: {
  18.           message: "layer one",
  19.         },
  20.         path: "0/root/READY"
  21.       }
  22.     }
  23.   },
  24.   {
  25.     state: 'foot',
  26.     stateMapVos: {
  27.       READY: {
  28.         view: LayerTwo,
  29.         data: {
  30.           message: "layer two",
  31.         },
  32.         path: "1/foot/READY"
  33.       }
  34.     }
  35.   }
  36. ]

这么做的优点：将所有的frames和图层结合到一起，得到了frams中需要渲染的所有图层以及数据。接下来就需要处理如何渲染这些frames。

stateVos处理

将传入的state进行处理
输入

  1. states: [
  2.   {
  3.     key: "root",
  4.     value: "LOADING",
  5.     hook: async (ctx: any) => {
  6.       await wait(500);
  7.       return "READY";
  8.     },
  9.   },
  10.   {
  11.     key: "foot",
  12.     value: "",
  13.     hook: async (ctx: any) => {
  14.       return "READY";
  15.     },
  16.   },
  17. ],

输出

  1. const stateVos = {
  2.   foot: '' || 'Default',
  3.   root: 'LOADING'
  4. }

问题： hook貌似丢了，不过在状态机处理中（state方法）中调用了hooks

store处理

基于pinia定义了一个machine的store，保存了 stateVos 和 dataVos以及更新时间。提供了更新的actions
image.png
问题：多个组件，多次实例化store的话，id是不是可能会冲突

状态机处理

在init方法最后调用了 state方法
image.png
state方法的逻辑

  • 遍历config中传入的state数组
  • 如果state中有hooks，执行hooks用于修改状态，并且注入了ctx，通过ctx可以获取到model，可以调用model中的属性和方法，
  • 获取到数据之后，更新到store中。

理解；将来可以在state的hooks中可以写如下的代码

  1. {
  2.       key: "root",
  3.       value: "LOADING",
  4.       hook: async (ctx: any) => {
  5.         await wait(500);
  6.         // 类似
  7.         const res = await ctx.model('user').login()
  9.         return "READY";
  10.       },
  11.     },

问题： 返回值是用于控制组件的渲染还是说用于图层内部的渲染

update方法

暂时没有实现

invoke方法

暂时没有实现