ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

浅谈前端开发模式和url的hash模式以及html5的history模式

2022-08-07 19:04:17  阅读:62  来源: 互联网

标签:hash 浅谈 渲染 前端 模式 浏览器 history 路由 页面


在前端开发初期,最开始设计模式并不清晰,到后来总结经验后,逐步完善,有了目前的前端开发方式。本文也顺着时间线,给大家讲解相关概念。

前端渲染,什么是后端渲染(重要)

后端渲染(SSR):类似JSP,网页直接从后端进行渲染(服务端),再向客户展示

Snipaste_2022-05-30_18-16-46

Snipaste_2022-06-27_15-11-03

前端渲染(BSR):浏览器中显示的网页中的大部分内容,都是由前端写的js代码在浏览器中执行,最终渲染出来的网页。

前后端分离阶段

Snipaste_2022-05-30_18-24-26

Snipaste_2022-05-30_18-33-49

Snipaste_2022-06-27_15-10-16

单页面富应用阶段(SPA页面)

  • 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由,也就是前端来维护一套路由规则
  • 整个网页只有一个html页面。

Snipaste_2022-05-30_18-56-10

前端路由,什么是后端路由

后端路由:URL会发送到服务器,服务器会通过正则对该URL进行匹配,并且交给一个Controller进行处理。

总体优缺点:

  • 后端路由:

    • 优点:渲染好的页面不需要加载任何的js和css,可以直接交给浏览器进行展示,有利于SEO的优化。

    • 缺点:整个页面的模块由后端人员来开发和维护的,前端人员要是想要开发页面,需要通过PHP和Java等编程语言来编写代码。

      通常情况下,HTML代码和数据以及对应的逻辑会混在一起,编写和维护都是非常糟糕的事情。

url的hash模式

可以更改页面指向,同时也不会请求资源

location.hash='bbb'

Snipaste_2022-05-30_20-08-11

history.pushState({},'','home')

Snipaste_2022-05-30_20-17-43

将url压入栈(先进后出)中

Snipaste_2022-05-30_20-22-35

HTML5 的history模式

go

Snipaste_2022-05-30_20-31-20

replaceState

Snipaste_2022-05-30_20-28-26

补充说明:

  1. history.back () 等价于 history.go(-1)
  2. history.forward() 等价于 hisrory.go(1)
  3. 这三个接口等同于浏览器界面的前进后退

标签:hash,浅谈,渲染,前端,模式,浏览器,history,路由,页面
来源: https://www.cnblogs.com/liyublogs/p/16559635.html

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有