原生html单页应用,小白篇 -- 原生 js 实现单页应用的初探
一、前言
我們一直使用各種框架來實現單頁應用，常用的有 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 实现单页应用的初探的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解决数字和英文字母结合检索出现高亮重复问
- 下一篇： 水面垃圾收集器在线监测项目案例