关于spa:原生JavaScript实现的SPA单页应用hash路由
什么叫做SPA单页利用单页Web利用 （single page web application，SPA） ，就是只有一张Web页面的利用，是加载单个HTML 页面并在用户与应用程序交互时动静更新该页面的Web应用程序。 单页利用的说法是在JavaScript和AJAX技术比拟成熟当前才呈现的，指的是通过浏览器拜访一个网站时，只须要加载一个入口页面，尔后显示的内容和数据都不会再刷新浏览器页面。有了单页利用之后，传统的网站就被称为多页利用了。 单页利用的长处• 1. 前端负责界面显示，后端负责数据存储和计算，各司其职。• 2. 用户体验好、快，内容的扭转不须要从新加载，晋升了用户体验；而且同一套后端程序代码，不必批改就能够用于Web界面、手机、平板等多种客户端；• 3. 加重服务器压力，服务器只用出数据就能够，不必管展现逻辑和页面合成，吞吐能力会进步几倍。 单页利用的实现原理其实很容易了解，就是在一个HTML页面当中只有一个div节点，通过后端获取到数据，而后js操作DOM来创立、删除、更新节点以达到批改页面内容，所以页面是没有被刷新的，只是DOM节点产生了扭转，所以HTML产生了扭转。 目前有十分多开发单页利用的优良框架，常见的有Vue、React、Svelte、Angular，然而这些框架都须要依赖十分轻便的Node模块、打包工具、开发环境、以及各种组件。有没有一种传统的开发方式去实现单页利用呢？本文正是解决方案！ 上代码index.html <html><head> <title>原生JS实现的单页利用</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"></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 ...