之前一直很好奇，SPA應(yīng)用到底是怎么實(shí)現(xiàn)的，昨天無意間看到了有一篇介紹的文章，就想著來試一下水(以下根據(jù)我的理解所寫，可能會(huì)讓你看的云里霧里，如果想加深了解，最好先了解下window.location.hash是什么東西)
其實(shí)，SPA的原理就是，一開始將一些必要的頁面都加載進(jìn)來，當(dāng)你在頁面輸入別的路由的時(shí)候，其實(shí)還是待在當(dāng)前的頁面，只不過是他識(shí)別出你想要去的地址，然后將那個(gè)頁面的內(nèi)容獲取到，替代掉當(dāng)前頁面的內(nèi)容，并且相應(yīng)的改變url地址，這樣給人看起來就好像到了另一個(gè)頁面，實(shí)際上你還是在這個(gè)頁面里，沒有離開過.
比如，例如當(dāng)前你在localhost:8080/index.html這個(gè)頁面時(shí)，你想跳轉(zhuǎn)到#list-view頁面(使用hashChange)，或者你點(diǎn)擊某個(gè)跳轉(zhuǎn)按鈕要跳轉(zhuǎn)到那個(gè)頁面的時(shí)候，他先獲取你那個(gè)#list-view頁面的內(nèi)容，然后將當(dāng)前頁面的內(nèi)容清除掉，然后再把list-view的內(nèi)容呈現(xiàn)出來，并沒有跳轉(zhuǎn)到別的頁面，你從頭到尾都是在這個(gè)頁面里，不過url地址會(huì)變化，因此看起來就像你到了另一個(gè)頁面，這樣給人的用戶體驗(yàn)特別好，因?yàn)椴恍枰却撁婕虞d過程.
說了這么多，我們來根據(jù)他的原理做一個(gè)SPA的小應(yīng)用吧(里面的html和css代碼直接復(fù)制了我之前看的那個(gè)博客的作者的，因?yàn)閼械米约涸O(shè)計(jì))
html代碼如下:
<!DOCTYPE html>
網(wǎng)友評(píng)論
