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