摘要:模塊更新時部分不需被替換的模塊,檢測到或參數變化增加移除或修改參數時觸發,如所有頁面的部分總是不變,此時它將不會被替換。模塊函數將在模板指令與狀態數據中講解繼續學習下一節教程模板指令與狀態數據也可回顧上一節教程啟動路由
正如它的名字,模塊用于amaplejs單頁應用的頁面分割,所有的跳轉更新和代碼編寫都是以模塊為單位的。
定義一個模塊一個模塊由
設置模塊局部樣式hello amaplejs,page index direct to page about
大多數情況下我們可能更希望讓一個模塊中的css樣式只作用當前的html模板,這當然我們也有所考慮,只需在中添加scoped屬性就會自動限制它的作用范圍了,就是如此簡單。但如果不帶scoped屬性時將不會只作用到當前的html模板內。
模塊生命周期當我們在編寫一個模塊的JavaScript時通常使用am.Module類創建一個amaple模塊對象,它將會在構造函數中進行一系列的初始化工作,而一個模塊的生命周期函數將會在初始化的不同階段,或模塊數據改變時自動觸發,它們共分為5個階段,具體如下:
init:模塊初始化時觸發,它將要求你在定義時返回模板中所使用的狀態數據
關于狀態數據的內容將在“模板指令與狀態數據(state)”中講解
mounted:解析模板并掛載狀態數據時觸發,你可以在這里處理一些模塊的后續操作,如為此模塊請求網絡數據并更新到模板中等。
queryUpdated:模塊更新時部分不需被替換的模塊,檢測到GET或POST參數變化(增加、移除或修改參數)時觸發,如所有頁面的header部分總是不變,此時它將不會被替換。
paramUpdated:模塊更新時部分不需被替換的模塊,檢測到param參數變化(增加、移除或修改參數)時觸發,只有設置了路由通配符的模塊才有param參數。
關于路由通配符的內容我們將會在《路由配置》中詳細講解
unmount:在更新模塊時被替換的模塊將會觸發。
你可以這樣設置一個模塊的生命周期函數:
...
【注意】生命周期函數內的this指向am.Module對象,如果它們使用ES6的箭頭函數(Arrow function)會導致函數內this指針指向不正確而出錯。模塊跳轉與表單提交
和普通頁面一樣,模塊跳轉與表單提交都會改變url,在host與port都相同的情況下都會觸發模塊更新,否則將進行頁面刷新的普通跳轉。模塊匹配及更新看如下圖解:
在普通頁面的跳轉中,我們使用標簽設置href屬性進行跳轉,在amaplejs中也是如此,但不同的是,所有dom元素上設置了href屬性后,點擊都可以觸發模塊更新,并且當href后帶有get參數時將會解析成鍵值對保存在am.Module對象內:
direct to page about
點擊此按鈕跳轉將會匹配到/module/about.html模塊,并且about模塊對象內的get參數值為{from: "index"}。
// about模塊內可使用this.get對象的屬性值 new am.Module ( { init : function () { return { from: this.get.from }; } } );# 表單提交
amaplejs的表單提交與普通頁面的表單提交寫法也相同,在
...
提交表單到account/register后,服務端需返回一個路徑字符串,來告訴框架表單提交后跳轉的路徑,它可能像這樣:
表單提交后將會使用服務端返回的/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幾乎相同,像這樣:
嵌套模塊hello amaplejs,page about direct to page index
當一個頁面需設置二級菜單時,我們可能希望在一個模塊中嵌套一個模塊節點,而這在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. 啟動路由
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/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倉...
摘要:開始編寫具體的代碼前,首先需啟動單頁模式并進行簡單配置。我們在開發包的文件中調用函數并傳入一個對象進行啟動路由并配置單頁應用。繼續學習下一節教程模塊也可回顧上一節教程前言 開始編寫具體的代碼前,首先需啟動單頁模式并進行簡單配置。在src/index.html中引入amaple.js框架文件后我們就可以使用am這個全局對象。我們在開發包的src/config.js文件中調用am.star...
閱讀 2632·2021-11-19 09:56
閱讀 879·2021-09-24 10:25
閱讀 1648·2021-09-09 09:34
閱讀 2204·2021-09-09 09:33
閱讀 1063·2019-08-30 15:54
閱讀 550·2019-08-29 18:33
閱讀 1273·2019-08-29 17:19
閱讀 512·2019-08-29 14:19