Vue 源码思想在工作中的应用

开发 前端
由于电脑CPU、内存等的限制,能够同时启动的任务数有一定限制,例如一台电脑能够执行5个异步任务,但是目前有100个异步任务要执行,那么如何让这100个任务无间隔的快速执行完毕呢?

 [[432966]]

一、背景

由于电脑CPU、内存等的限制,能够同时启动的任务数有一定限制,例如一台电脑能够执行5个异步任务,但是目前有100个异步任务要执行,那么如何让这100个任务无间隔的快速执行完毕呢?

二、问题解答

刚遇到这个问题的时候,也是出于懵逼状态,怎么处理呢???碰巧的是近期学习了一些Vue的源码知识,那么是不是可以借鉴其思想来解决遇到的这个难题呢?经过一步步分析,确定答案是肯定的。下面从解题思路、知识点及代码实现来聊一聊实现过程。

2.1 解题思路

上述是整个流程图,其流程可简化为以下几个步骤:

将所有任务分为两组,任务组1指的是电脑可以并行执行的异步任务,任务组2指的是其余的异步任务;

将任务组1变为可帧听状态,即其发生变化时我们能够知道;

将任务组1中的任务触发(不触发任务不会执行);

某一任务执行完毕后,将任务组2中的一个任务填充到可帧听状态的任务组1中;

任务按照固定数量不断执行,直到所有任务执行完毕。

2.2 知识点

在Vue源码中,Vue2.x使用Object.defineProperty()实现对数据的帧听;Vue3.0使用Proxy实现对数据的帧听。本着赶时髦和Proxy确实优秀的态度,在实现过程中也应用了Proxy。Proxy作为一个新的知识点,先了解一下其定义及使用方法。

2.2.1 定义

Proxy中文意思是“代理”,是在目标对象之间架设一层“拦截”,从而可以修改某些操作的默认行为。Proxy共支持十三种拦截操作:get、set、has、deleteProperty、ownKeys、getOwnPropertyDescriptor、defineProperty、preventExtensions、getPrototypeOf、isExtensible、setPrototypeOf、apply、construct。

2.2.2 简单使用

  1. function testProxy(obj) { 
  2.     return new Proxy(obj, { 
  3.         get: (target, key) => { 
  4.             console.log(`我被get拦截器拦截了,拦截的属性是${key}`); 
  5.         }, 
  6.         set: (target, key, value) => { 
  7.             console.log(`我被set拦截器拦截了,拦截的属性是${key}, 新值是${value}`); 
  8.             target[key] = value; 
  9.         } 
  10.     }); 
  11.  
  12. const testObj = { 
  13.     a: 10 
  14. }; 
  15. const proxy = testProxy(testObj); 
  16.  
  17. proxy.a = 100; 

2.2.3 详细使用

详细用法可以参考阮一峰大佬的“ECMAScript 6入门”。

2.3 代码实现

2.3.1 定义两个任务队列

首先定义两个任务队列,task1为开始执行的一批任务,task2中为后续添加进去的任务。

  1. const task1 = [1, 2, 3]; 
  2. const task2 = [4, 5, 6, 7, 8]; 

2.3.2 数据变为可帧听的函数

利用Proxy将数据变为可帧听状态

  1. /** 
  2.  * 监听模块,监听对应数组的变化,保证其始终有一定长度的内容在运行 
  3.  * 
  4.  * @param {Array} initArr 定长任务的数组 
  5.  * @param {Function} callback 对应的回调函数 
  6.  */ 
  7. function watcher(initArr, callback) { 
  8.     const proxy = new Proxy(initArr, { 
  9.         set(target, key, value, receiver) { 
  10.             target[key] = value; 
  11.             callback(value, key, receiver); 
  12.         } 
  13.     }); 
  14.     return proxy; 

2.3.3 异步任务逻辑

  1. /** 
  2.  * 异步任务的运行逻辑 
  3.  * 
  4.  * @param {number} taskIndex 异步任务的序号 
  5.  * @param {number} index 当前任务在定长任务的序号 
  6.  * @param {Proxy} proxy Proxy实例 
  7.  */ 
  8. function asyncTask(taskIndex, index, proxy) { 
  9.     console.log(`${index}索引处的任务${taskIndex}开始执行`); 
  10.     return new Promise(resolve => { 
  11.         setTimeout(() => { 
  12.             console.log(`${index}索引处的任务${taskIndex}执行完毕`); 
  13.             // 当任务队列2中还有任务时,进入队列替换任务1中执行完的任务 
  14.             if (task2.length > 0) { 
  15.                 proxy[index] = task2.shift(); 
  16.             } 
  17.         }, 1000 + 2000 * Math.random()); 
  18.     }); 

2.3.4 主函数

  1.     const proxy = watcher(task1, asyncTask); 
  2.     task1.forEach((taskIndex, index) => asyncTask(taskIndex, index, proxy)); 

2.3.5 执行结果

通过结果可以看到,当一个任务完成时立刻将有一个新的任务进入。

  1. 0索引处的任务1开始执行 
  2. 1索引处的任务2开始执行 
  3. 2索引处的任务3开始执行 
  4. 0索引处的任务1执行完毕 
  5. 0索引处的任务4开始执行 
  6. 2索引处的任务3执行完毕 
  7. 2索引处的任务5开始执行 
  8. 1索引处的任务2执行完毕 
  9. 1索引处的任务6开始执行 
  10. 0索引处的任务4执行完毕 
  11. 0索引处的任务7开始执行 
  12. 2索引处的任务5执行完毕 
  13. 2索引处的任务8开始执行 
  14. 1索引处的任务6执行完毕 
  15. 0索引处的任务7执行完毕 
  16. 2索引处的任务8执行完毕 

三、讨论

针对此类问题的处理方式,各位大佬有新的思路与方法欢迎留言,我们一起讨论,共同进步。

本文转载自微信公众号「前端点线面」,可以通过以下二维码关注。转载本文请联系前端点线面公众号。

 

责任编辑:武晓燕 来源: 前端点线面
相关推荐

2022-05-12 13:50:13

OOPTCC中间件

2024-04-15 00:10:00

Redis数据库

2019-12-11 15:21:12

PythonExcel浏览器

2021-12-31 08:44:11

CSS 技巧代码重构

2024-02-28 07:53:30

Redis数据存储数据库

2021-04-14 17:34:18

线程安全

2019-08-07 16:50:38

SQLjoingroup

2022-09-30 09:26:35

JavaScript技巧

2021-06-07 14:36:58

iPadSiri办公

2023-04-25 12:35:38

2022-09-25 22:56:52

JavaScrip编程技巧

2023-04-13 10:51:42

2019-04-26 14:11:56

技巧工程师实践

2021-07-15 08:12:31

体系感面试逻辑思维

2021-04-18 21:07:32

门面模式设计

2021-05-26 10:24:13

智能技术物联网IOT

2017-05-14 16:44:03

大数据地方审计审计数据

2009-01-18 16:08:30

数据仓库商务智能数据提取层

2021-04-14 09:02:22

模式 设计建造者

2022-05-11 14:26:54

网络安全远程工作
点赞
收藏

51CTO技术栈公众号