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

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

一、前言



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


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


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



二、正文


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


 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了


目录
相关文章
|
6月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
|
4天前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
14 1
.自定义认证前端页面
|
2月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
2月前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
3月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
43 18
|
4月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
123 2
前端JS读取文件内容并展示到页面上
|
3月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
34 1
|
3月前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
29 1