2020年8月

2020-08-24T14:58:17.png

引言

总所周知,js是单线程的。单线程意味着,js代码在执行的任何时候,都只有一个主线程来处理所有的任务(为了避免多线程可能产生的诸多问题,直接阉割多线程的可能性)。然而,随着硬件设备的快速发展,网页要做的事情会变得越来越多。人们慢慢意识到,不能让单线程限制了js的效率,然后web worker便应运而生。

栈,堆,队列

2020-08-24T14:58:35.png

基本数据结构知识略过~

讲讲它们在js语言层面的应用。

执行栈:函数调用形成了一个由若干帧(执行上下文)组成的栈。

消息队列:一个待处理消息的消息队列。每一个消息都关联着一个用以处理这个消息的回调函数。

在 事件循环 期间的某个时刻,运行时会从最先进入队列的消息开始处理队列中的消息。被处理的消息会被移出队列,并作为输入参数来调用与之关联的函数。正如前面所提到的,调用一个函数总是会为其创造一个新的栈帧。
函数的处理会一直进行到执行栈再次为空为止;然后事件循环将会处理队列中的下一个消息(如果还有的话)。

任务队列

在js事件循环机制中,存在多种任务队列,它们可分为宏任务(macro-task)和微任务(micro-task)两种。

  • 宏任务包括:setTimeout、setInterval、I/O、UI rendering
  • 微任务包括:process.nextTick、Promise、Object.observe(已废弃)、MutationObserver(html5新特性)

事件循环

2020-08-24T14:58:17.png

如上图所示,事件循环就是在主线程清空执行上下文栈后空闲之时,先去微任务队列中读取待执行程序,并装载到主线程中。如果没有内容(各类微任务队列都清空),则将去宏任务队列中寻找。如此往复,周而复始,直至结束。

参考文档

并发模型与事件循环-MDN
详解JavaScript中的Event Loop(事件循环)机制-知乎
JS事件循环机制(event loop)之宏任务/微任务-掘金
JavaScript 事件循环机制-掘金

引言

相信大家平常在开发过程中,经常会遇到此类需求。危险操作(如删除,退出登录)往往需要弹框提示给用户二次确认一下。本文介绍的是,如何使用js方法装饰器,封装二次确认弹框操作,增加小伙伴的开发效率。

装饰器介绍

2020-08-03T08:01:10.png

装饰器是对类、函数、属性之类的一种装饰,可以针对其添加一些额外的行为。详细使用,自行百度!

常规手段

view

<div class="bg-white flex justify-center">
    <div class="btn-primary" @click="clickMe">点我</div>
</div>

js

clickMe() {
    uni.showModal({
      title: "点击提示",
      content: "你确定要点我?",
      success: (res) => {
        if (res.confirm) {
          console.log("点我干啥");
        }
      },
    });
 }

效果展示

装饰器点击效果

装饰器写法

confirm.js

function confirm(message: string, title: string, cancelFn = function() {}) {
  return function(target: any, name: string, descriptor: any) {
    const originFn = descriptor.value;
    descriptor.value = function(rest: any) {
      uni.showModal({
        title: title,
        content: message,
        success: (res) => {
          if (res.confirm) {
            originFn.apply(this, rest);
          }
        },
      });
    };
  };
}

main.js

@confirm("你确定要点我?","点击提示")
  clickMe() {
    // uni.showModal({
    //   title: "点击提示",
    //   content: "你确定要点我?",
    //   success: (res) => {
    //     if (res.confirm) {
    //       console.log("点我干啥");
    //     }
    //   },
    // });
    console.log("点我干啥");
  }

效果展示

装饰器点击效果