谈谈对 SPA 单页面的理解, 它的优缺点有哪些? 如何实现?

当你的面试官问出这个问题的时候, 我们应该怎么去回答呢? 下面是鄙人整理的一些资料, 希望对你有用 !

分析面试官所问出的问题

首先我们要分析面试官所问出的问题, 而不是先去回答问题, 这点很重要。你需要知道面试官想要得到的答案, 他一定是希望你有条理的、有层次的回答问题, 而不是毫无头绪的一通乱说, 虽然你认为你回答的还行, 但是面试官却是云里雾里的, 根本不知道你在讲些什么。

一般我们可以从这四个方面去回答：

What 这个东西是什么?
why 我们为什么要用这个东西?
How 我们应该怎么用这个东西?
Where 这个东西在哪里用?

这是主体部分, 其他的你知道的和这个东西可以产生对比的, 也可以说, 这样就更好了。做到逻辑清晰, 层次递进。

回答问题

答: 关于 SPA 我会从以下三点来回答:

SPA（single-page application）单页面应用，是一种网络应用程序或者网站的模型。通过动态重写当前页面与用户进行交互，根据需要动态装载相应的页面。我们所熟知的react、vue、angular等等都属于 SPA。（what）
单页面应用的优缺点：
- 优点：
  - 具有桌面应用的即时性、网站的可移植性和可访问性
  - 用户体验好、快、内容改变不需要重新加载整个页面
  - 良好的前后端分离，分工更加明确
- 缺点：
  - 不利于搜索引擎的抓取
  - 首次加载不友好，速度相对较慢

实现一个 SPA （这个问题看自己发挥，就是看自己的语言组织能力）

它的原理就是：①监听地址栏中 hash变化驱动界面变化；②使用pushstate记录浏览器的历史，驱动界面发送变化

实现分为两种模式：①hash模式；②history模式

hash模式：核心就是监url中的hash来进行路由跳转

// 定义 Router
class Router {  constructor () {  this.routes = {}; // 存放路由path及callback  this.currentUrl = '';  // 监听路由change调用相对应的路由回调  window.addEventListener('load', this.refresh, false);  window.addEventListener('hashchange', this.refresh, false);  }  route(path, callback){  this.routes[path] = callback;  }  push(path) {  this.routes[path] && this.routes[path]()  }
}  // 使用 router
window.miniRouter = new Router();
miniRouter.route('/', () => console.log('page1'))
miniRouter.route('/page2', () => console.log('page2'))  miniRouter.push('/') // page1
miniRouter.push('/page2') // page2

history模式：核心就是借用H5 history api，api提供了丰富的router相关属性，例如：

history.pushState浏览器历史记录添加记录

history.replaceState修改浏览器历史记录中当前记录

history.popState当history发生变化时触发

// 定义 Router
class Router {  constructor () {  this.routes = {};  this.listerPopState()  }  init(path) {  history.replaceState({path: path}, null, path);  this.routes[path] && this.routes[path]();  }  route(path, callback){  this.routes[path] = callback;  }  push(path) {  history.pushState({path: path}, null, path);  this.routes[path] && this.routes[path]();  }  listerPopState () {  window.addEventListener('popstate' , e => {  const path = e.state && e.state.path;  this.routers[path] && this.routers[path]()  })  }
}  // 使用 Router  window.miniRouter = new Router();
miniRouter.route('/', ()=> console.log('page1'))
miniRouter.route('/page2', ()=> console.log('page2'))  // 跳转
miniRouter.push('/page2')  // page2

回答时尽量描述的清楚一点，就是将代码转为文字表述。

总结

面试时回答问题的公式就是：

关于 XXX 我会从以下 XX（尽量使用量词）点来回答
它是什么？what
我们为什么要用它？why
我们怎么用它？how
我们在哪里用它？where
最后简单总结一下这个问题 conclusion

WWW H C

以上就是我的分享，希望对你有用。加油！希望所有的努力都不被辜负！！！

每日一句

Fortune favors the bold.

好运眷顾勇者

SPA(单页面应用)的理解相关推荐

[vue] 说说你对SPA单页面的理解，它的优缺点分别是什么？
[vue] 说说你对SPA单页面的理解,它的优缺点分别是什么? 介绍:SPA应用就是一个web应用,可理解为:是一种只需要将单个页面加载到服务器之中的web应用程序.当浏览器向服务器发出第一个请求时, ...
（25）：SPA单页面的理解
对SPA单页面的理解,它的优缺点分别是什么,如何实现SPA应用一.什么是SPA 1.SPA(single-page application),翻译过来就是单页应用 2.SPA是一种网络应用程序或网站 ...
通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design
通过Blazor使用C#开发SPA单页面应用程序(1) 通过Blazor使用C#开发SPA单页面应用程序(2) 通过Blazor使用C#开发SPA单页面应用程序(3) 前面学习了Blazor的特点.环 ...
[vue] SPA单页面的实现方式有哪些？
[vue] SPA单页面的实现方式有哪些? 1.监听地址栏中hash变化驱动界面变化2.用pushsate记录浏览器的历史,驱动界面发送变化3.直接在界面用普通事件驱动界面变化它们都是遵循同一种原则: ...
SPA单页面应用首屏加载速度提升方法
SPA单页面应用首屏加载速度提升方法首屏加载计算首屏加载时间公式解决方法减少入口文件体积静态资源本地缓存 UI框架按需加载避免组件重复打包图片资源压缩开启GZip压缩首屏加载首屏加 ...
spa单页面应用html缓存问题
一.背景浏览器的http请求都有一个缓存机制,简单点说就是同路径同名文件会默认被缓存下来,提升下次访问时的速度,默认只有刷新页面或长时间未访问时才会刷新缓存. 而spa单页面应用是通过路由切换来访问 ...
Java快速开发平台，JEECG 3.7.5 Vue SPA单页面应用版本发布
JEECG 3.7.5 Vue SPA单页面应用版本发布导读 ⊙ Vue+ElementUI SPA单页面应用 ⊙Datagrid标签快速切换BootstrapTable列表风 ...
当spa单页面应用遇上SEO，蛋痛的经历
spa单页面应用优点当然毋庸置疑:效果酷炫,我在视觉和产品面前无从反驳:性能高速度快,全JS嘛当然快,我在运维和产品面前无言以对:运算分散,异步加载,又省硬件又省流量,我在开发和产品面前彻底投降:JS ...
通过Blazor使用C#开发SPA单页面应用程序(1)
2019年9月23--25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...
SPA(单页面应用)和MPA(多页面应用)
单页面应用第一次进入页面时会请求一个html文件,刷新清除一下,切换到其他组件,此时路径也相应变化,但是并没有新的html文件请求,页面内容却变化了. 原理:js会感知到url的变化,通过这一点可以 ...

SPA(单页面应用)的理解

谈谈对 SPA 单页面的理解, 它的优缺点有哪些? 如何实现?

分析面试官所问出的问题

回答问题

总结

每日一句

SPA(单页面应用)的理解相关推荐

最新文章

热门文章