面试官:你对SPA单页面理解,它的优缺点分别是什么如何实现SPA应用

一、什么是SPA

SPA(singlepage application),翻译过来就是单页应用SPA是一种网络应用程序网站模型,它通过动态重写当前页面来与用户交互,这种方法避免了页面之间切换打断用户体验单页应用中,所有必要的代码HTMLJavaScriptCSS)都通过单个页面的加载检索或者根据需要(通常是为响应用操作)动态装载适当的资源添加到页面页面在任何时间点都不会重新加载,也不会将控制移到其他页面举个例子来讲就是一个杯子,早上装的牛奶,中午装的是开水,晚上装的是茶,我们发现,变的始终是杯子里的内容,而杯子始终是那个杯子结构下图

我们熟知的JS框架react,vue,angular,ember属于SPA

二、SPA和MPA的区别

上面大家已经对单页面有所了解了,下面来讲讲多页应用MPA(MultiPagepage application),翻译过来就是多页应用MPA中,每个页面都是一个主页面,都是独立的当我们访问另一个页面的时候,都需要重新加载htmlcssjs文件公共文件则根据需求按需加载下图

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

优点:

缺点:

三、实现一个SPA

原理
  1. 监听地址栏hash变化驱动界面变化
  2. pushsate记录浏览器的历史,驱动界面发送变化

实现
hash 模式

核心通过监听url中的hash进行路由跳转

// 定义 Router  
class Router {  
    constructor () {  
        this.routes = {}; // 存放路由pathcallback  
        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模式

history 模式核心借用 HTML5 history apiapi 提供了丰富的 router 相关属性先了解一个几个相关api

// 定义 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  

四、题外话:如何给SPA做SEO

下面给出基于VueSPA如何实现SEO三种方式

  1. SSR服务端渲染

组件或页面通过服务器生成html,再返回浏览器,如nuxt.js

  1. 静态

目前主流的静态化主要有两种:(1)一种是通过程序将动态页面抓取保存静态页面,这样的页面的实际存在服务器硬盘中(2)另外一种是通过WEB服务器URL Rewrite方式,它的原理通过web服务内部模块按一定规则外部的URL请求转化为内部文件地址,一句话来说就是把外部请求的静态地址转化为实际的动态页面地址,而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果

  1. 使用Phantomjs针对爬虫处理

原理是通过Nginx配置判断访问来源是否爬虫,如果是则搜索引擎爬虫请求会转发到一个node server,再通过PhantomJS解析完整HTML返回爬虫。下面是大致流程图

参考文献

原文地址:https://blog.csdn.net/weixin_50367873/article/details/134728201

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_50357.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注