一行代码引起的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...

相关推荐
卡兰芙的微笑20 分钟前
get_property --Cmakelist之中
前端·数据库·编辑器
覆水难收呀22 分钟前
三、(JS)JS中常见的表单事件
开发语言·前端·javascript
猿来如此呀30 分钟前
运行npm install 时,卡在sill idealTree buildDeps没有反应
前端·npm·node.js
hw_happy35 分钟前
解决 npm ERR! node-sass 和 gyp ERR! node-gyp 报错问题
前端·npm·sass
FHKHH40 分钟前
计算机网络第二章:作业 1: Web 服务器
服务器·前端·计算机网络
计算机程序设计开发41 分钟前
计算机毕业设计公交站点线路查询网站登录注册搜索站点线路车次/springboot/javaWEB/J2EE/MYSQL数据库/vue前后分离小程序
数据库·vue.js·spring boot·课程设计·计算机毕业设计
QQ13049796941 小时前
Vue+nodejs+express旅游景区门票预订网站的设计与实现 8caai前后端分离
vue.js·express·旅游
视觉小鸟1 小时前
【JVM安装MinIO】
前端·jvm·chrome
二川bro2 小时前
【已解决】Uncaught RangeError: Maximum depth reached
前端
Angus-zoe2 小时前
uniapp+vue+微信小程序实现侧边导航
vue.js·微信小程序·uni-app