为了账号安全,请及时绑定邮箱和手机立即绑定

以实现一个filter过滤器为引子,浅谈前端代码设计之美

标签:
JavaScript

    首先呢,Array对象下的方法——filter,map啊等等我们用得很爽,那偶尔有木有问下自己?能否也自己来实现一个?当然啦,实现这个其实很简单,我们一起来实现一下吧。

    我们先看下filter是什么,有什么用?

    在实际业务场景中,可能会遇到这样的情况:

    假设随便 一个数组是这样的:[1,2,3,4,5,6,9,-2,312],我想拿到数组中所有大于0的数,该怎么办?

    你说,这个很简单啊,一个for循环搞定。是的没有错,比如下面这样:

https://img1.sycdn.imooc.com//5c66a0d00001b1b305800275.jpg

    假设说,现在又有一个需求来了,要取小于0的所有数...你是不是又写一个简单的函数?大于100的呢?假设数组里面的成员不是数字,而是字符串,要你输出某些长度等于多少的成员呢?按照原来的方式,你是不是得一个个的去写,去实现?很累,疲于奔波对吧?程序员都是懒癌患者,肯定是不愿意看到这样的。那怎么办呢?

    过滤器就这样应运而生。

    我们看看过滤器是怎么做的?实际上原生是有实现的,就是new Array对象下的filter。

    https://img1.sycdn.imooc.com//5c66a2000001c28d06250045.jpg

    它非常简单,接收一个回调,并返回一个数组。

    那我们得怎么做呢?

    其实跟上面的逻辑很像,我们稍微改造一下。把重要的那个if判断分离开来。看看:

https://img1.sycdn.imooc.com//5c66a25900019d0207090308.jpg

    怎么理解这个呢?其实我们上面不是有一个if(arr[i] > 0)判断吗?因为if里面其实就是布尔值,假设说我用一个回调函数的返回值做判断,把想要的功能作为返回值输出,满足我们设定的条件就返回true(你喜欢false也行),是不是就很cool的实现了更进一步的抽象化?代码更加的低耦合?

    说到这,你可能还是很疑惑,这跟代码设计之美有啥关系?不,这是一个引子。我们还有进一步设计,进一步改造。

    虽说这样能实现要求,但是你有木有发现?你得很别扭的arrFilter(callback,arr)去调用?既然操作的是数组,我为何不在数组中拓展这样的一个filter函数呢?

    很简单对吧?

https://img1.sycdn.imooc.com//5c66a4950001aa0803840099.jpg

     但这样还是不够,要设计代码,不能只看眼前,最好是要很方便的拓展。

    如果是这样,假设我要在Array.prototype新增一个map呢?是不是又是Array.prototype.map = 什么什么?

    不,潜意识的提醒,我不能这样。

    那怎么做?加一个配置啊!

https://img1.sycdn.imooc.com//5c66a56600018e8d04650212.jpg

    把要写进prototype的所有拓展方法写成一个配置对象,以后有新的代码,新的方法进来,在配置项加一条就OK啦。这样不是更好?

    但是我们的代码就要稍微改一改了,变成这样:

https://img1.sycdn.imooc.com//5c66a5750001416b08290272.jpg

    但是这只是数组的?如果后面有字符串的呢?object的呢?

    需要再进一步的分类,这样每一种数据类型的新增方法,都仅仅是一条初始化。

https://img1.sycdn.imooc.com//5c66a5d20001fdab05440119.jpg

    我们试着拓展一个map函数:

https://img1.sycdn.imooc.com//5c66a6130001e8ca06600346.jpg

    函数写完,只需要在配置项中加一条配置,OK。我们试着调用看看。

https://img1.sycdn.imooc.com//5c66a654000106f407280192.jpg

    再看页面上的输出结果:

    是OK的。

https://img1.sycdn.imooc.com//5c66a67c0001309208880140.jpg

    这样我们完成了一个简单的代码设计。

    其实,这个虽说很简单,但是呢?设计的思想尤在。vue的构思各种技术都很cool,jQuery的各种构思,值与值,引用于引用之间的相互传递,函数与函数相互调用上,通用内部方法的设计上,都很巧妙,很值得学习。前端总被认为没有技术含量,其实不是的,好的设计不仅仅在于后台架构,当代更在于前端。

    最后,我们一起总览一下这个代码吧:

    

https://img1.sycdn.imooc.com//5c66a77500017b7b12790952.jpg

https://img1.sycdn.imooc.com//5c66a78c0001d2d712240861.jpg















点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1.3万
获赞与收藏
1519

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消