基于原生JavaScript實現(xiàn)SPA單頁應(yīng)用
更新時間：2023年03月23日 09:36:06 作者：TANKING
單頁Web應(yīng)用?（single?page?web?application，SPA）?，就是只有一張Web頁面的應(yīng)用，是加載單個HTML?頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的Web應(yīng)用程序。本文將利用原生JS實現(xiàn)SPA單頁應(yīng)用，需要的可以參考一下
什么叫做SPA單頁應(yīng)用
單頁Web應(yīng)用 （single page web application，SPA） ，就是只有一張Web頁面的應(yīng)用，是加載單個HTML 頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的Web應(yīng)用程序。
單頁應(yīng)用的說法是在JavaScript和AJAX技術(shù)比較成熟以后才出現(xiàn)的，指的是通過瀏覽器訪問一個網(wǎng)站時，只需要加載一個入口頁面，此后顯示的內(nèi)容和數(shù)據(jù)都不會再刷新瀏覽器頁面。有了單頁應(yīng)用之后，傳統(tǒng)的網(wǎng)站就被稱為多頁應(yīng)用了。
單頁應(yīng)用的優(yōu)點(diǎn)
• 1. 前端負(fù)責(zé)界面顯示，后端負(fù)責(zé)數(shù)據(jù)存儲和計算，各司其職。
• 2. 用戶體驗好、快，內(nèi)容的改變不需要重新加載，提升了用戶體驗；而且同一套后端程序代碼，不用修改就可以用于Web界面、手機(jī)、平板等多種客戶端；
• 3. 減輕服務(wù)器壓力，服務(wù)器只用出數(shù)據(jù)就可以，不用管展示邏輯和頁面合成，吞吐能力會提高幾倍。
單頁應(yīng)用的實現(xiàn)原理
其實很容易理解，就是在一個HTML頁面當(dāng)中只有一個div節(jié)點(diǎn)，通過后端獲取到數(shù)據(jù)，然后js操作DOM來創(chuàng)建、刪除、更新節(jié)點(diǎn)以達(dá)到修改頁面內(nèi)容，所以頁面是沒有被刷新的，只是DOM節(jié)點(diǎn)發(fā)生了改變，所以HTML發(fā)生了改變。
目前有非常多開發(fā)單頁應(yīng)用的優(yōu)秀框架，常見的有Vue、React、Svelte、Angular，但是這些框架都需要依賴非常笨重的Node模塊、打包工具、開發(fā)環(huán)境、以及各種組件。有沒有一種傳統(tǒng)的開發(fā)方式去實現(xiàn)單頁應(yīng)用呢？本文正是解決方案！
上代碼
index.html
<html>
<head>
<title>原生JS實現(xiàn)的單頁應(yīng)用</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
<script src="./static/js/index.js"></script>
<link rel="stylesheet" href="./static/css/index.css" rel="external nofollow" >
</head>
<body>
<div id="app"></div>
</body>
</html>static/css/index.css
*{
padding: 0;
margin: 0;
}
body{
background: #eee;
}
#app .topBar{
width: 100%;
height: 50px;
background: #fff;
margin-bottom: 20px;
line-height: 50px;
}
#app .topBar a{
display: block;
float: left;
padding:0 10px;
text-decoration: none;
color: #333;
}
#app .contentView a{
display: block;
text-decoration: none;
line-height: 40px;
background: #fff;
width: 90%;
margin: 0 auto 10px;
padding: 5px 10px;
color: #333;
font-size: 15px;
border-radius: 10px;
}static/js/index.js
// 路由配置
const routes = {
'/': home,
'/weibo': weibo,
'/douyin': douyin
};
// 路由函數(shù)
function router() {
// 獲取當(dāng)前 URL 中的路徑部分
const path = window.location.hash.slice(1);
// 根據(jù)路徑找到對應(yīng)的處理函數(shù)
const handler = routes[path] || notFound;
// 渲染頁面
handler();
}
// 注入topBar選項
function addTopBarItem(){
$topBarItem_HTML = `
<a href="#/" rel="external nofollow" >百度熱搜</a>
<a href="#/weibo" rel="external nofollow" >微博熱搜</a>
<a href="#/douyin" rel="external nofollow" >抖音熱搜</a>
`;
document.querySelector('#app .topBar').innerHTML = $topBarItem_HTML;
}
// 首頁
function home() {
// 熱搜列表
var hotlist = [
{
'title':'中俄聯(lián)合聲明:用和談解決烏克蘭危機(jī)',
'url':'https://baijiahao.baidu.com/s?id=1760993625204951286'
},
{
'title':'網(wǎng)友曬壯觀的俄羅斯護(hù)送隊',
'url':'https://quanmin.baidu.com/v/4235918912360611140'
},
{
'title':'春季旅游消費(fèi)強(qiáng)勢復(fù)蘇',
'url':'https://quanmin.baidu.com/v/4235918912360611140'
},
{
'title':'你的城市在下雨，他的城市在下泥',
'url':'https://haokan.baidu.com/v?pd=wisenatural&vid=3490913664840969394'
},
{
'title':'英國宣布向烏提供貧鈾彈',
'url':'https://news.ycwb.com/2023-03/22/content_51834441.htm'
}
];
$home_HTML = `
<div class="topBar"></div>
<div class="contentView"></div>
`;
document.querySelector('#app').innerHTML = $home_HTML;
addTopBarItem();
for (var i = 0; i < hotlist.length; i++) {
var node_li = document.createElement("a");
node_li.setAttribute('href',hotlist[i].url);
var hotlist_node = document.createTextNode(hotlist[i].title);
node_li.appendChild(hotlist_node);
document.querySelector('#app .contentView').appendChild(node_li);
}
}
// 微博熱搜
function weibo() {
// 熱搜列表
var hotlist = [
{
'title':'中俄元首簽署聯(lián)合聲明',
'url':'https://s.weibo.com/weibo?q=%23%E4%B8%AD%E4%BF%84%E5%85%83%E9%A6%96%E7%AD%BE%E7%BD%B2%E8%81%94%E5%90%88%E5%A3%B0%E6%98%8E%23&t=31&band_rank=1&Refer=top'
},
{
'title':'迪麗熱巴微博之夜正式官宣',
'url':'https://s.weibo.com/weibo?q=%23%E8%BF%AA%E4%B8%BD%E7%83%AD%E5%B7%B4%E5%BE%AE%E5%8D%9A%E4%B9%8B%E5%A4%9C%E6%AD%A3%E5%BC%8F%E5%AE%98%E5%AE%A3%23&t=31&band_rank=2&Refer=top'
},
{
'title':'中俄關(guān)系對世界格局人類前途命運(yùn)至關(guān)重要',
'url':'https://s.weibo.com/weibo?q=%23%E4%B8%AD%E4%BF%84%E5%85%B3%E7%B3%BB%E5%AF%B9%E4%B8%96%E7%95%8C%E6%A0%BC%E5%B1%80%E4%BA%BA%E7%B1%BB%E5%89%8D%E9%80%94%E5%91%BD%E8%BF%90%E8%87%B3%E5%85%B3%E9%87%8D%E8%A6%81%23&t=31&band_rank=3&Refer=top'
},
{
'title':'樸妍珍和宋承憲演過人間中毒',
'url':'https://s.weibo.com/weibo?q=%23%E6%9C%B4%E5%A6%8D%E7%8F%8D%E5%92%8C%E5%AE%8B%E6%89%BF%E5%AE%AA%E6%BC%94%E8%BF%87%E4%BA%BA%E9%97%B4%E4%B8%AD%E6%AF%92%23&t=31&band_rank=4&Refer=top'
},
{
'title':'云之羽官宣演員陣容',
'url':'https://s.weibo.com/weibo?q=%23%E4%BA%91%E4%B9%8B%E7%BE%BD%E5%AE%98%E5%AE%A3%E6%BC%94%E5%91%98%E9%98%B5%E5%AE%B9%23&t=31&band_rank=5&Refer=top'
}
];
$weibo_HTML = `
<div class="topBar"></div>
<div class="contentView"></div>
`;
document.querySelector('#app').innerHTML = $weibo_HTML;
addTopBarItem();
for (var i = 0; i < hotlist.length; i++) {
var node_li = document.createElement("a");
node_li.setAttribute('href',hotlist[i].url);
var hotlist_node = document.createTextNode(hotlist[i].title);
node_li.appendChild(hotlist_node);
document.querySelector('#app .contentView').appendChild(node_li);
}
}
// 抖音熱搜
function douyin() {
// 熱搜列表
var hotlist = [
{
'title':'高雙星偷走的是高加林的人生',
'url':'https://www.douyin.com/hot/1104967'
},
{
'title':'中國空間站的窗外有多美',
'url':'https://www.douyin.com/hot/1104853'
},
{
'title':'人民文娛評黑暗榮耀毒蟲仿妝',
'url':'https://www.douyin.com/hot/1103955'
},
];
$douyin_HTML = `
<div class="topBar"></div>
<div class="contentView"></div>
`;
document.querySelector('#app').innerHTML = $douyin_HTML;
addTopBarItem();
for (var i = 0; i < hotlist.length; i++) {
var node_li = document.createElement("a");
node_li.setAttribute('href',hotlist[i].url);
var hotlist_node = document.createTextNode(hotlist[i].title);
node_li.appendChild(hotlist_node);
document.querySelector('#app .contentView').appendChild(node_li);
}
}
// 404 頁面處理函數(shù)
function notFound() {
const main = document.querySelector('#app');
main.innerHTML = '<h1>404 頁面不存在</h1>';
}
// 監(jiān)聽 URL 變化事件
window.addEventListener('hashchange', router);
// 頁面加載完成后初始化路由
window.addEventListener('load', router);代碼說明
1.本次示例也是采用了目前的Web構(gòu)建工具打包出來的目錄模式（即Webpack、Vite等打包工具）
2.index.js里面的數(shù)據(jù)寫在了一個對象當(dāng)中，實際應(yīng)用需要使用AJAX/Fetch等方式獲取數(shù)據(jù)返回JSON對象進(jìn)行顯示。
動圖演示
在這個動圖示例中，可以看到，切換tab的時候，下面的列表發(fā)生了變化，URL也發(fā)生了變化，但是并沒有刷新頁面。
DEMO
http://demo.likeyunba.com/ys-js-spa/#/
到此這篇關(guān)于基于原生JavaScript實現(xiàn)SPA單頁應(yīng)用的文章就介紹到這了,更多相關(guān)JavaScript SPA單頁應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
最近做一個項目，需要javascript動態(tài)插入樣式，結(jié)果以前的方法失效了！查了2個小時的原因竟然是自己手賤，這個最后再說2012-02-02
javascript+HTML5 canvas繪制時鐘功能示例
這篇文章主要介紹了javascript+HTML5 canvas繪制時鐘功能,結(jié)合實例形式分析了javascript+HTML5 canvas數(shù)值運(yùn)算、圖形繪制與時間顯示相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
紅黑樹的插入詳解及Javascript實現(xiàn)方法示例
這篇文章主要給大家介紹了關(guān)于紅黑樹的插入的相關(guān)資料，以及Javascript實現(xiàn)的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起看看吧。2018-03-03
js數(shù)組是js部分非常重要的知識，有時我們有這么個需求js數(shù)組刪除指定元素,下面這篇文章主要給大家介紹了關(guān)于js刪除數(shù)組中指定元素的幾種方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
JavaScript如何調(diào)用C++模塊中的函數(shù)
這篇文章主要給大家介紹了關(guān)于JavaScript如何調(diào)用C++模塊中函數(shù)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
JavaScript實現(xiàn)獲取兩個排序數(shù)組的中位數(shù)算法示例
這篇文章主要介紹了JavaScript實現(xiàn)獲取兩個排序數(shù)組的中位數(shù)算法,涉及javascript數(shù)組遍歷及數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了js中g(shù)etter和setter用法,結(jié)合實例形式分析了javascript中g(shù)etter和setter的功能、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2018-08-08
拖動滑塊驗證功能在支付寶，微信各大平臺都能見到這樣的功能，那么基于js組件是如何實現(xiàn)此功能的呢？今天小編就給大家分享下js 拖動滑塊 驗證功能的實現(xiàn)代碼,需要的朋友參考下吧2016-11-11
這個函數(shù)來自Rico，Longbill及Dnew.cn修改。 說明: 傳入?yún)?shù)一個，為元素的id值或元素本身，返回為元素的真實背景色值（字符串）。背景值均為16進(jìn)制的值（原代碼是是IE里面返回的是16進(jìn)制的值，而Mozilla則是rgb值，Dnew.cn將其修改為均返回16進(jìn)制的值）。2007-12-12
javascript的函數(shù)、創(chuàng)建對象、封裝、屬性和方法、繼承
從一開始接觸到j(luò)s就感覺好靈活，每個人的寫法都不一樣，比如一個function就有N種寫法2011-03-03