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”

svg 学习

最近在学习 svg,写了一些 demo,记在这里,还挺有意思的。

以一张 svg 开头:

zengxiaoluan.com

d3 中的 domain 和 range

以下内容更新于 2019-06-14

最近一直在用 d3 画双通道示波器,因为不是很理解 d3 的原理,走了不少弯路,如果大家有兴趣学习 d3,可以看看这个示例,帮我们更好的理解 d3 的一些基础 API,实现我们想要的效果。

标签 text 、tspan

示例中的图形是一个正弦函数,公式如下:

$y = asin(bx + c)$

公式中的 a、b、c 如何影响图形,我就不解释了,我先回去翻一下高中课本。

See the Pen svg-text/tspan by zeng (@zengxiaoluan) on CodePen.

继续阅读“svg 学习”

generator 和异步回调

在我们日常的前端开发中,异步回调是不可避免的操作,会严重影响我们的编程体验和代码的维护性、阅读性,而 promise 和 generator 可以在一定程度上解决这个问题。它们没有那么神奇,只是代码上的一些小花招,现在我们具体来看看 generator 是如何解决异步回调的问题。

继续阅读“generator 和异步回调”

一些排序算法

记得有一个明星程序员说,做一个 web developer 是不用学习数学的。那么自然也不用学习算法了。作为一个前端,在实际工作中确实很少实现什么排序算法,因为在 JavaScript 的语言层面,就已经实现 sort 函数了。但是学习这些排序算法,依然有助于我们理解这些语言相关内置函数的原理。 继续阅读“一些排序算法”

贪心算法 – JavaScript 描述

理解贪心算法的本质并不难,我们都很贪心。比如说,桌子上有 5 张人民币,面额分别是 100、50、20、10、5,但是按照要求我们只能选 3 张,那这 3 张怎么选呢?傻子都知道,我们肯定选面额大的。这就是贪心算法,每一步都是当下选择的最优解。

下面我们来看一些具体的问题。

继续阅读“贪心算法 – JavaScript 描述”

动态规划(Dynamic programming)— JavaScript 描述

《数据结构与算法 JavaScript 描述》这本书错误好多,为什么译者不把这些错误纠正呢?

在工作中,我们都用过递归,用俗话说就是函数自己调用自己;而动态规划一般被认为是和递归相反的一种解决问题的思路:递归是从解决一个大问题开始,通过逐步解决一些小问题,来使最终的问题得到解决;动态规划的思路则恰恰相反。 继续阅读“动态规划(Dynamic programming)— JavaScript 描述”