摘要：模块更新时部分不需被替换的模块，检测到或参数变化增加移除或修改参数时触发，如所有页面的部分总是不变，此时它将不会被替换。模块函数将在模板指令与状态数据中讲解继续学习下一节教程模板指令与状态数据也可回顾上一节教程启动路由
正如它的名字，模块用于amaplejs单页应用的页面分割，所有的跳转更新和代码编写都是以模块为单位的。
定义一个模块一个模块由
设置模块局部样式hello amaplejs,page index direct to page about
大多数情况下我们可能更希望让一个模块中的css样式只作用当前的html模板，这当然我们也有所考虑，只需在 嵌套模块
当一个页面需设置二级菜单时，我们可能希望在一个模块中嵌套一个模块节点，而这在amaplejs中也是支持的，你只需在一个模块的模板内继续使用:module属性定义模块节点，如：
hello amaplejs,page index
direct to page about
这样就嵌套了一个不具名的模块节点，你可能会问怎么可以定义两个不具名的模块节点呢，这是因为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. 启动路由
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113054.html
摘要：体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架，它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具，但必须掌握和的基础知识。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 体验优先的JavaScript单页框架 Amaple (点此查看Github仓...
摘要：体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架，它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具，但必须掌握和的基础知识。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 体验优先的JavaScript单页框架 Amaple (点此查看Github仓...
摘要：体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架，它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具，但必须掌握和的基础知识。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 体验优先的JavaScript单页框架 Amaple (点此查看Github仓...
摘要：体验优先的单页框架点此查看仓库是专为单页应用而设计的基于页面模块化的框架，它可使开发者快速开发单页应用。使用前置要求此框架的使用者可不需了解构建工具，但必须掌握和的基础知识。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 体验优先的JavaScript单页框架 Amaple (点此查看Github仓...
摘要：开始编写具体的代码前，首先需启动单页模式并进行简单配置。我们在开发包的文件中调用函数并传入一个对象进行启动路由并配置单页应用。继续学习下一节教程模块也可回顾上一节教程前言 开始编写具体的代码前，首先需启动单页模式并进行简单配置。在src/index.html中引入amaple.js框架文件后我们就可以使用am这个全局对象。我们在开发包的src/config.js文件中调用am.star...
摘要：开始编写具体的代码前，首先需启动单页模式并进行简单配置。我们在开发包的文件中调用函数并传入一个对象进行启动路由并配置单页应用。继续学习下一节教程模块也可回顾上一节教程前言 开始编写具体的代码前，首先需启动单页模式并进行简单配置。在src/index.html中引入amaple.js框架文件后我们就可以使用am这个全局对象。我们在开发包的src/config.js文件中调用am.star...
阅读 2474·2021-11-19 09:56
阅读 703·2021-09-24 10:25
阅读 1400·2021-09-09 09:34
阅读 2003·2021-09-09 09:33
阅读 793·2019-08-30 15:54
阅读 430·2019-08-29 18:33
阅读 1142·2019-08-29 17:19
阅读 386·2019-08-29 14:19
