Javascript on Bigshans' Blog

函数柯里化

Sat, 14 Oct 2023 11:52:10 +0800

函数柯里化是一种可以将函数转换为另一个函数的技巧，通常是用来减少函数参数的。

用一个简单的例子以表示这种使用:

function sum(a, b) {
  return a + b;
}

const add1 = curry((b) => sum(1, b));
console.log(add1(10));

这里我们实际上固定了 sum 的参数，但这里我只被允许加上 1 ，我们可以更灵活一些。

JavaScript 的标签模板字符串

Fri, 16 Dec 2022 10:49:05 +0800

标签模板是个看起来很 Magic 的语法，写起来像是这样。

console.log`Hello, World!`;
// Output: ["Hello, World!"]

实际上，这里的模板标签被转换成这样的一句调用。

console.log.call(console, ['Hello, World!']);

如果我们有用变量的话，

const name = 'world';
console.log`Hello, ${name}!`
// Output: [ 'Hello, ', '!' ] world

就会被转换成这样一句调用。

《事件捕获与事件冒泡》补遗

Tue, 17 May 2022 10:46:28 +0800

阅读的文章是关于事件捕获与事件冒泡先后执行顺序，写得挺好的，就是我读的时候漏了一点。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>DOM 冒泡</title>
    <style type="text/css" media="all">
#parent {
  height: 100px;
  width: 100%;
  background: green;
}
        #child {
          height: 50px;
          width: 50%;
          background: yellow;
        }
        #button {
          height: 30px;
          width: 10%;
          background: white;
        }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
      <div id="button">按钮</div>
      </div>
    </div>
    <script>
      window.onload = function() {
        const qId = (name) => document.getElementById(name);
        const qTg = (name) => document.getElementsByTagName(name)[0];
        const parent = qId('parent');
        const child = qId('child');
        const button = qId('button');

        parent.addEventListener('click', () => console.log('parent click 事件'), true);
        child.addEventListener('click', () => console.log('child click 事件'), true);
        button.onclick = () => console.log('button click 冒泡');
        button.addEventListener('click', () => console.log('button click 事件'), true);

        parent.onclick = () => console.log('parent click 冒泡');
        child.onclick = () => console.log('child click 冒泡');
      }
    </script>
  </body>
</html>

首先结论是对的。

sort 在 Chrome 和 Firefox 表现不同

Thu, 31 Mar 2022 10:18:10 +0800

首先，这个区别不算 BUG ，因为标准并没有规定该怎么排，但这个细微区别在实现一些特殊需求时需要被注意到。

注意下面一段代码：

var a = [1, 1, 1, 1, 1];
a = a.map((k, i) => ({ a: k, i: i }));
function cmp(a, b) {
  console.log(a.index, b.index);
  return a.a - b.a;
}
a.sort(cmp);

Firefox 的结果：

RxJs 初探 —— 基于事件为中心的编程

Sat, 02 Oct 2021 22:19:12 +0800

这是我学习 RxJs 的一些整理，其实 RxJs 是个 FRP 库，理解它应该从 FRP 来落脚，但一开始就讲函数式就太难了，而且放在初学者面前未免喧宾夺主了，所以我从事件开始讲，把函数式放到一边，然而这个其实也是 FRP 的重点——事件建模。

使用 Sharp 压缩图片、改变图片大小

Tue, 24 Aug 2021 18:20:53 +0800

因为业务需要就写了个图片压缩服务，顺带改变大小，因为用的是 nodejs ，于是我就选择了 sharp ，基于 libvips。

代码非常好写：

function resize(input, x, y) {
    return sharp(input)
        .resize(x, y, { fit: 'inside' })
        .toBuffer();
}

默认是裁剪模式，但我们要保持比例，因此用 “inside” 。因为我们还要调整一下质量，因为原始文件太大了。

函数式的骨感

Tue, 24 Aug 2021 17:22:43 +0800

最近读了点 rambda 的源码。函数式是个很诱人的概念，借助函数式，你可以以十分数学的方式解决一些问题。虽然如此，函数式对于现实来说仍然过于抽象，如果我们不去关注底层，那他确实是好的，然而一旦我们逼视其实现，我们就会发现它的窘迫与骨感，对于 js 来说尤是。

如何写一个深拷贝函数

Sun, 22 Aug 2021 14:52:42 +0800

跟小伙伴们讨论的时候发现，es6 的解构其实和 Object.assign 一样属于是浅拷贝。那么一个深拷贝到底该怎么写呢？我个人阅读了一下 lodash 、 rambda 、 rfdc 的实现，发现思想其实都是一样，由于 rfdc 放弃了对一些内容的支持，使得它的速度飞快，但这些内容实际上我是需要的，所以 rfdc 不考虑。剩下两个实现思想基本上是一样的，但是 lodash 的实现内容很多，没有 rambda 简洁，所以我以 rambda 为蓝本自己写了一个深拷贝函数。

如何编写一个 Chrome 扩展

Sun, 15 Aug 2021 14:48:54 +0800

最近工作需要用到 Chrome 扩展，于是就特意学习了一下。起初，我以为 Chrome 扩展权限挺大，操作起来应该挺方便的，但是，实际情况各种权限需要申请，而且有些操作还要不停的绕过，写起来也是挺烦的。

js 实现 DOM 监视

Sun, 07 Oct 2018 15:53:19 +0000

花了点时间做了 b 站评论区地址链接化，比较麻烦的是 DOM 监视。找了很多，最后还是采用了 Muatation 来进行事件监视。

给个文档地址：http://javascript.ruanyifeng.com/dom/mutationobserver.html 。

新写了两个油猴脚本

Fri, 05 Oct 2018 13:35:27 +0000

新写了两个油猴脚本针对 bilibili 。具体可以到我的 gist 上看，一个是针对番剧更新的，原本有一个番剧更新的脚本，但只是加了个标签而已，我又加了一些东西，方便查看，不过具体效果一般，而且番剧状态不能很好的体现，现没有找到好的 api 。另一个是针对 bilibili 动态的，动态不能点击链接很麻烦，于是简单写了脚本来实现将地址转换为链接。要点击进去才能有效，不过去除了带中文的链接。 bilibili 动态不能很好的选中也是一个问题，不过已经有脚本很好的实现了这个问题，所以我就不多写了。

将 router 的 js 混成一个

Mon, 27 Aug 2018 17:53:56 +0000

NeteaseCloudMusicApi 得重构，首先得把 router 目录下的一大堆给归拢为一个 js 方便 exports 。然而下面有九十多个文件，所以一个个复制粘贴是不现实的，更何况未来这些文件有改动，于上游一 merge ，这代码得改得老痛苦了。所以决定自己写一个小工具解决这个问题。

nodejs 的 import

Sun, 26 Aug 2018 20:29:41 +0000

nodejs 对 es 6 的支持目前并不完全，直接使用 import 不行，exports 也不行，可以用 babel 之类的编译， nodejs 10 可以尝试加上 flag ： –experimental-modules。

node --experimental-modules my-app.mjs

webpack 的 require 和 import 相关的一点问题

Sun, 26 Aug 2018 12:41:45 +0000

今天继续用 electron-vue 写 NeteaseCloudMusic 的第三方 app，用的 NeteaseCloudMusicApi 使用起来却很麻烦。不知道为什么之前可以正常使用，现在却不行了，摸索了好久，还是没能解决。不过还是有点收获的，接下来讲一讲。