ToB企服应用市场:ToB评测及商务社交产业平台

标题: 一文搞懂前端跨页面通信的那些方案们 [打印本页]

作者: 半亩花草 时间: 2024-6-27 17:02
标题: 一文搞懂前端跨页面通信的那些方案们
前端开发逃避不开跨页面通信这项工作，跨页面通信，就好比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页面如果需要加载这张图片，是否还需要走

发送图片哀求
图片服务器相应哀求
浏览器下载图片
浏览器解析图片
浏览器渲染图片

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

雷同于Vuex、Redux这种，大概说具体点，不属于跨越面通信的范畴，因为我们使用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公共方法大全

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)