在Amaple單頁應用中，一個頁面其實存在兩種模塊化單位，分別是

模塊 （am.Module類），它是以web單頁應用跳轉更新為最小單位所拆分的獨立塊；

組件 （am.Component類），它的定位是擁有特定功能的封裝塊，就像由一堆代碼封裝成的具有特定功能的函數一樣，一個組件也有獨立的視圖、狀態數據對象、組件行為以及生命周期。常用的組件有Dialog、Bubble、Navigator和Menubar等。

使用am.class類構造器繼承am.Component類定義一個組件，而繼承am.Component創建的類被稱為 組件衍生類 ，你可以這樣定義一個組件衍生類：

// 在am.class函數的參數中指定該組件衍生類的類名，它返回指定名稱的組件衍生類
// 類名須遵循首字母大寫的駝峰式命名規范，如"BubbleDemo"，否則將會報錯。但接收變量名沒有限制
var BubbleDemo = am.class ( "BubbleDemo" ).extends ( am.Component ) ( {

    // 在init函數返回該組件的狀態數據對象
    init : function () {
        return {
            bubbleText: "this is a component bubble"
        };
    },

    // 組件中必須定義render函數，在該函數中指定組件的template模板和樣式
    render : function () {
        this.template ( "{{ bubbleText }}" )
        .style ( {
            span: { background: "red", fontSize: 20, padding: "10px 16px" }
            // !注意：當元素選擇器為符合變量命名規則時可不用引號，如上面選擇span元素時。當選擇器不符合變量名規則時需使用引號，如：
            // ".class-name": { fontSize: 15 }
            // "span #id": { margin-top: 24 }
        } );
        // this.template ( templateHTML )函數中傳入html字符串來定義該組件的視圖
        // this.style ( styleObj )函數為該組件的視圖定義樣式，這些樣式也只作用于組件視圖
        // 需注意的是該函數傳入一個對象，對象屬性名為css選擇器語法，值為css樣式對象，樣式名也是使用駝峰式表示，樣式值為量值時可直接寫為數字
    }
} );

在一個模塊中使用 組件衍生類 渲染組件視圖也是非常簡單的，首先在am.startRouter函數中配置組件加載的baseURL：

am.startRouter ( {
    baseURL : {
        // ...

        // 為組件文件設置base路徑，所有的組件文件請求路徑都將基于“/component”目錄，不設置時默認“/”
        component: "/component"
    },
    // ...
} );

然后在需要使用的模塊或組件中通過import函數引入，并在