JavaScript中对于SPA单页面的理解

可爱的大螃蟹

一、什么是SPA

SPA（single-page application），翻译过来就是单页应用

1. SPA

复制代码

是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（

1. HTML

复制代码

、

1. JavaScript

复制代码

和

1. CSS

复制代码

）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面举个例子来讲就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们发现，变的始终是杯子里的内容，而杯子始终是那个杯子结构如下图

我们熟知的JS框架如

1. react

复制代码

,

1. vue

复制代码

,

1. angular

复制代码

,

1. ember

复制代码

都属于

1. SPA

复制代码

二、SPA和MPA的区别

上面大家已经对单页面有所了解了，下面来讲讲多页应用MPA（MultiPage-page application），翻译过来就是多页应用在

1. MPA

复制代码

中，每个页面都是一个主页面，都是独立的当我们在访问另一个页面的时候，都需要重新加载

1. html

复制代码

、

1. css

复制代码

、

1. js

复制代码

文件，公共文件则根据需求按需加载如下图

单页应用与多页应用的区别

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

优点：

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

缺点：

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

三、实现一个SPA

• 监听地址栏中
  1. hash

  复制代码
  变化驱动界面变化
  
• 用
  1. pushsate

  复制代码
  记录浏览器的历史，驱动界面发送变化
  

实现

1. hash

复制代码

模式
核心通过监听

1. url

复制代码

中的

1. hash

复制代码

来进行路由跳转

1. // 定义 Router  
   
2. class Router {  
   
3.     constructor () {  
   
4.         this.routes = {}; // 存放路由path及callback  
   
5.         this.currentUrl = '';  
   
6.         // 监听路由change调用相对应的路由回调  
   
7.         window.addEventListener('load', this.refresh, false);  
   
8.         window.addEventListener('hashchange', this.refresh, false);  
   
9.     }  
   
10.     route(path, callback){  
    
11.         this.routes[path] = callback;  
    
12.     }  
    
13.     push(path) {  
    
14.         this.routes[path] && this.routes[path]()  
    
15.     }  
    
16. }  
    
17. // 使用 router  
    
18. window.miniRouter = new Router();  
    
19. miniRouter.route('/', () => console.log('page1'))  
    
20. miniRouter.route('/page2', () => console.log('page2'))  
    
21. miniRouter.push('/') // page1  
    
22. miniRouter.push('/page2') // page2  

复制代码

history模式

1. history

复制代码

模式核心借用

1. HTML5 history api

复制代码

，

1. api

复制代码

提供了丰富的

1. router

复制代码

相关属性先了解一个几个相关的api

• 1. history.pushState

  复制代码
  浏览器历史纪录添加记录
  
• 1. history.replaceState

  复制代码
  修改浏览器历史纪录中当前纪录
  
• 1. history.popState

  复制代码
  当
  1. history

  复制代码
  发生变化时触发
  

1. // 定义 Router  
   
2. class Router {  
   
3.     constructor () {  
   
4.         this.routes = {};  
   
5.         this.listerPopState()  
   
6.     }  
   
7.     init(path) {  
   
8.         history.replaceState({path: path}, null, path);  
   
9.         this.routes[path] && this.routes[path]();  
   
10.     }  
    
11.     route(path, callback){  
    
12.         this.routes[path] = callback;  
    
13.     }  
    
14.     push(path) {  
    
15.         history.pushState({path: path}, null, path);  
    
16.         this.routes[path] && this.routes[path]();  
    
17.     }  
    
18.     listerPopState () {  
    
19.         window.addEventListener('popstate' , e => {  
    
20.             const path = e.state && e.state.path;  
    
21.             this.routers[path] && this.routers[path]()  
    
22.         })  
    
23.     }  
    
24. }  
    
25. // 使用 Router  
    
26. window.miniRouter = new Router();  
    
27. miniRouter.route('/', ()=> console.log('page1'))  
    
28. miniRouter.route('/page2', ()=> console.log('page2'))  
    
29. // 跳转  
    
30. miniRouter.push('/page2')  // page2  

复制代码

四、如何给SPA做SEO

下面给出基于

1. Vue

复制代码

的

1. SPA

复制代码

如何实现

1. SEO

复制代码

的三种方式
SSR服务端渲染
将组件或页面通过服务器生成html，再返回给浏览器，如

1. nuxt.js

复制代码

静态化
目前主流的静态化主要有两种：
（1）一种是通过程序将动态页面抓取并保存为静态页面，这样的页面的实际存在于服务器的硬盘中
（2）另外一种是通过WEB服务器的

1. URL Rewrite

复制代码

的方式，它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址，一句话来说就是把外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的。
这两种方法都达到了实现URL静态化的效果
使用

1. Phantomjs

复制代码

针对爬虫处理
原理是通过

1. Nginx

复制代码

配置，判断访问来源是否为爬虫，如果是则搜索引擎的爬虫请求会转发到一个

1. node server

复制代码

，再通过

1. PhantomJS

复制代码

来解析完整的

1. HTML

复制代码

，返回给爬虫。下面是大致流程图

到此这篇关于JavaScript中对于SPA单页面的理解的文章就介绍到这了,更多相关JS SPA单页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/276254.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！