FrankKai
FrankKai
在这个模块我们将学习重要的与异步编程相关的概念，以及它们在web浏览器和JavaScript中的表现。在学习其他文章之前，首先需要学会这些概念。 - 什么是异步？ - 阻塞的代码 - 线程 - 异步的代码 - 总结 ### 什么是异步？ 通常情况下，程序的代码是直接运行的，只运行一次。如果一个函数依赖于另一个函数的结果，它就需要等待另一个函数结束并返会返回值。在此之前，从用户的角度看，整个程序是停止的。 看一段代码感受一下： ```js function block(){ const start = Math.floor(Date.now()/1000); let i = 0; while(i { let myDate;...
- 初识并发模型和事件循环 - 运行时概念 - 可视化呈现 - 栈（stack） - 堆（Heap） - 队列（Queue） - 事件循环 - 初识事件循环 - ”执行到完成“ - 增加消息 - 零延迟（Zero delay） - 多个运行时互相通信 - 从不阻塞
- web worker解决什么问题？ - vue-cli3 项目配置( webpack4 worker-loader2 ) - 手上项目测试demo( webpack3 worker-loader1 ) - 手上项目web worker 实践（迁移热力图计算逻辑） - 总结与思考 ### web worker解决什么问题？ 由于JavaScript是单线程的，当一段js代码执行耗时过久时，会有阻塞的情况出现。 web worker就是解决阻塞的一种方式。它开启了一个一个worker thread，将复杂计算放在worker线程中运行，将同步代码转换为异步代码。 可以看这个例子。 #### main...
几乎所有使用Vue的开发者都知道，Vue的双向绑定是通过Object.defineProperty()实现的，也知道在getter中收集依赖，在setter中通知更新。 那么除了知道getter和setter之外，Object.defineProperty()还有哪些值得我们去注意的地方呢？是不是有很多细节的东西不懂呢？ 你可能会说，除了getter和setter之外，Object.defineProperty()还有value，writable，enumerable，configurable。 那么问题来了？ - value或writable与getter，setter可以共存吗？与enumerable，configurable呢？ - 概括讲下writable，enumerable，configurable分别是什么意思？ - enumerable在Object.keys()和for...in以及展开操作符...是如何表现的？ - configurable会限制哪些属性不可redefine？value会被限制吗？会限制属性的删除吗？ - 通过obj.foo和Object.defineProperty(obj,foo)方式定义的属性有何区别？ - `data descriptor、accessor descriptor、shared descriptor`是什么？ 如果看了上面这些问题一脸懵逼，不要惊慌，我们先来看一道非常直观易懂的题目： ```js // 实现下面的逻辑 console.log(a+a+a); // 'abc' ``` 题目看完了，带着问题开始阅读下面的内容吧。 如果能耐心看完的话对于个人的前端技术提升会非常大。 往近了说，不出意外上面这些问题全部可以迎刃而解，对于a+a+a题目的题解也会理解更加透彻。...
这道考察computed属性的题蛮有意思的。 不仅仅考察了computed，而且还考察了vue的依赖收集以及脏检查。 ```js computed : { foo() { if(this.a>0){ return this.a} else { return this.b + this.c } } } data() { a: 1, b: 1, c: 1, } ```...
先看一下blob URL长什么样： ``` blob:http://localhost:9090/39b60422-26f4-4c67-8456-7ac3f29115ec ``` http/https协议前加了一个blob:，是不是看起来很神奇，其实它不仅看起来神奇，在前端开发领域用处也十分广泛。 blob对象在前端开发中是非常常见的，下面我将列举几个应用场景： - canvas toDataURL后的base64格式属性，会超出**标签属性值有最大长度**的限制 - ``上传文件之后的File对象，最初只想在本地留存，时机合适再上传到服务器 blob仅仅是一种数据对象，在上述2个场景中，都需要比较重要的一个API，那就是`window.URL.createObjectURL()`。所以我们在介绍blob对象之余，也会对这个关键的API进行介绍。 所以文章主要分为以下几个部分： - Blob对象知识点 - canvas toDataURL场景下的blob - ``场景下的blob - 关键API `window.URL.createObjectURL()` - Blob，File对象如何转换为base64字符串 - 如何创建一个可用来测试的Blob对象 - 不使用canvas的情况下将image的url转换为blob...
在做实时语音转换技术分享的过程中，一直都没有找到非常全面的音频相关的资料，今天终于误打误撞找到一篇非API介绍的音频相关文章，在这里做一个学习MDN官方好文章的笔记。 - web audio workflow - sources and channels - Audio data:what's in a sample - Audio buffers: frames, samples and channels - Planar versus interleaved buffers - Visualizations-AnalyserNode -...
 canvas有一个非常常用的方法canvas.toDataURL()，它会将canvas转化为data URL的格式。 通常情况下这个data URL的类型为image。 看看下面的例子： ```js var canvas = document.getElementById('canvas'); var dataURL = canvas.toDataURL(); console.log(dataURL); /* * data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII= */ ``` 那么这个以`data:[MIME type];base64,`开头的data URL到底是什么东西呢？ - 初识data URL - data URL与传统的url有什么区别？...
 正式工作也有3年的时间了，想要写出更加优雅的代码。 所以最近在刷leetcode补充数据结构和算法方面的知识。 学校里虽然学过，但是仅仅是有个大概的认识。只有实际工作过几年以后，才会明白数据结构和算法的重要性。 如果是通信专业出身的同学，或者是硬件出身的同学一定知道：对于一个信号，我们可以从时域和频域两个方面去分析。 那么计算机科学或者说软件开发中的算法怎么去分析呢？ 有两个衡量优劣的维度：时间复杂度和空间复杂度。 - 时间复杂度：执行当前算法所消耗的'时间'。 - 空间复杂度：执行当前算法所占用的内存。 在这边博文中，我们来好好分析一下时间复杂度。 - 时间复杂度真的是计算'时间'吗？ - 时间复杂度公式：大O符号表示法 - 常见时间复杂度类型及代码分析 - 常数型O(1) - 对数型O(log n) - 线性型O(n) - 线性对数型O(n log n) -...
 开门见山，有人叫对象的复制为深复制浅复制，也有人叫深拷贝浅拷贝。 其实都是copy。 **深拷贝(递归复制，复制所有层级，独立副本，一个完全和原来对象属性无关的副本)** 返回对象：一个。 传入对象：一个。 条件：JSON安全的对象，可以序列化为JSON字符串，并且可以解析为新的字符串。 深拷贝算法： ```js function deepCopy(data){ let memory = null; const type = Object.prototype.toString.call(data); if (type === "[object Array]"){ memory = [] for (let i=0...