資訊專欄INFORMATION COLUMN
摘要：開始編寫具體的代碼前，首先需啟動單頁模式并進行簡單配置。我們在開發(fā)包的文件中調用函數(shù)并傳入一個對象進行啟動路由并配置單頁應用。繼續(xù)學習下一節(jié)教程模塊也可回顧上一節(jié)教程前言
開始編寫具體的代碼前，首先需啟動單頁模式并進行簡單配置。在src/index.html中引入amaple.js框架文件后我們就可以使用am這個全局對象。我們在開發(fā)包的src/config.js文件中調用am.startRouter函數(shù)并傳入一個Object對象進行啟動路由并配置單頁應用。首先我們來配置url風格：
am.startRouter ( {
// amaplejs中存在兩種url模式，分別為
// url中帶“#”的hash模式，所有瀏覽器都支持此模式?？墒褂胔istory: am.HASH指定
// url中不帶“#”的restful模式，此模式使用html5 history API實現(xiàn)，與普通url相同，
// 但在不支持此特性的瀏覽器中不能正常使用，且需后臺服務端的配置支持，可使用history: am.BROWSER指定
// 以上為兩種可選的url模式,你也可以指定history : am.AUTO來讓框架自動選擇模式，在支持html5 history API的瀏覽器下自動使用此模式，
// 不支持的情況下將自動回退使用hash模式
history : am.HASH
} );
配置一個簡單的匹配路由
正如我們所知到的，不同url將會顯示不同的頁面，在這里我們也需告訴框架一個url應該顯示哪幾個模塊，其實這也是很簡單的，具體分為兩步：
[1].在入口html文件（即src/index.html文件）內定義一個模塊節(jié)點，來告訴框架請求的模塊內容放到頁面的哪個位置
[2].在am.startRouter函數(shù)中為模塊設置相關參數(shù)，在函數(shù)參數(shù)內分別添加baseURL、module和routes參數(shù)，如下：
am.startRouter( {
baseURL : {
// 為模塊文件設置base路徑，所有的模塊文件請求路徑都將基于“/module”目錄，不設置時默認“/”
module: "/module"
},
// 模塊文件后綴，其實默認的模塊文件后綴就是“.html”，你也可以為它設置其他后綴
module : {
suffix: ".html"
},
// routes定義的function接收一個Router類的對象，使用此對象我們就可以告訴框架一個url應該顯示哪幾個模塊
routes : function ( router ) {
router.module ().route ( "/", "index" ).route ( "/about", "about" );
// 在module和route函數(shù)內都會返回router對象本身，所以可使用鏈式調用
// router.module函數(shù)選定配置的模塊節(jié)點，函數(shù)內沒有傳入任何參數(shù)表示選定一個不具名的模塊節(jié)點，
// 我們在內已定義了一個不具名的模塊節(jié)點
// 你也可以為模塊指定名稱，像這樣，
// 此時需這樣調用router.module ( "main" )來選定模塊節(jié)點。
// router.route函數(shù)為選定模塊配置匹配路徑與模塊的映射，
// 當url相對路徑為“/”時將加載index.html模塊文件，當url相對路徑為“/about”時將加載about.html模塊文件
},
// 已講解過的配置
history : am.HASH
} );
簡單的配置后，接下來就可以來編寫這個index.html模塊文件了，在src/module文件夾內添加一個index.html文件。
繼續(xù)學習下一節(jié)：【AmapleJS教程】2. 模塊
也可回顧上一節(jié)：【AmapleJS教程】前言
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/92720.html
摘要：體驗優(yōu)先的單頁框架點此查看倉庫是專為單頁應用而設計的基于頁面模塊化的框架，它可使開發(fā)者快速開發(fā)單頁應用。使用前置要求此框架的使用者可不需了解構建工具，但必須掌握和的基礎知識。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗優(yōu)先的JavaScript單頁框架 Amaple (點此查看Github倉...
摘要：體驗優(yōu)先的單頁框架點此查看倉庫是專為單頁應用而設計的基于頁面模塊化的框架，它可使開發(fā)者快速開發(fā)單頁應用。使用前置要求此框架的使用者可不需了解構建工具，但必須掌握和的基礎知識。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗優(yōu)先的JavaScript單頁框架 Amaple (點此查看Github倉...
摘要：體驗優(yōu)先的單頁框架點此查看倉庫是專為單頁應用而設計的基于頁面模塊化的框架，它可使開發(fā)者快速開發(fā)單頁應用。使用前置要求此框架的使用者可不需了解構建工具，但必須掌握和的基礎知識。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗優(yōu)先的JavaScript單頁框架 Amaple (點此查看Github倉...
摘要：開始編寫具體的代碼前，首先需啟動單頁模式并進行簡單配置。我們在開發(fā)包的文件中調用函數(shù)并傳入一個對象進行啟動路由并配置單頁應用。繼續(xù)學習下一節(jié)教程模塊也可回顧上一節(jié)教程前言 開始編寫具體的代碼前，首先需啟動單頁模式并進行簡單配置。在src/index.html中引入amaple.js框架文件后我們就可以使用am這個全局對象。我們在開發(fā)包的src/config.js文件中調用am.star...
閱讀 2072·2021-11-11 16:55
閱讀 1408·2021-09-28 09:36
閱讀 1050·2019-08-29 15:21
閱讀 1582·2019-08-29 14:10
閱讀 2766·2019-08-29 14:08
閱讀 1641·2019-08-29 12:31
閱讀 3253·2019-08-29 12:31
閱讀 985·2019-08-26 16:47
