文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-02 18:02

关注

二、问题解答

刚遇到这个问题的时候,也是出于懵逼状态,怎么处理呢???碰巧的是近期学习了一些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. function watcher(initArr, callback) { 
  3.     const proxy = new Proxy(initArr, { 
  4.         set(target, key, value, receiver) { 
  5.             target[key] = value; 
  6.             callback(value, key, receiver); 
  7.         } 
  8.     }); 
  9.     return proxy; 

2.3.3 异步任务逻辑

  1.  
  2. function asyncTask(taskIndex, index, proxy) { 
  3.     console.log(`${index}索引处的任务${taskIndex}开始执行`); 
  4.     return new Promise(resolve => { 
  5.         setTimeout(() => { 
  6.             console.log(`${index}索引处的任务${taskIndex}执行完毕`); 
  7.             // 当任务队列2中还有任务时,进入队列替换任务1中执行完的任务 
  8.             if (task2.length > 0) { 
  9.                 proxy[index] = task2.shift(); 
  10.             } 
  11.         }, 1000 + 2000 * Math.random()); 
  12.     }); 

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执行完毕 

三、讨论

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

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

 

来源:前端点线面 内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯