直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function fn(){console.log('fn print')}
function fn1(){console.log('fn1 print')}
function fnthis(){console.log(this);}

console.log(fn.call == Function.call)
console.log(fn.call.call == Function.call)
console.log(Function.call.call == Function.call)

fn.call(fn1)
fn.call.call(fn1)
Function.call(fn1)
Function.call.call(fn1)

fn.call(fnthis)
fn.call.call(fnthis)
Function.call(fnthis)
Function.call.call(fnthis)

根据mdn上的call的文档

function.call(thisArg, arg1, arg2, ...)

所以

1
2
3
4
fn.call(fn1) // 调用fn函数,在函数执行中的 this = fn1,
fn.call.call(fn1) // 调用Function.call函数,在函数执行中的 this = fn1,
Function.call(fn1) // 调用Function.call函数,但是是参数传递了fn1,而不是this = fn1
Function.call.call(fn1) // 和第二个相同

总结

setTimeout 启动的宏任务

promise(以及await的写法) 和 observer 都是微任务

执行是单线程,当宏任务执行完后,把所有等待的微任务执行后,才会执行下一个宏任务。

然后作者举例了一个稍微特殊一点的,html的事件冒泡,父子元素都有点击事件。

  • 鼠标点击子元素。分发是靠浏览器分发,对于js的任务是两个click。

  • 代码调用子元素点击事件,也会触发冒泡,但是对于js的任务是 这个调用代码。

因此上面两种看似相同的点击会有不同的执行顺序。

参考

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

有精力建议,直接看上面原文,作者的demo做得很好的!

以外的话 还有mdn的文档看

https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide

https://zh.javascript.info/event-loop

https://stackoverflow.com/questions/25915634/difference-between-microtask-and-macrotask-within-an-event-loop-context

对于不应该阻塞事件循环的耗时长的繁重计算任务,我们可以使用 Web Workers。https://html.spec.whatwg.org/multipage/workers.html

这是在另一个并行线程中运行代码的方式。

Web Workers 可以与主线程交换消息,但是它们具有自己的变量和事件循环。

Web Workers 没有访问 DOM 的权限,因此,它们对于同时使用多个 CPU 内核的计算非常有用。

安装配置

安装启动

Debian 系列

1
apt install redis-server

也可以考虑官网下源码自己编译,或者docker直接pull

修改/etc/redis/redis.confsupervised nosupervised systemd (Ubuntu 用systemd初始化系统的这样设置

通用的重启

1
2
3
systemctl restart redis.service
# 查看状态
systemctl status redis

个人电脑取消它开机启动systemctl disable redis

基本使用

啊 这个cli的提示真的香

閱讀全文 »

直接用devtools就不说了

现在说生产强制可调是,iqiyi为例

首先进入 vuejs.org 保证 控制版上有Vue标签

然后用同样的网页打开iqiyi保证 这个标签还存在

Sources->Page -> 右键 top -> search in all files

输入file:* devtools 搜索出文件

找到你觉得可能的文件(iqiyi是common.balabala…),格式化(chrome的花括号),在devtools:!1执行后一句加断点。

刷新页面,在console中执行修改,例如G.devtools = true;,点调试的pause(暂停继续)按钮,切回Vue标签即可

有收获但不推荐 4/10推荐度,如果要看,看附录3就好了。

表达的逻辑

人单次记忆7+-2左右事物,如果更多会自动去抽象范畴高级归类

讲解从顶向下,直接讲解联系,否则听取的人是自己脑补的联系,很大可能是和讲解意图不同。

另一个角度,先承认人脑在处理记忆的时候会自动做的事情,对于其中有误差和负担的部分,先直接的讲解清楚。

提示

读者会将读到的细想进行归类分组和总结,以便记住,如果作者传达给读者的思想已经实现进行了归类和概括,并且按自上而下的顺序呈现,读者就能更容易理解作者表达的思想。以上会所名,条例清晰的文章应当具有金字塔结构,并且不断“自上而下”地向读者传递信息,虽然在开始写作时作者的西路是“自下而上”的。

提示

金字塔中的思想以3种方式互相关联——向上、向下和横向。位于一组思想的上一个层次的思想是对这一组思想的概。这一组思想则是对其上一层次的思想的解释和支持。

文章中的思想必须符合以下规则。

閱讀全文 »