摘要:模塊更新時(shí)部分不需被替換的模塊,檢測到或參數(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)然我們也有所考慮,只需在中添加scoped屬性就會(huì)自動(dòng)限制它的作用范圍了,就是如此簡單。但如果不帶scoped屬性時(shí)將不會(huì)只作用到當(dāng)前的html模板內(nèi)。
模塊生命周期當(dāng)我們在編寫一個(gè)模塊的JavaScript時(shí)通常使用am.Module類創(chuàng)建一個(gè)amaple模塊對(duì)象,它將會(huì)在構(gòu)造函數(shù)中進(jìn)行一系列的初始化工作,而一個(gè)模塊的生命周期函數(shù)將會(huì)在初始化的不同階段,或模塊數(shù)據(jù)改變時(shí)自動(dòng)觸發(fā),它們共分為5個(gè)階段,具體如下:
init:模塊初始化時(shí)觸發(fā),它將要求你在定義時(shí)返回模板中所使用的狀態(tài)數(shù)據(jù)
關(guān)于狀態(tài)數(shù)據(jù)的內(nèi)容將在“模板指令與狀態(tài)數(shù)據(jù)(state)”中講解
mounted:解析模板并掛載狀態(tài)數(shù)據(jù)時(shí)觸發(fā),你可以在這里處理一些模塊的后續(xù)操作,如為此模塊請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)并更新到模板中等。
queryUpdated:模塊更新時(shí)部分不需被替換的模塊,檢測到GET或POST參數(shù)變化(增加、移除或修改參數(shù))時(shí)觸發(fā),如所有頁面的header部分總是不變,此時(shí)它將不會(huì)被替換。
paramUpdated:模塊更新時(shí)部分不需被替換的模塊,檢測到param參數(shù)變化(增加、移除或修改參數(shù))時(shí)觸發(fā),只有設(shè)置了路由通配符的模塊才有param參數(shù)。
關(guān)于路由通配符的內(nèi)容我們將會(huì)在《路由配置》中詳細(xì)講解
unmount:在更新模塊時(shí)被替換的模塊將會(huì)觸發(fā)。
你可以這樣設(shè)置一個(gè)模塊的生命周期函數(shù):
...
【注意】生命周期函數(shù)內(nèi)的this指向am.Module對(duì)象,如果它們使用ES6的箭頭函數(shù)(Arrow function)會(huì)導(dǎo)致函數(shù)內(nèi)this指針指向不正確而出錯(cuò)。模塊跳轉(zhuǎn)與表單提交
和普通頁面一樣,模塊跳轉(zhuǎn)與表單提交都會(huì)改變url,在host與port都相同的情況下都會(huì)觸發(fā)模塊更新,否則將進(jìn)行頁面刷新的普通跳轉(zhuǎn)。模塊匹配及更新看如下圖解:
在普通頁面的跳轉(zhuǎn)中,我們使用標(biāo)簽設(shè)置href屬性進(jìn)行跳轉(zhuǎn),在amaplejs中也是如此,但不同的是,所有dom元素上設(shè)置了href屬性后,點(diǎn)擊都可以觸發(fā)模塊更新,并且當(dāng)href后帶有get參數(shù)時(shí)將會(huì)解析成鍵值對(duì)保存在am.Module對(duì)象內(nèi):
direct to page about
點(diǎn)擊此按鈕跳轉(zhuǎn)將會(huì)匹配到/module/about.html模塊,并且about模塊對(duì)象內(nèi)的get參數(shù)值為{from: "index"}。
// about模塊內(nèi)可使用this.get對(duì)象的屬性值 new am.Module ( { init : function () { return { from: this.get.from }; } } );# 表單提交
amaplejs的表單提交與普通頁面的表單提交寫法也相同,在內(nèi)編寫表單元素并設(shè)置action屬性,它指定表單提交路的路徑:
...
提交表單到account/register后,服務(wù)端需返回一個(gè)路徑字符串,來告訴框架表單提交后跳轉(zhuǎn)的路徑,它可能像這樣:
表單提交后將會(huì)使用服務(wù)端返回的/submit/success路徑進(jìn)行模塊的更新跳轉(zhuǎn),這樣就完成了一個(gè)表單提交,此時(shí)/submit/success路徑所匹配的模塊中會(huì)自動(dòng)生成post參數(shù)對(duì)象{ username: "jim" }(表單元素設(shè)置了name屬性,且type不為password的值才會(huì)在this.post中創(chuàng)建):
new am.Module ( { init : function () { return { this.username : this.post.username }; } // ... } );
為了實(shí)現(xiàn)多個(gè)模塊間的跳轉(zhuǎn),你可以繼續(xù)創(chuàng)建一個(gè)module/about.html模塊文件,內(nèi)容與index.html幾乎相同,像這樣:
嵌套模塊hello amaplejs,page about direct to page index
當(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://specialneedsforspecialkids.com/yun/92719.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)行簡單配置。我們在開發(fā)包的文件中調(diào)用函數(shù)并傳入一個(gè)對(duì)象進(jìn)行啟動(dòng)路由并配置單頁應(yīng)用。繼續(xù)學(xué)習(xí)下一節(jié)教程模塊也可回顧上一節(jié)教程前言 開始編寫具體的代碼前,首先需啟動(dòng)單頁模式并進(jìn)行簡單配置。在src/index.html中引入amaple.js框架文件后我們就可以使用am這個(gè)全局對(duì)象。我們在開發(fā)包的src/config.js文件中調(diào)用am.star...
閱讀 4746·2021-10-13 09:39
閱讀 1956·2019-08-29 11:12
閱讀 1150·2019-08-28 18:16
閱讀 1863·2019-08-26 12:16
閱讀 1249·2019-08-26 12:13
閱讀 2996·2019-08-26 10:59
閱讀 2302·2019-08-23 18:27
閱讀 2996·2019-08-23 18:02