一、前言

我們一直使用各種框架來實現單頁應用，常用的有 React、 Vue、 AngularJS 。

那么我們來實現一個簡單的 spa 應用，主要看下思路。

二、準備

新建一個名為 spa 的文件夾；mkdir?spa復制代碼cd?spa復制代碼

初始化npm?init?-y復制代碼

安裝 express 來啟動項目；npm?i?express復制代碼

三、新建

1. 項目目錄結構spa

├──?package.json

├──?public

│???├──?LoginIn.js

│???├──?LoginUp.js

│???├──?Nav.js

│???├──?index.html

│???└──?index.js

└──?server.js復制代碼

2. 在根目錄新建 server.jsconst?express?=?require('express');const?app?=?express();

app.use(express.static(__dirname?+?'/public'));

app.listen(3000,?function()?{??console.log('服務器已啟動...');

});復制代碼

3. 在 /public/index.html 引入 jQuery 和 入口文件html>

單頁應用Demo

復制代碼

4. ?/public/index.jsimport?Nav?from?"./Nav.js";new?Nav;復制代碼

5. /public/Nav.jsimport?LoginIn?from?"./loginIn.js";import?LoginUp?from?"./LoginUp.js";//頁面的導航欄export?default?class?Nav?{??constructor()?{this.render()this.handle()

}??//渲染函數

render()?{let?template?=?`

功能選擇

登錄

注冊

`$('#root').html(template)

}??handle()?{

$('#loginInBtn').click(function?()?{??????new?LoginIn()

})

$('#loginUpBtn').click(function?()?{??????new?LoginUp()

})

}

}復制代碼

6. ?/public/LoginIn.jsimport?LoginUp?from?'./LoginUp.js'export?default?class?LoginIn?{??constructor()?{this.render()this.handle()

}??//渲染函數

render()?{let?template?=?`

?賬號：

?密碼：

`$('#container').html(template)

}??handle()?{

$('#backLoginUp').click(()?=>?{??????new?LoginUp()

})

}

}復制代碼

7. /public/LoginUp.jsimport?LoginIn?from?'./LoginIn.js'export?default?class?LoginUp?{??constructor()?{this.render();this.handle();

}??//渲染函數

render(){??????let?template=`

?賬號：

?密碼：

?電話號碼：

`;

$("#container").html(template);

}??handle()?{

$('#backLoginUp').click(()?=>?{

new?LoginIn();

})

}

};復制代碼

四、后言

本 demo 簡單示例下單頁應用的實現，望多多指教，還有什么原生 js 實現路由啥的可以網上搜索看看。

總結

以上是生活随笔為你收集整理的原生html单页应用,小白篇 -- 原生 js 实现单页应用的初探的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。