《组合视图模式》｜J2EE企业架构模式

关键词：Composite View、页面组件化、布局模板、页面片段组合
说明：组合视图模式不属于GOF23设计模式，属于J2EE企业架构模式

一、什么是组合视图模式

组合视图模式（Composite View Pattern）：将一个完整页面拆分为多个独立可复用的子视图片段（头部、侧边栏、内容区、底部），通过组合拼装成最终页面。单个子视图可以独立复用，修改子视图不会影响整体页面结构。

注意：虽然名字带Composite，但不是GOF组合模式，只是借鉴了“整体由部分组成”思想。

核心意图
页面组件化，把页面拆分为多个可复用子视图片段，组装生成完整页面，统一管理页面布局。

角色划分

Client（客户端）：浏览器发起请求
Composite View（组合视图）：主视图模板，负责组装多个子视图
View Component（视图组件/子视图）：页面片段，如header、footer、sidebar，可独立渲染

数据流：
Client → CompositeView → 依次渲染多个ViewComponent → 合并输出完整页面

二、UML结构图

角色划分：

Client：请求方
CompositeView：主视图，组装子组件
ViewComponent：子视图组件
ConcreteViewComponent：具体页面片段（Header、Footer等）

三、Java完整示例

模拟页面由头部、内容、底部三个子视图拼接而成，代码全部使用英文。

// View Component
public interface ViewComponent {
    void render();
}

// Concrete View Component
public class HeaderView implements ViewComponent {
    @Override
    public void render() {
        System.out.println("==== Page Header ====");
    }
}

public class ContentView implements ViewComponent {
    private String content;
    public ContentView(String content){
        this.content = content;
    }
    @Override
    public void render() {
        System.out.println("Page Content: " + content);
    }
}

public class FooterView implements ViewComponent {
    @Override
    public void render() {
        System.out.println("==== Page Footer ====");
    }
}

// Composite View
import java.util.ArrayList;
import java.util.List;
public class CompositeView implements ViewComponent {
    private List<ViewComponent> componentList = new ArrayList<>();

    public void addComponent(ViewComponent component){
        componentList.add(component);
    }

    @Override
    public void render() {
        for(ViewComponent component : componentList){
            component.render();
        }
    }
}

// Client
public class Client {
    public static void main(String[] args) {
        CompositeView page = new CompositeView();
        page.addComponent(new HeaderView());
        page.addComponent(new ContentView("Hello Composite View Pattern"));
        page.addComponent(new FooterView());
        page.render();
    }
}

运行输出：

==== Page Header ====
Page Content: Hello Composite View Pattern
==== Page Footer ====

四、组合视图模式 vs GOF组合模式

模式	分类	区别
组合视图模式	J2EE架构模式	Web页面模板拆分，页面片段组装成完整页面
组合模式（Composite）	GOF结构型模式	通用树形对象结构，统一对待叶子对象和容器对象

组合视图内部可以使用GOF组合模式实现，但二者不是同一个东西。

五、优缺点总结

✅ 优点

页面片段复用，头部、底部一次编写，所有页面共用
页面模块化，修改局部片段不改动整体页面
布局统一管控，便于维护网站风格
支持动态组装页面，按需加载子视图

❌ 缺点

多层嵌套页面片段，调试页面渲染链路麻烦
组件之间数据传递容易混乱
嵌套层级过多会降低渲染性能

六、框架应用场景

JSP include 页面片段
Thymeleaf 布局模板、Freemarker宏
Vue/React组件化页面（前端组件化思想同源）
SpringMVC页面布局框架

七、小结

组合视图模式核心：将完整页面拆分为多个独立子视图组件，由组合视图拼装所有片段，生成最终页面，实现页面组件复用。

归属：J2EE架构模式，不属于GOF23。