SPA是什么及原生js实现简易SPA单页面

SPA（single-page application）：

就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。

SPA单页面与MPA（MultiPage-page application)对比：

	SPA	MPA
组成	一个主页面和多个页面片段	多个主页面
刷新方式	局部刷新	整页刷新
url模式	哈希模式	历史模式
SEO搜索引擎优化	难实现，可使用SSR方式改善	容易实现
数据传递	容易	通过url、cookie、localStorage等传递
页面切换	速度快，用户体验良好	切换加载资源，速度慢，用户体验差
维护成本	相对容易	相对复杂

优点：

具有桌面应用的即时性、网站的可移植性和可访问性
用户体验好、快，内容的改变不需要重新加载整个页面
良好的前后端分离，分工更明确

缺点：

不利于搜索引擎的抓取
首次渲染速度相对较慢

效果：

实现：

<ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#one">第一个</a></li><li class="nav-item"><a class="nav-link" href="#two">第二个</a></li><li class="nav-item"><a class="nav-link" href="#three">第三个</a></li><li id="content"></li></ul><script>window.addEventListener('hashchange',function(){let hash=document.location.hash,content=document.querySelector('#content')if(hash==='#one') {content.innerHTML='我是第一个'}else if(hash==='#two') {content.innerHTML='我是第二个'}else {content.innerHTML='我是第三个'}})</script>

SPA是什么及原生js实现简易SPA单页面相关推荐

js html转盘点名,原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
原生JS实现简易模板
原生JS实现简易模版 String.prototype.renderTpl = function (obj) {var myself = this;var render = '';var source ...
原生js制作简易DOM拾色器实例教程
本教程的目的是为了帮助初学者更好的掌握DOM和数组相关操作,实例效果如下图所示. 可以看到实例中的拾色器分为三个部分:拾色区域.色系区域.显示颜色区域.先写出这三个部分的html代码,如下所示: &l ...
原生JS调用打印预览页面并实现打印文件流图片（亲测有效）
在工作中我们经常会遇到使用浏览器预览打印页面并实现文件打印,那么如何才能够在打印预览页面中显示图片呢?希望看完这篇文章对您有所帮助! 1. 原生JS调用打印预览页面 2. 在打印预览页面加载图片使用 ...
原生JS实现简易转盘抽奖
我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...
原生js实现form表单序列化的方法
当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...
vue安装Postcss_Flask和Vue.js构建全栈单页面web应用【通过Flask开发RESTful API】
前言: 看了一些国外的关于介绍flask和vue的前后端分离的文章,但没看到比较通俗易懂,代码完善的,直到昨天看到一篇新出的文章,而且内容非常棒,所以翻译过来,供大家一起学习. 原文来自Develop ...
原生js写简易抽奖系统
效果图原理: 其实这里的原理就是通过按钮的状态是开始抽奖还是停止如果i=ture 那就触发定时器每50毫秒更换一次中奖的内容.如果i=false,那就清除定时器,显示最后的抽奖结果下面我给大家 ...
原生js实现简易版消消乐
效果图整体思路文件结构 html结构 <div id="pop_star"><div id="targetScore">目标分数:1 ...
原生Js 两种方法实现页面关键字高亮显示
方法一依靠正则表达式修改 1.获取obj的html 2.统一替换html标签 3.替换要修改的关键字 4.再把html标签修改回去不足就是如果查找的关键字跟替换的标签一样就有冲突了 <!DO ...

SPA是什么及原生js实现简易SPA单页面

SPA是什么及原生js实现简易SPA单页面相关推荐

最新文章

热门文章