前言:
大佬们好!我是个编程小白,此前在前端领域完全是零基础,也毫无工作经历。说起来,我在尝试开发一个类似 Vue 的响应式框架(当然会融入一些独特差异),目前已坚持一年了。这期间,外界对我的评价褒贬不一,有人觉得我自不量力、自视甚高,毕竟凭我的经验,挑战这样的项目似乎有些异想天开;但也有人表扬我勇气可嘉,敢于突破舒适区,大胆尝试。不管外界声音如何,在这一过程中,我确实收获了不少宝贵的心得。
问题:
接下来,我想和大家分享在开发过程中遇到的一些问题及对应的解决办法,真心希望这些内容能对各位大佬有所助益。在编程里,字符串处理堪称一个怎么也绕不开的关键环节。今天,我就借助一个具体示例,采用原生 JavaScript 的方式,为大家讲解如何解决简单的字符串处理问题 。
题目:
1、 我要截取字符串"{{ab3 2}}2}}d{{一个}}bh{{a[1]}}";花括号里面的内容。
- 要求一:花括号中的内容,只能为:字母、数字、点、左右中括号,
- 要求二:只能用原生js实现,不得用正则表达式(容易导致内存溢出,所以不让用)
- 要求三:不用其他插件。
- 要求四:如何高效实现。
这一题目实际上难度并不高,借助 AI 能找到众多解决方案,对许多人而言,可能压根算不上问题。然而,AI 给出的答案却难以令我十分满意。其一,按 AI 的答案实践,执行效率非常低。其二,关键词稀缺,会导致程序漏洞。大部分大佬提供的方案应该就是逐个字符串对比的方式。我提供一个方案(仅供参考)
思路:
实现过程
改进过程:
这个代码,肯定还有改进的空间,为了让代码变得更加通用,就要让用户自定义开始和结束符号,以及特殊符号之间什么算合格的字符串。改进部分的代码如下:
我把花括号筛选后的方法,当作一个函数传递进去了。
这个方法不变。
这样,不管是什么字符串,只需要定义开始符号、结束符号、符号之间采用什么规则,全都由调用者决定。
具体代码如下:
再次改进
有了上面的改进方案,照理说我应该满足,基本上满足了我的开发需求,但是,在开发过程中,我发现了两个问题。第一:这两个函数太过依赖,离了任何一个函数,另一个函数都不容易运行。第二个问题:isValidChar函数,是写死的,无法改变校验的规则,这个对使用者来说,完全不能做到"方法万能"。
那有没有一种办法,能让两个函数关联性不强,又能及时改变校验规则呢?方法如下:
extractContent方法,我就不再赘述,我让最后一个参数(函数)可以传入,传入就执行。也可以不传入,不传入默认为true。这样用户使用的时候,就更加灵活,如果你只想找到两个符号之间的字符串,最后一个参数可以不传。如果你想对字符之间的数据进一步判断,就传入一个方法,进一步判断。
isValidChar函数则是重头戏,里面用了高阶函数柯里化,返回的是一个方法。(你可以间接理解为:这个返回值暂时不执行,等第二次调用的时候才执行)。这个里面两个参数:第一个参数代表:校验模版。第二个参数代表字符串的预处理(选择填,默认不处理)。这个方法可以实现,一个字符串是否符合校验函数,也可以实现校验之前对函数先处理一下。