RegularJS - 组件组合实例详解

提示：阅读本文需配合Regularjs官方文档，一起食用味道更佳哦！

组件是什么？组件的定义为：

在用户端开发领域，组件应该是一种独立的、可复用的交互元素的封装。

RegularJS的组件满足以下等式：

组件 = 模板 + 数据 + 业务逻辑

如果说组件是Regular的灵魂，那么组合是Regular灵魂的核心。那么组合到底是什么？

简单来说，组合的实质就是让组件在即使在与其他组件嵌套使用时仍保持对自身元素的控制。我们需要知道的是如何保持控制，接下来以简单的插线板DEMO为例，深入理解组件组合的概念。

本文涉及两个概念：
- 引入声明，即{#include}
- 内嵌内容，即this.$body

下面以上面链接中的DEMO代码为例理解这两个概念的使用。

先大致说一下插线板DEMO的设计思路：以日常使用的插线板为例，插线板有一个面板、一个开关和若干个插孔，我们把面板（panel组件）、开关（on_off组件）和插孔（jack组件）分别看做独立的组件，然后插线板就是将这些小组件组合在一起使用的主程序（container）。面板（panel组件）负责把各组件集成在自身，插孔（jack组件）由主程序（container）根据开关（on_off组件）状态控制是否通电：当开关处于开启状态时，各插孔通电；当面板开关处于关闭状态时，各插孔断电。

将代码模板抽象出来如下：

<!-- 插孔模板 -->
<script type="template/regular" id="jack">
    <div class="u-panel1">
        <p class="u-panel1-title">插孔</p>
        <p class="u-jack-panel">
            <span class="u-jack-top">||</span>
            <span class="u-jack-left">\\</span>
            <span class="u-jack-right">//</span>
        </p>
    </div>