JavaScript 编码原则03 | 豆包MarsCode AI刷题

12 阅读6分钟

JavaScript 编码原则之过程抽象

过程抽象

在一些处理一些ui交互的细节的时候,抽象有两种,一种叫数据抽象,一种叫过程抽象。前端我们要处理交互过程,所以它不仅仅是需要对数据抽象,我们需要去掌握基本的过程抽象。当我们有了过程抽象的思想,我们可以让代码,拥有这个更好的扩展性。然后拥有着这个更好的复用扩展的能力。能够让我们的代码变得更加通用。我们会涉及到一个非常重要的概念叫做函数式编程。

我们说过程抽象通常是用来处理局部的细节控制的一些方法。过程抽象呢,它其实是函数式编程的基础应用。过程抽象是我们把这个函数本身看成是一个分段好的过程。然后我们,我们关注在它的这个输入和输出上这样的一个结果但我们说并不是所有的函数其实都是无副作用的输入和输出,那只有说纯函数的话,其实,才有这个无副作用的输入和输出 所谓的纯函数的话,其实它是不改变外界环境的一个函数.

过程抽象,其实在现在组组建框架或者 mvm框架里面在应用过程中下 就我们前端的框架 如果大家在 react的话 其实 react里面过程抽象应用最多 就 react的后续的话,其实它是一种典型的这个过程抽象一个应用 ,在过程抽象之后,它其实是可以去比如说通过hush的话,去存储一些那个状态就在这个状态的话,在它的这个就函数调用的这个 scope之外呢,我们存储和同步一些状态就这些的话,其实我们利用了这个国产抽象的能力

image.png

Eg:具体的例子:我们点击这个任务把这个任务给完成在哪个东西,我把这个注释掉 但实际上,这个代码是有问题的 原始的代码我们定义了一组buttons然后在 buttons上面定义这个 click事件。然后在这个 click事件里面,我们有一个方法,然后这个方法里面这个target的那个状态呢给自成更 blind就完成。因为它有一个 fate的一个这个动画是 2秒钟结束,我们的 2秒之后我们就把这个 list,从这个 parent node呢,就我们的这个这个paranoid,就这个 ul里面去把这个 list的这个目标,它就是这样的一个代码,然后这样的代码,我们一个个点删除的时候,其实是没有任何的问题的,我们来讲,就就这个里面我们就是点删除是没有任何问题的啊,但是呢这个代码是有 bug的就这个代码的 bug就在于说呢,有的用户呢,就是我手抖了,我就拼命的去点它 错就在这里,也是我鼠标连续的点它就相当于消失,所连续的点它啊,然后你会发现它就不断的抛出这个错 是因为我们每点一次click这个时候,我们就把它给给那个三就是触发一次 click的时间,然后触发 click click事件时候,我们就会把把这个状态设为complete的话,但是我们在这个 2,秒之后,我们要把这个语录掉,但是我们每触发,我们其实就就会每一次那如果我们连续点击多次以后呢,那最后的话你会发现这个。执行多次那我们说执行第一次的时候,他就已经从parentnode上移除掉了那么,再移除的再点缀多次的话,他们就会就会报这个错了就轮 node to be remove motor trial就是说,因为他已经溢出 所以呢这个 click代码呢,就只能执行一次

一个事件执行一次的话,我们给他一个参数叫做 us true,这样的话,这个事件就会就会去触发一次了,其实就是没有 bug 是我们的这个事件 storm事件里面提供的功能啊,但是啊,我们说就是有的时候,我们其实不仅仅是那个就是隔离和事件被点击一次就是比如说我们现在不是这个click事件。而是我们去比如,像服务器去 get请求一个数据然后这个数据呢我也只是希望呢,就是准备请求一次那这个时候如果说他引发的多个请求的话,那么,这个时候我只会找回第一次的请求其他请求会 block掉那类似于这种就是有多次调用都只允许执行一次的情况。

image.png

  • Once

image.png

我们也可以不用这种方法,而是把这个过程给分装成一个叫做 once的一个的过程抽象或者说叫做高阶函数 如果我们用这个ones来调用的话,它其实也是一样的 它不会报错 因为它每次它只会进行一次。我们再看一下这个代码可以看一下 就在这里的呢,我这个负等于once,然后这个once,我有函数consult一个 buff那这个时候的话,我调用了三次,但是我在控制台上,就只输出一个就我们这边运行在控制台上,只输出一个它不会输出三次 所以说,这个 once方法呢,会保证,我里面的这个框选的就只被执行一次 它是怎么保证的呢?

  • 高阶函数

image.png

这里定义的这个once 可以看成一个函数,如果它return另外一个函数?那么,这个函数叫做高阶函数因为它这个函数调用以后,它会返回一个新的函数 然后在这个函数里面我们做了一个处理 如果是第一次调用的话,它是有这个fn的就这个参数 我们就去直接的去用当前的这个 otherments和这个 listcontext去调用这个函数 然后把这个return返回,但同时,我们把这个函数的那个值的设为now 那么我们第二次再进来就是调用进来的时候因为这个时候的这个function的已经到了 因为once 外面这个 server其实它形成了一个闭包,就这里其实是形成了一个闭包的 外部的一个 output 然后在这个 inter里面呢就是我们每次调用这个 full的时候 调用的是这个函数。外面的地方,第一次调用的时候,它会返回值。然后接下来调整这个if,是一个 false,所以它就永远不会再往里面,我们就保证了这个once,那个返回的这个方法,是会被调用一次,一个一个过程抽象抽象 叫做lance的一个一个过程 这个参数是一个函数 它的作用是能够把这个函数里面的这个就是任何一个函数把它变成指标一致。

image.png

image.png

  • 编程范式

image.png

image.png

image.png