页面A=>B时,有什么办法能预先执行B的某个函数,执行完毕后再A=>B?

汪喵工坊
  • 1
新手上路,请多包涵

我有2个页面,分别是A和B。点击A页面的某个按钮后,会跳转到B页面。
我想在点击按钮后,先加载B的某个函数,等待函数加载完毕后,再执行路由的跳转(A=>B)。
但问题是,只有A销毁后,进入B页面时才会开始加载函数。所以有什么办法能预先加载B的函数?

回复
阅读 450
5 个回答
汪喵工坊
  • 1
新手上路,请多包涵
✓ 已被采纳

最终是靠CSS解决了。本来我的需求是:在A页面(首页)点击头像,进入B页面(用户详情页),两个页面间的头像是一串连贯的动画。

如果进入B页面后,重新用ajax、localstorage来获取头像(<img :src="ajax">或者<img :src="localStorage.getItem()">),那就会导致动画撕裂。见下图
动画撕裂

但如果我用css加载就不会出现撕裂。
1、在A页面里点击头像,把图像赋值给vuex(或者localstorage)
2、进入B页面,获取头像。不要用<img :src>,改成<div :style="{backgroundImage:url(vuex)}">或者<div :style="{backgroundImage:url(localStorage.getItem)}">,动画就能连贯起来。见下图
连贯动画

我猜测原因是把css写在html顶部,这样css就能比js优先加载。等到动画动起来的时候,background-image已经拿到属性了,动画就不会撕裂了。

只从这个流程上来说,B页面里的这个函数就不属于B页面的功能范畴。假设我直接访问B页面呢?这个函数应该算是解析路由之前就得执行吧。

我在猜测A页面是列表,B页面是A列表中某一项ID请求详情的展示页。你想在A的列表中点击,然后获取详情,如果成功就去B展示,如果失败就还在A页面提示错误,防止用户看到错误的数据。

当有多个业务场景需要这个函数时,那这个函数应该属于公共函数,应该让它在某个业务中抽离出来,假如抽离困难(有很多属于某个业务的东西),那就说明该函数不够细化,应该在进行细化让公共功能单独组成新函数

可以这样:

// A 页面
const pageB = open('/b', '_blank');
pageB.funcStr = (() => {
    console.log('俺是 A 页面给的函数');
}).toString();

// B 页面
window.func = eval(window.funcStr);

不过局限性很多,例如函数中引用的所有依赖都要提前赋给 pageB

最近思考过这个问题。实际上出现这种不符合逻辑的想法主要来源于对url认识不彻底。无论是以前的web开发,还是现在的单页页面。url始终承担的者一个基本功能,就是携带了信息,这个信息可简要概括为视图的定位信息。也就是说,我只要访问这个路由,就能访问这个页面(当然一些单页的后台没有这种要求,有可能能是只要是第一次访问都会跳转到首页,那么url就无所谓了,但是一般不会这么做)。所以视图的定位就是百分百根据url来决定的,任何其他信息都不应该出现,比如react跳转时可以传递一些其他信息,但是这些信息对于直接访问这个视图是没有的。

所以,视图与url是对应起来的,如问题所示,如果你想要携带一些其他信息,也需要通过url来传递,比如文章详情直接跳转到评论,应该是url携带跳转定义,然后视图进行处理,最常见的方式就是在queryString传递信息,比如:?focus=#comment。你想要执行一些操作,那么就必须在url存储对应关系,并判断处理,否则比如会丢失信息。

你知道吗?

宣传栏