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

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

一、前言



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


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


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



二、正文


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


 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了


目录
相关文章
|
2月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
|
2月前
|
前端开发 JavaScript Java
基于Vue+ElementUI框架实现学生管理系统前端页面设计
基于Vue+ElementUI框架实现学生管理系统前端页面设计
|
3天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
13 2
前端JS读取文件内容并展示到页面上
|
2天前
|
设计模式 前端开发
前端设计模式
前端设计模式
5 1
|
16天前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
|
1月前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
52 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
2天前
|
前端开发 JavaScript
前端基础(一)_前端页面构成
本文介绍了前端页面的基本构成,包括HTML(负责页面的结构和语义)、CSS(负责页面的样式和表现)和JavaScript(负责页面的行为和动态效果)。文章通过示例代码展示了如何使用这三种技术来创建一个简单的网页,并解释了HTML文档的结构和语法。
7 0
|
1月前
|
设计模式 JavaScript 前端开发
Vue.js 组件设计模式:在前端热潮中找到归属感,打造可复用组件库,开启高效开发之旅!
【8月更文挑战第22天】Vue.js 以其高效构建单页应用著称,更可通过精良的组件设计打造可复用组件库。组件应职责单一、边界清晰,如一个显示文本并触发事件的按钮组件,通过 props 传递标签文本,利用插槽增强灵活性,允许父组件注入动态内容。结合 CSS 预处理器管理和封装独立模块,配以详尽文档,有效提升开发效率及代码可维护性。合理设计模式下,组件库既灵活又强大,持续实践可优化项目工作流。
42 1
|
2月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
|
2月前
|
前端开发 JavaScript 开发者
条件判断的模式问题之为什么不建议在前端日常业务开发中使用OOP的责任链模式实践
条件判断的模式问题之为什么不建议在前端日常业务开发中使用OOP的责任链模式实践