資訊專欄INFORMATION COLUMN
摘要：模塊更新時(shí)部分不需被替換的模塊，檢測(cè)到或參數(shù)變化增加移除或修改參數(shù)時(shí)觸發(fā)，如所有頁面的部分總是不變，此時(shí)它將不會(huì)被替換。模塊函數(shù)將在模板指令與狀態(tài)數(shù)據(jù)中講解繼續(xù)學(xué)習(xí)下一節(jié)教程模板指令與狀態(tài)數(shù)據(jù)也可回顧上一節(jié)教程啟動(dòng)路由
正如它的名字，模塊用于amaplejs單頁應(yīng)用的頁面分割，所有的跳轉(zhuǎn)更新和代碼編寫都是以模塊為單位的。
定義一個(gè)模塊一個(gè)模塊由
設(shè)置模塊局部樣式hello amaplejs,page index direct to page about
大多數(shù)情況下我們可能更希望讓一個(gè)模塊中的css樣式只作用當(dāng)前的html模板，這當(dāng)然我們也有所考慮，只需在 嵌套模塊
當(dāng)一個(gè)頁面需設(shè)置二級(jí)菜單時(shí)，我們可能希望在一個(gè)模塊中嵌套一個(gè)模塊節(jié)點(diǎn)，而這在amaplejs中也是支持的，你只需在一個(gè)模塊的模板內(nèi)繼續(xù)使用:module屬性定義模塊節(jié)點(diǎn)，如：
hello amaplejs,page index
direct to page about
這樣就嵌套了一個(gè)不具名的模塊節(jié)點(diǎn)，你可能會(huì)問怎么可以定義兩個(gè)不具名的模塊節(jié)點(diǎn)呢，這是因?yàn)閍maplejs可支持你設(shè)置無限層級(jí)的嵌套模塊，就像html的元素嵌套一樣，并且不同層級(jí)模塊節(jié)點(diǎn)的命名空間（namespace）是相互獨(dú)立的，但相同層級(jí)只能有一個(gè)不具名的模塊節(jié)點(diǎn)，且不能出現(xiàn)名稱相同的模塊節(jié)點(diǎn)（其實(shí)不具名的模塊節(jié)點(diǎn)的名稱默認(rèn)是“default”）。
【對(duì)模塊層級(jí)的理解】模塊層級(jí)與dom元素層級(jí)無關(guān)，需以模塊為單位節(jié)點(diǎn)作為層級(jí)參考標(biāo)準(zhǔn)，不同模塊內(nèi)定義的嵌套模塊為不同層級(jí)，而同一個(gè)模塊內(nèi)定義的嵌套模塊不論位置如何都屬于同一層級(jí)。# 配置子路由
定義嵌套模塊節(jié)點(diǎn)后，我們也需為它配置路由映射，指定嵌套模塊節(jié)點(diǎn)在不同url下應(yīng)該匹配哪些模塊：
am.startRouter( {
routes : function ( router ) {
// 使用route函數(shù)的第三個(gè)參數(shù)設(shè)置嵌套模塊節(jié)點(diǎn)的路由映射
router.module ().route ( "/", "module/index", function ( childRouter ) {
// 此回調(diào)函數(shù)將接收一個(gè)childRouter參數(shù)
// 不同層的命名空間是獨(dú)立的，所以調(diào)用router.module函數(shù)指定的是嵌套層的模塊節(jié)點(diǎn)
childRouter.module ().route ( "subpage", "module/index/sub_page" );
// 它將首先匹配“/”，然后繼續(xù)匹配嵌套模塊“subpage”
} )
.route ( "/about", "module/about" );
},
// ...
} );
父子模塊之間的通信
嵌套模塊節(jié)點(diǎn)與上一層模塊節(jié)點(diǎn)的關(guān)系為父子模塊，它們經(jīng)常需要進(jìn)行通信，如父模塊下發(fā)數(shù)據(jù)到子模塊中，或父模塊訪問子模塊的數(shù)據(jù)，此時(shí)你可以這樣做：
// 在子模塊中通過parent屬性來獲取父模塊對(duì)象
new am.Module ( {
init : function () {
// this.parent為父模塊對(duì)象，當(dāng)一個(gè)模塊為最頂層模塊時(shí)，它的parent屬性將為null
return {
btnText : this.parent.state.text
};
}
// ...
} );
在父模塊中不能直接訪問到子模塊對(duì)象，但可通過子模塊主動(dòng)傳值的方式讓父模塊獲取到子模塊的數(shù)據(jù)，就像我們的代碼作用域，外層作用域不能直接獲取內(nèi)層作用域的值，但可通過內(nèi)層作用域?yàn)橥鈱幼饔糜虻淖兞抠x值來訪問。在子模塊中通過parent屬性來獲取父模塊對(duì)象，然后調(diào)用父模塊中定義的模塊函數(shù)并傳入相應(yīng)的值即可主動(dòng)傳值到父模塊了。
模塊函數(shù)將在《模板指令與狀態(tài)數(shù)據(jù)》中講解
繼續(xù)學(xué)習(xí)下一節(jié)：【AmapleJS教程】3. 模板指令與狀態(tài)數(shù)據(jù)（state）
也可回顧上一節(jié)：【AmapleJS教程】1. 啟動(dòng)路由
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113054.html
摘要：體驗(yàn)優(yōu)先的單頁框架點(diǎn)此查看倉庫是專為單頁應(yīng)用而設(shè)計(jì)的基于頁面模塊化的框架，它可使開發(fā)者快速開發(fā)單頁應(yīng)用。使用前置要求此框架的使用者可不需了解構(gòu)建工具，但必須掌握和的基礎(chǔ)知識(shí)。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗(yàn)優(yōu)先的JavaScript單頁框架 Amaple (點(diǎn)此查看Github倉...
摘要：體驗(yàn)優(yōu)先的單頁框架點(diǎn)此查看倉庫是專為單頁應(yīng)用而設(shè)計(jì)的基于頁面模塊化的框架，它可使開發(fā)者快速開發(fā)單頁應(yīng)用。使用前置要求此框架的使用者可不需了解構(gòu)建工具，但必須掌握和的基礎(chǔ)知識(shí)。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗(yàn)優(yōu)先的JavaScript單頁框架 Amaple (點(diǎn)此查看Github倉...
摘要：體驗(yàn)優(yōu)先的單頁框架點(diǎn)此查看倉庫是專為單頁應(yīng)用而設(shè)計(jì)的基于頁面模塊化的框架，它可使開發(fā)者快速開發(fā)單頁應(yīng)用。使用前置要求此框架的使用者可不需了解構(gòu)建工具，但必須掌握和的基礎(chǔ)知識(shí)。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗(yàn)優(yōu)先的JavaScript單頁框架 Amaple (點(diǎn)此查看Github倉...
摘要：開始編寫具體的代碼前，首先需啟動(dòng)單頁模式并進(jìn)行簡(jiǎn)單配置。我們?cè)陂_發(fā)包的文件中調(diào)用函數(shù)并傳入一個(gè)對(duì)象進(jìn)行啟動(dòng)路由并配置單頁應(yīng)用。繼續(xù)學(xué)習(xí)下一節(jié)教程模塊也可回顧上一節(jié)教程前言 開始編寫具體的代碼前，首先需啟動(dòng)單頁模式并進(jìn)行簡(jiǎn)單配置。在src/index.html中引入amaple.js框架文件后我們就可以使用am這個(gè)全局對(duì)象。我們?cè)陂_發(fā)包的src/config.js文件中調(diào)用am.star...
閱讀 2633·2021-11-19 09:56
閱讀 886·2021-09-24 10:25
閱讀 1653·2021-09-09 09:34
閱讀 2211·2021-09-09 09:33
閱讀 1066·2019-08-30 15:54
閱讀 552·2019-08-29 18:33
閱讀 1278·2019-08-29 17:19
閱讀 516·2019-08-29 14:19
