【Amaple教程】2. 模块

正如它的名字，模块用于amaplejs单页应用的页面分割，全部的跳转更新和代码编写都是以模块为单位的。

定义一个模块

一个模块由<module>标签对包含，内部分为template模板、JavaScript和css三部分，像这样：

<module>
    <template>
        <!-- 编写模块的html模板 -->
        <span>hello amaplejs,page index</span>
        <a href="/about?from=index">direct to page about</a>
    </template>

    <script>
     
        // 编写模块JavaScript代码
        // 在一个模块的JavaScript中，am为自动注入对象，你不需引入它，即便是在webpack环境下
        // 这里一般使用new am.Module()建立一个amaple模块对象，它将会在构造函数中处理模板内容和模板样式等一系列的初始化工做
        new am.Module ();
    </script>

    <style scoped>
        /* 编写模块样式 */
        span { font-size: 20px; }
    </style>
</module>

设置模块局部样式

大多数状况下咱们可能更但愿让一个模块中的css样式只做用当前的html模板，这固然咱们也有所考虑，只需在<style>中添加scoped属性就会自动限制它的做用范围了，就是如此简单。但若是<style>不带scoped属性时将不会只做用到当前的html模板内。

模块生命周期

当咱们在编写一个模块的JavaScript时一般使用am.Module类建立一个amaple模块对象，它将会在构造函数中进行一系列的初始化工做，而一个模块的生命周期函数将会在初始化的不一样阶段，或模块数据改变时自动触发，它们共分为5个阶段，具体以下：

• init：模块初始化时触发，它将要求你在定义时返回<template>模板中所使用的状态数据

关于状态数据的内容将在“模板指令与状态数据（state）”中讲解

• mounted：解析模板并挂载状态数据时触发，你能够在这里处理一些模块的后续操做，如为此模块请求网络数据并更新到模板中等。
• queryUpdated：模块更新时部分不需被替换的模块，检测到GET或POST参数变化（增长、移除或修改参数）时触发，如全部页面的header部分老是不变，此时它将不会被替换。
• paramUpdated：模块更新时部分不需被替换的模块，检测到param参数变化（增长、移除或修改参数）时触发，只有设置了路由通配符的模块才有param参数。

关于路由通配符的内容咱们将会在《路由配置》中详细讲解

• unmount：在更新模块时被替换的模块将会触发。

你能够这样设置一个模块的生命周期函数：

<template>...</template>
<script>
    new am.Module ( {
        init : function () {
          
        // 返回一个包含状态数据的对象，这些状态数据做用是解析挂载模板
        return {};
    },
    mounted : function () {},
    queryUpdated : function () {},
    paramUpdated : function () {},
    unmount : function () {}
} );
</script>

【注意】生命周期函数内的 this指向 am.Module对象，若是它们使用ES6的箭头函数（Arrow function）会致使函数内 this指针指向不正确而出错。

模块跳转与表单提交

和普通页面同样，模块跳转与表单提交都会改变url，在host与port都相同的状况下都会触发模块更新，不然将进行页面刷新的普通跳转。模块匹配及更新看以下图解：

# 模块跳转

在普通页面的跳转中，咱们使用<a>标签设置href属性进行跳转，在amaplejs中也是如此，但不一样的是，全部dom元素上设置了href属性后，点击均可以触发模块更新，而且当href后带有get参数时将会解析成键值对保存在am.Module对象内：

<a href="/about?from=index">direct to page about</a>

点击此按钮跳转将会匹配到/module/about.html模块，而且about模块对象内的get参数值为{from: "index"}。

// about模块内可以使用this.get对象的属性值
new am.Module ( {
    init : function () {
        return {
            from: this.get.from
        };
    }
} );

# 表单提交

amaplejs的表单提交与普通页面的表单提交写法也相同，在<form>内编写表单元素并设置action属性，它指定表单提交路的路径：

<template>
    <form action="account/register">
        <input type="text" name="username" value="jim" />
        <input type="password" name="pwd" value="jim001" />
        <input type="text" value="10" />
    </form>
    ...
</template>

提交表单到account/register后，服务端需返回一个路径字符串，来告诉框架表单提交后跳转的路径，它可能像这样：

<?php
    // 表单数据的处理
    // ...

    echo "/submit/success";
?>

表单提交后将会使用服务端返回的/submit/success路径进行模块的更新跳转，这样就完成了一个表单提交，此时/submit/success路径所匹配的模块中会自动生成post参数对象{ username: "jim" }(表单元素设置了name属性，且type不为password的值才会在this.post中建立)：

new am.Module ( {
    init : function () {
        return {
            this.username : this.post.username
        };
    }
    // ...
} );

为了实现多个模块间的跳转，你能够继续建立一个 module/about.html模块文件，内容与 index.html几乎相同，像这样：

<module>
    <template>
        <span>hello amaplejs,page about</span>
        <a href="/index?from=about">direct to page index</a>
    </template>

    <script>
        new am.Module ();
    </script>

    <style scoped>
        span { font-size: 20px; }
    </style>
</module>

嵌套模块

当一个页面需设置二级菜单时，咱们可能但愿在一个模块中嵌套一个模块节点，而这在amaplejs中也是支持的，你只需在一个模块的<template>模板内继续使用:module属性定义模块节点，如：

<template>
    <span>hello amaplejs,page index</span>
    <a href="/about?from=index">direct to page about</a>
    <div :module></div>
</template>

这样就嵌套了一个不具名的模块节点，你可能会问怎么能够定义两个不具名的模块节点呢，这是由于amaplejs可支持你设置无限层级的嵌套模块，就像html的元素嵌套同样，而且不一样层级模块节点的命名空间（namespace）是相互独立的，但相同层级只能有一个不具名的模块节点，且不能出现名称相同的模块节点（其实不具名的模块节点的名称默认是“default”）。

【对模块层级的理解】模块层级与dom元素层级无关，需以模块为单位节点做为层级参考标准，不一样模块内定义的嵌套模块为不一样层级，而同一个模块内定义的嵌套模块不论位置如何都属于同一层级。

# 配置子路由

定义嵌套模块节点后，咱们也需为它配置路由映射，指定嵌套模块节点在不一样url下应该匹配哪些模块：

am.startRouter( {
    routes : function ( router ) {

        // 使用route函数的第三个参数设置嵌套模块节点的路由映射
        router.module ().route ( "/", "module/index", function ( childRouter ) {

            // 此回调函数将接收一个childRouter参数
            // 不一样层的命名空间是独立的，因此调用router.module函数指定的是嵌套层的模块节点
            childRouter.module ().route ( "subpage", "module/index/sub_page" );
            // 它将首先匹配“/”，而后继续匹配嵌套模块“subpage”
        } )
        .route ( "/about", "module/about" );
    },
    // ...
} );

父子模块之间的通讯

嵌套模块节点与上一层模块节点的关系为父子模块，它们常常须要进行通讯，如父模块下发数据到子模块中，或父模块访问子模块的数据，此时你能够这样作：

// 在子模块中经过parent属性来获取父模块对象
new am.Module ( {
    init : function () {
    
        // this.parent为父模块对象，当一个模块为最顶层模块时，它的parent属性将为null
        return {
            btnText : this.parent.state.text
        };
    }
    // ...
} );

在父模块中不能直接访问到子模块对象，但可经过子模块主动传值的方式让父模块获取到子模块的数据，就像咱们的代码做用域，外层做用域不能直接获取内层做用域的值，但可经过内层做用域为外层做用域的变量赋值来访问。在子模块中经过parent属性来获取父模块对象，而后调用父模块中定义的模块函数并传入相应的值便可主动传值到父模块了。

模块函数将在《模板指令与状态数据》中讲解

继续学习下一节：【AmapleJS教程】3. 模板指令与状态数据（state）
也可回顾上一节：【AmapleJS教程】1. 启动路由