标签： JavaScript

如何手写一个 Promise polyfill

前言

如果没有自己尝试去实现一个 Promise，估计很难知道 Promise 里的一些细节，面试官问一些比较刁的问题，也答不出来。比如：

一，trycatch 可以捕获到 Promise 里的错误吗？

try {
  new Promise((resolve, reject) => {
    throw 'err'
    })
  } catch (error) {
  console.log(error)
}

答案是不行。Promise 的执行器里，已经对错误做了 trycatch 处理。

二，then 的回调函数属于微任务

console.log(1)
new Promise((resolve, reject) => {
    resolve(2)
}).then(_ => { console.log(_) })
console.log(3)

以上的输出顺序是不是 1 2 3 ？实现过 Promise 就会知道要做到顺序执行也是可以的（仅仅是这种情况），但是实际上 then 的是一个异步的微任务。

继续阅读“如何手写一个 Promise polyfill”

VueJS 中 event bus 的实现

最近在工作中，使用了消息总线（message bus）这么一个东西，想起 Vue 也有类似的东西，所以想看一下其源码实现。

学习英语是理解编程的第一步。bus 有公共汽车的意思，也有 ‘a set of wires that carries information from one part of a computer system to another’（计算机系统的总线）。所以这里 bus 的意思是总线，一种形象的说法，为了更进一步的了解这个概念，可能需要一点硬件知识。

继续阅读“VueJS 中 event bus 的实现”

debounce 的简单实现

为什么要讲这个话题呢？主要是因为最近很多问题都由这个特性帮我解决了，让我感叹这非常有用。

学习英语是理解编程的第一步。de- 在英语里表示 xx 的反义，比如 defrost（除霜），deactivate（使失活），decentralization（权力分散），那么 debounce 的意思就是防抖/防止弹跳。我们结合实际的例子感性的认识一下。

继续阅读“debounce 的简单实现”

partial application

这个概念好像不太好翻译，有人直译为偏应用，对不懂这个概念的人有点一头雾水，不知所云，我来简单理解一下。另外已经有工程师把这个特性提交到了 tc39，说不定不久我们就能在新版谷歌浏览器使用了。

我们有一个求和函数如下：

function foo(a, b, c) { return a + b + c }

当我调用的时候，有个参数我突然不知道传什么，暂时想不传，并用 undefined 来替代。我们当然不能这么写：

foo(undefined,1,2)
继续阅读“partial application”

函数柯里化

函数柯里化是一个很有意思的话题，用起来也非常的神奇有趣。以前的我不太想深入的去了解这个话题，今天做了一些例子放在下面，加深理解。

在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化，是把接受多个参数的函数变换成接受一个单一参数的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

https://zh.wikipedia.org/wiki/%E6%9F%AF%E9%87%8C%E5%8C%96

简单理解，就是将一个可以接受多个参数的函数转化成可以接受任意个数参数的函数。我们可以将 curry 函数简化成这样：

继续阅读“函数柯里化”

web 动画与动量守恒

在系统不受外力下，物体的质量（m）与它速度（v）的乘积就是动量，用字母 p 来表示。

$$ p=m·v $$

动量是矢量，有大小，有方向。

还有一个动能公式：

$$ KE = { {1 \over 2} mv^2 }$$

通过上面两个公式，我们可以推导出两个物体相撞后的速度，以此来实现封闭空间的碰撞动画。

继续阅读“web 动画与动量守恒”

如何自制 json 解析器

这个文章缘起自同事兼朋友的一个技术分享，他介绍了 json 的 parse 和 stringify 的实现等等具体知识，我主要是学习他的代码和编程思路。同时，我也对比了 douglas crockford 的实现，他是 json 格式的发明者和布道者，他的实现代码也非常的酷，非常值得学习。

作为 web 开发者，我们把 json 当成了水和空气，没认认真真的研究她，今天我们就来拨开她的面纱看看她的实现原理吧。

继续阅读“如何自制 json 解析器”

forin 和 Object.entries 运行效率对比

我们从一个很简单的问题出发，怎么遍历一个 js 对象？第一种使用 forin，但是会遍历到原型链上的属性，这个不是我们想要的。

forin 存在的问题

var s = {a:1}
s.__proto__ = {b:2}
for(var i in s) {console.log(i)}

所以我们要这样判断一下。

var s = {a:1}
s.__proto__ = {b:2}
for(var i in s) { if(s.hasOwnProperty(i)) console.log(i)}
继续阅读“forin 和 Object.entries 运行效率对比”

audio 可视化

audio、audio visualization、可视化、音乐韵律可视化

在某些移动设备上，可能不能查看到效果，可以在电脑上的浏览器尝试。

注意

我们可能好奇某些音乐播放器，那些跳来跳去的韵律图是怎么做出来的，点击下面👇的播放按钮播放音乐，查看 audio 可视化。

您的浏览器不支持 canvas 继续阅读“audio 可视化”

文件上传进度和解析 Form Data

最近有一个小需求：上传文件的时候显示上传进度（上传了百分之多少）。这个需求不难，比如以下代码就能实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Upload file</title>
    <script>
      function uploadFile() {
        var fd = new FormData(document.forms[0]);
        var xhr = new XMLHttpRequest();

        xhr.upload.onprogress = function (e) {
          console.log('e.loaded:' + e.loaded + ', e.total:' + e.total)
          console.log(Math.round(e.loaded / e.total * 100) + '%') // 这里是上传进度
        }

        xhr.onreadystatechange = function(){
          if ( xhr.readyState === 4 ) {
            if ( xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 ) {
              console.log(xhr.responseText)
            }
          }
        }

        xhr.open("POST", "/");
        xhr.send(fd);
      }
    </script>
  </head>
  <body>
    <form action="/" method="POST" enctype="multipart/form-data">
      <input type="file" name="file" id="file" required />
      <input type="hidden" value="1" name="hidden">
      <input type="text" name="text">
      <input type="range" name="range">
      <button onclick="uploadFile();" type="button" id="upload">Upload</button>
    </form>
  </body>
</html>

继续阅读“文件上传进度和解析 Form Data”