一文搞懂前端跨页面通信的那些方案们

前端开发逃避不开跨页面通信这项工作,跨页面通信,就好比A页面要和B页面说话,可能只是说一句话,不需要回话,可能是要给一些东西,希望得到回复,并频繁进行沟通,接下来我们说说这些跨页面通信的方案们,希望对你有所帮助。

目录

1 页面传参

2 页面路由传参

3 后端接口做为中转站 

4 图片预加载

5 前端状态管理工具

6 Cookie、localStorage、SessionStorage

7 PostMessage

8 IndexedDB

9 共引JS文件

10 小结


1 页面传参

例如我们在浏览器的url中的问号后面带入参数,希望通过参数将一些信息带到其他页面中去,通常是类似于?a=xx&b=xx这种。这种是属于一种get请求的方式,链接长度有限,而且破坏域名的美观性,如果链接上带有关键信息页不安全。

至于目标页面获取参数值,可以参考前端工具npm包,js-tool-big-box中的现有方法:

// window.location.href = 'http://localhost:8080/#/404?type=text&go2=232323&q=my2521';
const param = storeBox.getUrlParam('q');
console.log('获取到q的参数为:::', param);

2 页面路由传参

这种和第一种方式类似,但会把参数拼接到前端路由上,这种方式会以hash或者history的形式传递参数,类似于/#/:id/:name 这种方式。获取方式在vue2项目中可以这样:

// 页面Url示例
https://a.xx.com/detail/DXF00137
 
// detail页获取 bookId
created() {
  let bookId = this.$route.params.id
}

在react项目中就五花八门多了去了,你用不同的架构后,会发现各种各样。没办法,前端就是很乱套,很多团队没事干,加班加点希望做出东西来对外赋能,然后还得有自己的特点,怎么办呢?HTML,这个东西,我们读成“阿吃题迈而”吧,显得高端。 

3 后端接口做为中转站 

这个很好理解,我们几乎每天都在用。比如A页面有个金额,我们计算出来,提交给后端,让后端存着,等到了B页面,又需要这个金额了,我们再获取一下这个金额,到了某一步,再提交一下。反正就是接口来回传输呗,安全。

与之类似的还有websocket交互,例如A页面发送了一条申请信息,你可以在B页面通过这种实时通信方式,获取到审核结果消息,比如弹出一个小红点啥的,避免轮训请求浪费流量。

4 图片预加载

这个图片预加载也跟跨页面通信有关系吗?你有没有想过一个问题,如果我在A页面加载过一个图片,然后我把这个图片的DOM元素删除了,那么B页面如果需要加载这张图片,是否还需要走

  1. 发送图片请求
  2. 图片服务器响应请求
  3. 浏览器下载图片
  4. 浏览器解析图片
  5. 浏览器渲染图片

这个过程了呢?很显然,B页面会节约很大的线路。所以图片懒加载是属于这一类性能优化跨页面通信的范畴,这也属于我提前把东西准备好,准备随时交给B页面的一种方式。

5 前端状态管理工具

类似于VuexRedux这种,可能说详细点,不属于跨越面通信的范畴,因为我们使用vue或者react这种工具,大多数时候,用于单页面的场景。但对于用户来说,他哪知道啥单页面不单页面的,发展我看你们那么多页面来回跳呢。

而这个时候,我们通常会使用这些状态管理工具来保存或者共享一些数据,可以使页面不刷新,不发送请求,也可以获取到共享的状态数据。例如项目中多处会用到用户名,这种方式就恰到好处。

6 Cookie、localStorage、SessionStorage

这三类工具,都有一个共通点,他们不跨域,但是可以跨页面共享数据。cookie兼容性好,但使用起来需要写公共方法,不如另外2个使用简单。不过这些方法在前端公用工具包js-tool-big-js里,也都封装了便捷的方法,使用示例可参照这篇学习文档:获取浏览器参数、cookie、localStorage的存取的便捷方法学习

说到cookie跨域不跨域这个问题,它本身是不跨域的。但你可以在A页面的时候,在前后端交互中携带cookie,这样后端就可以获取到cookie信息。后端就可以指定往某个域下再写入cookie,这样B页面即便和A页面不在同一个域下,不也就得到这个cookie信息了嘛。这样是不是就得到了一个更多的跨域解决方案呢。

7 PostMessage

postMessage的宿主是window,可以在不同窗口下通信。比如我们常做的一些第三方登录,授权等场景需求,你肯定是需要将第三方的授权页面弹出来,放在自己的准备好的一个 window.open 弹框中,这样,等获取到第三方授权信息后,再通过window.postMessage()方法向本页面发送message信息,从而达到跨页面通信的效果。

这里说一下SharedWorker,SharedWorker 是一个可由多个窗口或标签页共享的 Web Worker,它可以在不同页面之间进行跨页面通信。通过 SharedWorker,多个页面可以通过 postMessage 进行双向通信,并共享数据和执行操作。

8 IndexedDB

说到indexedDB,我觉得这真是一项创举。他是浏览器提供的一个客户端数据库,既然是数据库,就说明他希望比localStorage更进一步,存入更多的东西。

很多时候,其实我们用不到,因为普通浏览器的web项目,用户的缓存还免不了丢失呢,你还存,能存多少。但架不住前端页面有时候钻进了APP里,这样他就被保护起来了吧,你就可以安心的存了。

但前端数据库,始终还是一个临时性的东西,最好还是让后端去存吧。

9 共引JS文件

说了这么多复杂用法的东西,你是不是忘记了我们javascript第一课学到的东西呢。也是最基本的用法。不就是个跨页面通信嘛,我写一个公共变量,然后让所有页面都引入这个JS文件,我就不信,你再跨页面,你还获取不到这个公共变量吗?谁说通信就必须来回交互了,你跟女朋友打电话,女朋友嗓子疼,你说话,他不说话,他就听着,难道不行?咋地,这种打电话难道不叫通信?面试那么多,有几个HR在面完了,会给你反馈结果的。

10 小结

本文一共说了9种方式的跨页面通信,而这9种里面有的又包含了小类方案,你可以自己总结一下,结合自己的项目案例说的更真实有经验一些,这在面试的时候就是自己的方案了。

然后我总结了前端开发,必须知道的,也是特别实用的公共方法大全:「终极收藏」前端开发必备:超全JavaScript公共方法大全

评论 69
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

经海路大白狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值