构建高可伸缩性的WEB交互式系统（中）.pdf

构建⾼可伸缩性的WEB交互式系统（中） 作者蔡剑⻜发布于 2014年9⽉17⽇| 讨论 在 《构建⾼可伸缩性的WEB交互式系统》的第⼀篇，我们介绍了Web交互式系统中平台的可伸缩性。本⽂将 描述模块的可伸缩性。 模块的可伸缩性 WEB交互式系统对模块的可伸缩性同样表现为： 可扩展性：对于系统新增的功能需求能够快速响应⽀持 可缩减性：对于系统退化的模块能够以最⼩的修改⽅式剔除 这⾥我们提供⼀套模块调度的系统架构模式，⽤于⽀持单⻚富应⽤系统的设计架构、模块拆分、模块重组、调 度管理等功能。 我们定义的模块是指：从系统中拆分出来的、可与⽤户进⾏交互完成⼀部分完整功能的独⽴单元。 因为这⾥描述的模块可独⽴与⽤户完成交互功能，因此模块会包含以下元素： 样式：定义模块的效果 结构：定义模块的结构 逻辑：实现模块的功能 以上元素对于⼀个WEB系统开发者来说并不陌⽣，⽽我们只需要寻求⼀种形式将这些内容封装起来即可。 从模块的组成我们可以看到系统中分离出来的模块可能会⻓成这个样⼦，⽐如module.html就是我们分离出来 的⼀个模块。 当然这⾥也可以⽤脚本⽂件封装，样式和结构采⽤注⼊形式。下⾯以html⽂件封装举例： !-- 模块样式 -- style .m-mdl-1 .a{color:#aaa;} .m-mdl-1 .b{color:#bbb;} /* 此处省略若干内容 */ /style !-- 模块结构 -- div class=m-mdl-1 p class=aaaaaaaaaaaaaaaaaaaa/p p class=bbbbbbbbbbbbbbbbbbbb/p !-- 此处省略若干内容 -- /div !-- 模块逻辑 -- script (function(){ var a = aaa; var b = bbb; // 此处省略若干内容 })(); /script 这个模块在⽤户需要时加载到客户端，并展现出来跟⽤户进⾏交互，完成功能。但是我们会发现，如果系统预 加载了此模块或者模块在parse时，这些内容会被直接执⾏，⽽这个结果并不是我们需要的，因此我们需要将 模块的各元素⽂本化处理。⽂本化处理有多种⽅式，如作为⽂本script、textarea等标签内容，因此 module.html⾥的模块我们可以封装成如下样⼦，以textarea举例： !-- 模块样式 -- textarea name=css .m-mdl-1 .a{color:#aaa;} .m-mdl-1 .b{color:#bbb;} /* 此处省略若干内容 */ /textarea !-- 模块结构 -- textarea name=html div class=m-mdl-1 p class=aaaaaaaaaaaaaaaaaaaa/p p class=bbbbbbbbbbbbbbbbbbbb/p !-- 此处省略若干内容 -- /div /textarea !-- 模块逻辑 -- textarea name=js (function(){ var a = aaa; var b = bbb; // 此处省略若干内容 })(); /textarea 从系统中拆分出来的模块之间是存在有⼀定关系的，如⼀个模块的呈现必须依赖另外⼀个模块的呈现。下⾯我 们会以⼀个简单的例⼦来讲解模块之间的依赖管理，如下图是我们的⼀个单⻚应⽤系统： 从上图不难看出整个系统包含以下⼏部分内容： ⽇志：⽇志列表，可切换收件箱/草稿箱/ 回收站/标签 标签：标签列表，可转⾄⽇志按标签查看列表 基本资料：⽤户基本资料设置表单 个⼈经历：个⼈经历填写表单 权限设置：权限设置表单 ⽽这些模块之间的层级关系则如下所⽰： 针对交互式系统的这种层级架构典型的模式可以参阅： 然⽽在WEB交互式系统的实践过程中我们发现这种模式会存在⼀些缺陷： 由于每个⽗模块⾃⼰维护了所有的⼦模块，因此⽗⼦模块之间耦合性过强，⽗模块必须耦合所有⼦模块 由于模块之间不能直接越级调⽤，因此⼦模块需要其他模块协助时必须层层向上传递事件，如果层级过深 则会影响到系统效率 模块的增删等变化导致的变更涉及的影响较⼤，删除中间节点上的模块可能导致相邻的若干模块的变更