一行代码引起的ios白屏

前言

  • 常网IT源码上线啦!
  • 本篇录入技术选型专栏,希望能祝君拿下Offer一臂之力,各位看官感兴趣可移步🚶。
  • 有人说面试造火箭,进去拧螺丝;其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验,不要是旁门左道冷门的知识,实际上并不会用到的。
  • 接下来想分享一些自己在项目中遇到的技术选型以及问题场景。

交流的前提是平等。

当孩子发现自己的生活都是各种作假的合集后,他还在那里大喊:我们都是为你好,哪有父母为孩子付出这么多的,我们这样做都是为了给你惊喜!

压力--

一、前言

今天像往常一样,开开心心的打代码编程,实习生小白急匆匆的跑过来说。

🙋教教我。

🙋🏻‍♂️咋啦?

🙋现在客户反馈说:ios部分机型访问我们系统白屏。

🙋🏻‍♂️啊!

🙋🏻‍♂️别急,我看看。

二、分析

首先,需要先对代码进行回滚,看看是从哪次提交就会出现白屏现象。

调试的时候也不用打包上生产测试,可以用ios手机本地访问系统即可。

经过不断对代码的回滚排查,终于定位到一次提交的代码。

而且我看到这种现象:其实安卓可以,ios不行,大概率是写法不支持。

我们定位到一次提交记录会出现白屏现象,暂且把该记录叫做A。

在A记录中还要看看多少个文件改动,进而继续排查是哪行代码。

终于定位到是:正向断言/(?<=$.)\w+/g引起的ios白屏。

这段代码是什么意思呢 🤡?

之前的需求

这段代码是解决之前某个需求。

需要从formula([$.A3],[$.B8])匹配出A3和B8

于是写了一段正则匹配、

ini 复制代码
const regex = /(?<=\$\.)\w+/g;  // 正向断言(lookbehind),它会匹配以 "$." 开头并且后面跟着一个或多个单词字符的部分
`formula([$.A3],[$.B8])`.match(regex);

使用正向断言(lookbehind),它会匹配以 "$." 开头并且后面跟着一个或多个单词字符的部分

完美匹配出A3和B8。

定位到正向断言写法对ios不支持。

PC端谷歌、安卓手机正常运行;Safari、iPhone报错:SyntaxError: Invalid regular expression: invalid group specifier name

三、解决方法

后面想:那这种写法不行,就用最传统的正则写,只不过代码写得多一点 🙃。

匹配出$.xxx,利用exec找到下一项,配合while

ini 复制代码
let str "formula([$.A3],[$.B8])";
let matches = [];
let match;

while ((match = regex.exec(str)) !== null) {
    matches.push(match[1]);
}
  
console.log(matches);  // A3和B8

打包测试ios正常。

至此撒花~

四、断言

如果大家感兴趣的话😊,正则表达式断言有四种。

(?=pattern)

正向预查(lookahead positive assertion)是一种正则表达式中的特殊构造,用于在匹配字符串时,向前检查某个条件是否满足,但不消耗实际的字符。具体来说:

正向预查会在任何匹配指定模式的字符串的起始位置进行查找。它是一种非获取匹配,即匹配的内容不会被获取,也不会影响后续的匹配过程。例如,正则表达式"Windows(?=9598NT2000)"可以匹配字符串"Vindows2000"中的"Vindows",但不能匹配"Windows:3.1"中的"Windows"。

正向预查不会消耗字符,也就是说,它在当前位置成功匹配后,匹配引擎会从当前位置继续向后查找,而不是从预查匹配的字符之后开始新的匹配。

这种功能对于需要检查某些条件是否满足而又不想影响实际匹配的情况非常有用。

(?!pattern)

正向否定预查(negative lookahead assertion)用于在不匹配指定模式的字符串的起始位置进行查找。它同样是一种非获取匹配,也就是说,匹配的内容不会被获取或影响后续匹配过程。例如,正则表达式"Windows(?!9598NT2000)"能够匹配字符串"Vindows3.1"中的"Windows",但不能匹配"Vindows2000"中的"Windows"。

正向否定预查不消耗字符,也就是说,一旦在当前位置成功匹配,匹配引擎会从当前位置继续向后查找新的匹配,而不是从预查匹配的字符之后开始。

这种功能对于需要在特定条件不满足时进行匹配的情况非常有用。

(?<=pattern)

反向肯定预查(positive lookbehind assertion)类似于正向肯定预查,不同之处在于它是向后(左侧)查找而不是向前(右侧)查找。例如,正则表达式"(?<=95|98|NT|2000)Windows"可以匹配字符串"2000 windows"中的"windows",但不能匹配"3.1windows"中的"windows"。

反向肯定预查在匹配过程中不消耗字符,也就是说,它会从当前位置向左查找满足条件的字符序列,并在当前位置开始匹配后续的正则表达式。

(?<!pattern)

最后一个。

反向否定预查(negative lookbehind assertion)与正向否定预查类似,不同之处在于它向左(向前)查找而不是向右(向后)查找。例如,正则表达式"(?<!95|98|NT|2000)Windows"可以匹配字符串"3.1windows"中的"windows",但不能匹配"2000 windows"中的"windows"。

反向否定预查在匹配过程中不消耗字符,它从当前位置向左查找不满足条件的字符序列,并在当前位置开始匹配后续的正则表达式。

其实正则有很多,慢慢了解,遇到就了解,我们也会成为写正则的高手。

后记

总有一些坑是要慢慢踩,经验就是在实际开发中不断积累。

我们在实际项目中或多或少遇到一些奇奇怪怪的问题。

自己也会对一些写法的思考,为什么不行🤔,又为什么行了?

最后,祝君能拿下满意的offer。

我是Dignity_呱,来交个朋友呀,有朋自远方来,不亦乐乎呀!深夜末班车

👍 如果对您有帮助,您的点赞是我前进的润滑剂。

以往推荐

小小导出,我大前端足矣!

靓仔,说一下keep-alive缓存组件后怎么更新及原理?

面试官问我watch和computed的区别以及选择?

面试官问我new Vue阶段做了什么?

前端仔,快把dist部署到Nginx上

多图详解,一次性啃懂原型链(上万字)

Vue-Cli3搭建组件库

Vue实现动态路由(和面试官吹项目亮点)

项目中你不知道的Axios骚操作(手写核心原理、兼容性)

VuePress搭建项目组件文档

原文链接

juejin.cn/post/739946...

相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿6 小时前
webWorker基本用法
前端·javascript·vue.js