网页应用组件化：从网页到Mashup组件的转变

### 网页应用组件化：从网页到Mashup组件的转变 在当今的Web开发领域，将网页应用转化为Mashup组件是一项具有重要意义的技术。它不仅可以提高应用的复用性和集成性，还能为开发者提供更加灵活和高效的开发方式。下面我们就来详细探讨网页应用组件化的相关技术。 #### 1. 网页应用的结构与组件化需求 网页应用通常具有特定的结构，以策略浏览器应用为例，用户可以在目标页面查看策略列表，点击列表中的策略可进入策略详情页面，查看该策略的数据和相关规则。同时，还能通过链接查看与该策略相关的流程摘要，选择流程后又能查看流程详情以及与之相关的策略。这种WebML超文本架构描述了应用在用户视角下的结构，但为了实现组件化，需要提供一个编程接口（API），以便Mashup应用能够以编程方式与之交互。 #### 2. Mashart描述语言（MDL） 为了实例化组件模型，我们使用MDL，这是一种抽象且与技术无关的UI组件描述语言，类似于Web服务的WSDL。对于想要进行组件化的应用，MDL允许我们定义新组件，描述组件的事件、操作、数据类型和构造函数。 以策略组件为例，当用户从目标页面的策略单元中选择一个策略时，会触发`PolicySelected`事件，该事件携带策略名称作为参数。这个事件用于在最终的BCM Mashup中同步其他组件的状态，确保所有组件显示相关数据。 策略组件还暴露了两个操作： - `ShowProcess`：将需要显示的流程名称设置为参数`proc`的值，其效果是计算并渲染`PoliciesByProcess`页面，显示所选流程及其相关策略的数据。 - `ShowPolicy`：设置需要显示的策略名称，计算并渲染`Policy details`页面，显示指定策略的数据。 MDL描述符可以完整地指定组件的外部行为，例如通过特定的URL来调用操作。但仅靠描述符还无法实现对低级事件的拦截和转换，因此需要引入mashArt事件注解（MEA）技术。 #### 3. mashArt事件注解（MEA） 组件的操作可以从外部触发，而事件则需要响应内部状态变化而触发。组件事件的生成与用户交互紧密相关，因此需要将低级UI事件映射到组件事件，过滤出能触发组件事件的低级事件。 MEA微格式通过三个简单的注解（以属性形式添加到HTML元素上）来实现这种映射，具体如下表所示： | 属性 | 用途和描述 | | ---- | ---- | | event name | 定义组件事件并将其绑定到HTML元素。例如，`<A href=”...” event name=”PolicySelected”> Privacy Policy </A>`指定了一个HTML链接，点击该链接可能会触发`PolicySelected`事件。 | | event binding | 将组件事件绑定到JavaScript事件。例如，`<A href=”...” event name=”PolicySelected” event binding=”onClick”> Privacy Policy </A>`将`PolicySelected`事件显式绑定到点击事件。如果未指定绑定，则默认使用JS点击事件。 | | event par | 指定事件参数。例如，`<A href=”...” event name=”PolicySelected” event binding=”onClick” event par=”policy=PrivacyPolicy”> Privacy Policy </A>`指定了`PolicySelected`事件的参数。 | 对于不源于用户交互的组件事件（如基于定时器或异步AJAX事件），可以通过隐藏的HTML元素来设置。在需要触发组件事件时，模拟必要的低级JS事件即可。 #### 4. 运行时组件化逻辑 当我们有了应用的MDL描述符并对应用进行了相应的注解后，就可以对应用进行组件化（包装）。通常，组件化的结果是一个JavaScript对象/函数，它提供了对应用的编程访问接口（API）。 组件化过程分为启动阶段和事件解释阶段： - **启动阶段**：执行框架（Mashup应用或Mashup平台）通过传递HTML DIV元素的标识符和组件的MDL描述符来实例化包装器。包装器将应用加载到DIV中，并应用组件的CSS规则。 - **事件解释阶段**：用户或组件的内部逻辑触发低级