aiyoudiao aiyoudiao
  • JavaScript
  • Vue
  • React
  • 低代码
  • 线性系统
  • 暂未分类
  • LeetCode
  • 算法
  • 数据结构
  • 设计模式
  • Other
  • PMP
  • Office
  • 面试
  • Bash
  • 流年往事
  • 经验片段
  • 读书杂感
  • 归档
  • 分类
  • 标签
  • 简介
  • 收藏
  • 有趣
  • 文档

码二

扫微信二维码,认识一下码二吧😉。
  • JavaScript
  • Vue
  • React
  • 低代码
  • 线性系统
  • 暂未分类
  • LeetCode
  • 算法
  • 数据结构
  • 设计模式
  • Other
  • PMP
  • Office
  • 面试
  • Bash
  • 流年往事
  • 经验片段
  • 读书杂感
  • 归档
  • 分类
  • 标签
  • 简介
  • 收藏
  • 有趣
  • 文档
  • 流年往事

  • 经验片段

    • 2022年2月21日
    • 2022年3月16日
    • 2022年3月21日
    • 2022年3月23日
    • 2022年4月9日
    • 2022年4月10日
    • 2022年4月15日
    • 2022年4月27日
    • 2022年4月28日
    • 2022年5月6日
    • 2022年5月16日
    • 2022年5月20日
    • 2022年6月16日
    • 2022年6月22日
    • 2022年6月23日
    • 2022年8月17日
    • 2022年10月12日
    • 2022年11月6日
    • 2022年11月8日
    • 2022年11月21日
    • 2022年12月06日
    • 2022年12月09日
    • 2022年12月27日
    • 2023年01月21日
    • 2023年02月03日
    • 2023年03月19日
    • 2023年03月26日
    • 2023年04月12日
    • 2023年05月03日
    • 2023年06月04日
  • 读书杂感

  • 历程
  • 经验片段
aiyoudiao
2022-12-09

2022年12月09日


今天遇到一个问题,是QA提出的一个体验上的问题,这个问题属于遗留问题。前面几期都没有解决,轮到我了,QA居然提出来了。
本来打算从需求上怼回去,但是我也想从技术上解决这个问题。于是就花了几个小时研究了一下。
这个问题是这样的,这是个移动端的项目,由于有的页面比较特殊,进入时,都需要进行一次授权处理,授权完毕后需要更新当前页面所有信息,所以需要重新刷新页面,同时会以search的方式追加参数。
这个授权是通过第三方的sdk来进行的,不能直接改sdk中的代码,而且sdk中有几千行混淆的代码,只能模糊的推理出一部分的逻辑。
QA提出的问题是,在进入这个页面后,点击返回按钮,还在这个页面,需要连续点击两次返回才能完成回到上个页面。
这是因为首次进入时需要授权,授权结束后,会进行重定向,重定向的页面依旧还是当前页面,只不过增加了几个search参数,所以浏览器会把这次重定向记录下来,如此以来,等于有两次当前页面的history记录,于是才要操作两次返回才能返回之前的页面。

解决办法:

  1. 通过在授权的时候在session中打上一个标记,这个标记的key是当前页面的pathname,值就会是 1。
  2. 在进入这个页面的时候,通过key来获取session是否存在这个标记,如果存在,就给这个标记的值 设置为2.
  3. 当用户进行一次返回操作时,判断session中该标记的值是否为2,如果为2,则直接回滚到上一个页面,然后清除掉这个key为pathname的回话。

过程发现:

如果两次跳转的url的pathname一致,并且hash不变,仅仅只是search发生变化,那么并不会触发 popstate、hashchange的事件,所以通过监听这两个事件来进行回滚到上一个页面的操作是无效的。

代码实现:

// ---> tool.js

/**
 * Try to trigger the logic of the double jump, and if it is already labeled, go straight back to the previous page.
 * 尝试触发两次跳转的逻辑,如果已经打上标签,就直接回到之前的页面。
 */
const triggerDoubleGoBackFlag = () => {
  const { count } = Utils.session.handle({ key: location.pathname })
  if (count === 2) {
    Utils.session.remove({ key: location.pathname })
    history.back()
    return true
  }
  if (count === 1) {
    Utils.session.handle({ key: location.pathname, value: { count: 2 } })
  }
}

/**
 * Since the authorization operation will result in two jumps to the url, label this place so that when you rollback, you can directly roll back to the page before the two jumps
 * 由于授权操作将导致两次跳转到url,因此要标记此位置,以便在回滚时可以直接回滚到两次跳转之前的页面
 *
 */
const markDoubleGoBackFlag = () => {
  Utils.session.handle({ key: location.pathname, value: { count: 1 } })
}

export { triggerDoubleGoBackFlag, markDoubleGoBackFlag }

// ---> index.jsx
componentDidMount() {
const isReturn = triggerDoubleGoBackFlag()
if (isReturn) return
}

// ---> service.js

// 授权操作 
// ...
// 打上标记
markDoubleGoBackFlag()
// 授权结束,重定向页面之前
// ...

为了方便写片段,我写了一段shell脚本,也就是initFragment.sh文件。
遇到的这个问题是,shell脚本中的数字变量和字符串变量拼接后会出现很多空格。
这可能是在shell脚本中数字和字符串进行累加的时候会出现二进制字符串,当二进制码再转成字符串时,就多了很多空格。

解决办法:

通过echo 先将数字转成字符串,这样就不会有多余的空格了。

countNumer=`ls -l | grep "^-" | wc -l`
fileDateText=`date +%Y年%m月%d日`
# fileName=$countNumer"."$fileDateText".md" 
fileName=`echo $countNumer`"."$fileDateText".md" 
#代码片段#shell#javascript
上次更新时间: 10年18月2023日 01时57分53秒
2022年12月06日
2022年12月27日

← 2022年12月06日 2022年12月27日 →

最近更新
01
01.数据结构导论一览.md
10-16
02
30.2023年06月04日.md
06-04
03
08.与测量相关.md
05-06
更多文章>
Theme by Vdoing | Copyright © 2017-2023 aiyoudiao 码二 备案号: 鄂ICP备2022002654号-1