【Amaple教程】4. 组件

在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函数引入，并在