在Amaple單頁應(yīng)用中，一個(gè)頁面其實(shí)存在兩種模塊化單位，分別是

模塊 （am.Module類），它是以web單頁應(yīng)用跳轉(zhuǎn)更新為最小單位所拆分的獨(dú)立塊；

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

使用am.class類構(gòu)造器繼承am.Component類定義一個(gè)組件，而繼承am.Component創(chuàng)建的類被稱為 組件衍生類 ，你可以這樣定義一個(gè)組件衍生類：

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

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

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

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

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

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

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