摘要：但目前來(lái)看，單頁(yè)應(yīng)用在技術(shù)實(shí)現(xiàn)和體驗(yàn)上還有更大的發(fā)展空間，而這就是所要推進(jìn)的。模塊化頁(yè)面模塊化單頁(yè)應(yīng)用的特點(diǎn)之一是將頁(yè)面劃分為多個(gè)模塊，跳轉(zhuǎn)時(shí)更新模塊的內(nèi)容。與其他單頁(yè)庫(kù)相比，它們的職責(zé)更清晰，也易于理解。

單頁(yè)Web應(yīng)用作為新一代Web模式，為用戶提供了更流暢的體驗(yàn)滿足感。早在Chrome5、IE8和Firefox3的年代就可以通過(guò)hash技術(shù)實(shí)現(xiàn)單頁(yè)Web應(yīng)用，而HTML5新history API的出現(xiàn)讓單頁(yè)Web應(yīng)用從幕后迅速走向臺(tái)前。 Amaple 作為一款體驗(yàn)優(yōu)先的JavaScript單頁(yè)框架，可以在不依賴其他工具的前提下快速開(kāi)發(fā)單頁(yè)Web應(yīng)用，這也意味著那些只掌握了前端基礎(chǔ)知識(shí)的開(kāi)發(fā)者也能很容易上手開(kāi)發(fā)。在開(kāi)始具體聊Amaple單頁(yè)框架前，我們先聊聊單頁(yè)Web應(yīng)用本身，從簡(jiǎn)介紹，單頁(yè)Web應(yīng)用通常由一個(gè)主頁(yè)面及若干個(gè)模塊構(gòu)成，在頁(yè)面跳轉(zhuǎn)或表單提交期間不會(huì)刷新瀏覽器（人為刷新除外），使用起來(lái)它更像桌面應(yīng)用，致使許多著名的互聯(lián)網(wǎng)公司都在不斷地轉(zhuǎn)向它，如Google、Twitter、Facebook，國(guó)內(nèi)的有百度搜索、百度翻譯、阿里巴巴淘寶網(wǎng)的商品列表頁(yè)、阿里媽媽控制臺(tái)等。

普通的Web應(yīng)用跳轉(zhuǎn)受限于瀏覽器，它將會(huì)丟棄整個(gè)頁(yè)面并重新加載一個(gè)新的頁(yè)面，此時(shí)會(huì)出現(xiàn)短暫的頁(yè)面空白，而單頁(yè)Web應(yīng)用通常在跳轉(zhuǎn)時(shí)只更新部分模塊的內(nèi)容，既不會(huì)出現(xiàn)空白現(xiàn)象，還能達(dá)到更快的頁(yè)面渲染速度，從而提供更流暢的體驗(yàn)。

普通Web應(yīng)用在加載時(shí)顯示的動(dòng)畫(huà)只能固定為瀏覽器的加載圖，但單頁(yè)應(yīng)用的跳轉(zhuǎn)是無(wú)刷新的，因此可以像桌面應(yīng)用和App一樣自定義加載數(shù)據(jù)時(shí)的等待樣式，你可以編寫(xiě)一個(gè)有趣的加載等待動(dòng)畫(huà)，或是進(jìn)度條等，讓你的Web應(yīng)用更加多姿多彩。

單頁(yè)Web應(yīng)用通常不需要與服務(wù)器端代碼混合，它們使用數(shù)據(jù)API進(jìn)行通信，完全實(shí)現(xiàn)了前后端的分離，甚至前后端代碼可以不在同一臺(tái)服務(wù)器中，這也更加接近桌面應(yīng)用和App的機(jī)制，這意味著你不用為Web應(yīng)用多帶帶開(kāi)發(fā)一套服務(wù)端代碼，而且為將前端代碼放在CDN上提供了可能，這些在后端渲染的普通Web應(yīng)用上是做不到的。

不得不承認(rèn)，單頁(yè)Web應(yīng)用在性能上也有它的瓶頸，相比于普通Web應(yīng)用，因?yàn)樗哪K視圖通常是js動(dòng)態(tài)創(chuàng)建的，并且視圖和數(shù)據(jù)的請(qǐng)求也相互獨(dú)立，所以單頁(yè)Web應(yīng)用在加載時(shí)往往需要更多的http請(qǐng)求次數(shù)，而且動(dòng)態(tài)創(chuàng)建與數(shù)據(jù)請(qǐng)求是串行執(zhí)行的，這其實(shí)也是單頁(yè)Web應(yīng)用不利于SEO的原因所在。但另一方面，正因?yàn)閱雾?yè)Web獨(dú)有的代碼級(jí)頁(yè)面緩存，可以實(shí)現(xiàn)更快的頁(yè)面渲染表現(xiàn)，而SEO也可以使用現(xiàn)有技術(shù)來(lái)消除。

跨平臺(tái)、響應(yīng)式、免安裝與易編寫(xiě)等，這些都是Web的天生優(yōu)勢(shì)，這些優(yōu)勢(shì)能讓它快速蔓延并在任何場(chǎng)景下使用。微信為了利用這些優(yōu)勢(shì)，將它們與Native App進(jìn)行結(jié)合推出了功能較全體驗(yàn)較好的小程序，F(xiàn)acebook為了統(tǒng)一Android、IOS與Web的編寫(xiě)方法創(chuàng)造了React Native，選擇以HTML、JavaScript和CSS來(lái)生成兩大移動(dòng)端App的代碼。

Google為了推進(jìn)Web的發(fā)展也推出了PWA和AMP，讓W(xué)eb應(yīng)用的體驗(yàn)更加接近Native App，可見(jiàn)，Native App與Web的發(fā)展趨勢(shì)就像藝術(shù)一樣相互融合，相互吸收，目的是為了不斷提高應(yīng)用的體驗(yàn)效果，和尋求一種更加開(kāi)放統(tǒng)一的生產(chǎn)方式。單頁(yè)Web應(yīng)用也剛好符合這些趨勢(shì)，這種技術(shù)完全有Web本身的優(yōu)勢(shì)，并且在提供了更好體驗(yàn)的同時(shí)，也在不斷推進(jìn)服務(wù)端API的統(tǒng)一。在未來(lái)，可能產(chǎn)生更多類型的終端，如VR、AR等，這意味著Web跨平臺(tái)和自適應(yīng)的優(yōu)勢(shì)會(huì)更加明顯，而不僅限于PC和手機(jī)端。但目前來(lái)看，單頁(yè)Web應(yīng)用在技術(shù)實(shí)現(xiàn)和體驗(yàn)上還有更大的發(fā)展空間，而這就是 Amaple 所要推進(jìn)的。

日益強(qiáng)大的Web體系催生了 Amaple，它的定位是讓單頁(yè)Web應(yīng)用體驗(yàn)更流暢，構(gòu)建更簡(jiǎn)單，即使初級(jí)前端開(kāi)發(fā)也能順利掌握和使用，根據(jù)這些， Amaple 的設(shè)計(jì)有以下特點(diǎn)：

降低學(xué)習(xí)成本的一個(gè)特點(diǎn)是沿用原生Web開(kāi)發(fā)的標(biāo)準(zhǔn)，這樣可以最大化符合具有一定基礎(chǔ)的開(kāi)發(fā)者的認(rèn)知范圍，這也是 Amaple 的設(shè)計(jì)原則之一。在 Amaple 單頁(yè)應(yīng)用中，依舊使用href屬性跳轉(zhuǎn)頁(yè)面，使用

設(shè)置action屬性提交表單，只是它們是瀏覽器無(wú)刷新的跳轉(zhuǎn)，甚至可以創(chuàng)建像ShadowDOM那樣的組件，在組件內(nèi)使用特定子元素，看起來(lái)就像