前端的单页面模式和多页面模式

简介: 前端的单页面模式和多页面模式

一、前言



 前端部分的搭建,需要考虑使用哪种模式进行页面之间的跳转交互,


 而项目内的页面交互,不可避免的需要相互之间的数据共享。


 这就引出了本篇博客的目的,一起来谈谈:项目前端部分的构建方式以及数据共享方式。



二、正文


 (一)、搭建前端部分所需要注意的问题


 1)方便性

    结合开发的时间需求和方便性选择适合的前端模式;


 2)性能

    在项目的体量比较大,或者某个页面需要加载较多文件时,会对加载页面所需时间产生影响


 3)浏览器的缓存

    在项目发布后如果文件(css/js/image)有更新,需要用户浏览器清理缓存才会从服务器获取更新后的文件,

    可以通过文件末尾添加时间戳和版本号来避免浏览器优先使用内部缓存文件这样的问题。


 4)文件的目录结构

    是按照文件的类别设置目录结构?还是按照不同页面设置?


  image.png


 (二)、前端搭建的模式选择(多页面模式和单页面模式)


  image.png

image.png


图片来源:https://blog.csdn.net/u013291076/article/details/53667382


 1)多页面模式(MPA  Multi-page Application):


   多页面跳转需要刷新所有资源,每个公共资源(js、css等)需选择性重新加载

   页面跳转:使用window.location.href = "./index.html"进行页面间的跳转;

   数据传递:可以使用path?account="123"&password=""路径携带数据传递的方式,或者localstorage、cookie等存储方式


 2)单页面模式(SPA  Single-page Application):


   只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次


   页面跳转:使用js中的append/remove或者show/hide的方式来进行页面内容的更换;


   数据传递:可通过全局变量或者参数传递,进行相关数据交互

 


两种模式对比:

image.png

image.png


总结:


单页面模式:相对比较有优势,无论在用户体验还是页面切换的数据传递、页面切换动画,都可以有比较大的操作空间


多页面模式:比较适用于页面跳转较少,数据传递较少的项目中开发,否则使用cookie,localstorage进行数据传递,是一件很可怕而又不稳定的无奈选择


三、结语



前端的明天在框架,得学vue了


目录
相关文章
|
3天前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
4 1
.自定义认证前端页面
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
|
20天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
36 18
|
23天前
|
设计模式 前端开发
前端设计模式
10月更文挑战第5天
18 3
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
64 2
前端JS读取文件内容并展示到页面上
|
1月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
28 1
|
1月前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
19 1
|
22天前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
20 0
|
2月前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
|
3月前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
66 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01