SPA頁(yè)面初試
之前一直很好奇，SPA應(yīng)用到底是怎么實(shí)現(xiàn)的，昨天無(wú)意間看到了有一篇介紹的文章，就想著來(lái)試一下水(以下根據(jù)我的理解所寫(xiě)，可能會(huì)讓你看的云里霧里，如果想加深了解，最好先了解下window.location.hash是什么東西)
其實(shí)，SPA的原理就是，一開(kāi)始將一些必要的頁(yè)面都加載進(jìn)來(lái)，當(dāng)你在頁(yè)面輸入別的路由的時(shí)候，其實(shí)還是待在當(dāng)前的頁(yè)面，只不過(guò)是他識(shí)別出你想要去的地址，然后將那個(gè)頁(yè)面的內(nèi)容獲取到，替代掉當(dāng)前頁(yè)面的內(nèi)容，并且相應(yīng)的改變url地址，這樣給人看起來(lái)就好像到了另一個(gè)頁(yè)面，實(shí)際上你還是在這個(gè)頁(yè)面里，沒(méi)有離開(kāi)過(guò).
比如，例如當(dāng)前你在localhost:8080/index.html這個(gè)頁(yè)面時(shí)，你想跳轉(zhuǎn)到#list-view頁(yè)面(使用hashChange)，或者你點(diǎn)擊某個(gè)跳轉(zhuǎn)按鈕要跳轉(zhuǎn)到那個(gè)頁(yè)面的時(shí)候，他先獲取你那個(gè)#list-view頁(yè)面的內(nèi)容，然后將當(dāng)前頁(yè)面的內(nèi)容清除掉，然后再把list-view的內(nèi)容呈現(xiàn)出來(lái)，并沒(méi)有跳轉(zhuǎn)到別的頁(yè)面，你從頭到尾都是在這個(gè)頁(yè)面里，不過(guò)url地址會(huì)變化，因此看起來(lái)就像你到了另一個(gè)頁(yè)面，這樣給人的用戶體驗(yàn)特別好，因?yàn)椴恍枰却?yè)面加載過(guò)程.
說(shuō)了這么多，我們來(lái)根據(jù)他的原理做一個(gè)SPA的小應(yīng)用吧(里面的html和css代碼直接復(fù)制了我之前看的那個(gè)博客的作者的，因?yàn)閼械米约涸O(shè)計(jì))
html代碼如下:
<!DOCTYPE html>
延伸閱讀
- ssh框架
2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖
2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】
2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞
2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention
2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解
2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析
2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二)
2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式