一、前言
前端部分的搭建,需要考虑使用哪种模式进行页面之间的跳转交互,
而项目内的页面交互,不可避免的需要相互之间的数据共享。
这就引出了本篇博客的目的,一起来谈谈:项目前端部分的构建方式以及数据共享方式。
二、正文
(一)、搭建前端部分所需要注意的问题
1)方便性
结合开发的时间需求和方便性选择适合的前端模式;
2)性能
在项目的体量比较大,或者某个页面需要加载较多文件时,会对加载页面所需时间产生影响
3)浏览器的缓存
在项目发布后如果文件(css/js/image)有更新,需要用户浏览器清理缓存才会从服务器获取更新后的文件,
可以通过文件末尾添加时间戳和版本号来避免浏览器优先使用内部缓存文件这样的问题。
4)文件的目录结构
是按照文件的类别设置目录结构?还是按照不同页面设置?
(二)、前端搭建的模式选择(多页面模式和单页面模式)
图片来源: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的方式来进行页面内容的更换;
数据传递:可通过全局变量或者参数传递,进行相关数据交互
两种模式对比:
总结:
单页面模式:相对比较有优势,无论在用户体验还是页面切换的数据传递、页面切换动画,都可以有比较大的操作空间
多页面模式:比较适用于页面跳转较少,数据传递较少的项目中开发,否则使用cookie,localstorage进行数据传递,是一件很可怕而又不稳定的无奈选择
三、结语
前端的明天在框架,得学vue了