FrankKai.github.io
FrankKai.github.io copied to clipboard
FrankKai
FE blog
这道考察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...
 reduce()是一个js数组原型链上的高级函数，没个几年经验估计对这个方法的用法会很模糊。 我最常用的就是用recude()求和，但其实它还有很多值得挖掘的好用之处。 所以开这个issue来系统性学习下reduce()吧。 - 初识reduce() - 概念 - 最简reduce - reducer函数的4个参数 - 语法 - 参数 - 返回值 - 如何理解initialValue和acc，cur的关系？ - 没指定initialValue的空数组reduce，抛什么错？ - 描述 - reduce callback的四个参数 - reduce()是如何工作的？ -...
 通过阅读这篇文章，可以学习到如何使用DefinePlugin插件使得前端项目更加工程化，说清晰点就是如何使用这个插件，在编译阶段根据NODE_ENV自动切换配置文件，提升前端开发效率。 - DefinePlugin的正确用法 - 如何使用DefinePlugin添加配置文件，构建期间自动检测环境变化，也就是如何根据NODE_ENV引入配置文件？ #### DefinePlugin的正确用法 DefinePlugin中的每个键，是一个标识符或者通过`.`作为多个标识符。 - 如果value是一个字符串，它将会被当做code片段 - 如果value不是字符串，它将会被stringify(包括函数) - 如果value是一个对象，则所有key的定义方式相同。 - 如果key有`typeof`前缀，它只是对typeof 调用定义的。 这些值将内联到代码中，压缩减少冗余。 ```js new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), VERSION: JSON.stringify('5fa3b9'), BROWSER_SUPPORTS_HTML5: true, TWO: '1+1',...
 在阅读[mqtt.js源码](https://github.com/FrankKai/FrankKai.github.io/issues/204)的时候，遇到一段很令人疑惑的代码。 nextTickWork中调用`process.nextTick(work)`，其中函数work又调用了nextTickWork。 这怎么这想递归呢？又有点像死循环？ 到底是怎么回事啊，下面我们来系统性学习一下`process.nextTick()`。 ```js writable._write = function (buf, enc, done) { completeParse = done parser.parse(buf) work() // 开始nextTick } function work () { var packet = packets.shift() if...
当我们在console里console.log(object)后，我们很难复制这个对象打印的结果，但是chrome devtool的copy()为我们提供了这样一个方法，它可以直接将内容复制到操作系统的剪贴板，但是这远远不够，于是有了这篇博客。 - copy()函数 - 如何debug css的pseudo - 如何debug 元素的class列表 - 如何快速提取一个网站的文字信息