前后端分离,组件开发的那点事

732

今天给大家介绍一个异步节流的前端js库 “async-throttle-exec”,再说这个库之前我先说点相关的背景

现在web前端基本都被Vue,React,Angular普及,组件开发确实香,但还有很多东西值得我们去思考比如怎么去合理的拆分为一个组件,一个组件怎么去提高它的复用性和移殖性,我认为一个好用的组件,应该是API越简单越好,参数尽可能的少,通过少许参数就可独立执行,做很多复杂而又符合业务需求和完善的功能

先给大家举个例子,不管是Vue,React,还是Angular,比如有个父组件,里面会用到两个子组件,就叫子组件A和子组件B吧,并且子组件A和子组件B都需要同一个接口请求回来的数据,这个时候很多人的做法就是会把请求数据这件事情放在父组件来做,然后由父组件传入给两个子组件A和B,这种现象叫作“状态提升”,这种数据流的设计有些不足,不足之处在于增强了子组件与父组件的偶合,这两个子组件必须在调用自己的父组件里传入更多的数据,如果这两个子组件被其它父组件使用,那么调用的那个父组件必须也要去获取数据传入子组件才能使用,这样子组件就失去了一部分的独立性和完善性;如果由子组件自己去获取数据呢,是不是就变得更独立更完善呢,调用子组件的父组件就不用去关心那么多本不应该关心的事和数据;但是两个子组件自己负责去获取数据,又有了另一个问题,那就是两个子组件或者同一个组件被使用多次,被使用多少次就会去获取多少次数据,也就会导致发送多个相同的http请求。这个时候“async-throttle-exec”异步节流就有了很好的作用

1. 举个实际的场景小例子,比如有个发布商品的功能,在发布商品的时候都要选择商品类别

2. 如果我想把选择商品类别这个选择器开发独立的小组件,供系统的其它地方使用,然后我把获取商品类别选项这件事由商品类别选择器这个组件自己获取

3. 然后我们看一下获取商品类别选项的函数是怎么做的,使用了“async-throttle-exec”库的构造函数来封装获取商品类别选项的函数

4. 再来看控制台的输出,我们看到获取数据的Promise的then执行了3次,因为组件调用三次,但是发送http请求的函数就只执行了一次

5. 这样在使用这个商品类别选择器的时候,就方便很多,不用去关心选项的数据

总结:其实事情很简单,我卖了很多关子

关于“async-throttle-exec”这个库,它还有其它功能,比如做数据缓存,支持“内存缓存/localStorage/sessionStorage”三种方式的缓存,包括清除缓存,不节流执行,命名空间等; 还是非常实用的,想了解更多可以去npm官网(www.npmjs.com/package/asy…