SPA(单页面应用)的理解

最新推荐文章于 2024-07-30 16:49:30 发布

D前端小白

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量247

点赞数

分类专栏： vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_62759904/article/details/125464451

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

谈谈对 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