前端 on Bigshans' Blog

Vue 的响应式原理

Wed, 04 Mar 2026 19:46:28 +0800

Vue 3 使用 Proxy 是一大创举，它成功解决了 Vue 2 无法追踪新增属性的问题。不过，仅仅是如此吗？不如我们用简单的代码实现一个 reactive 看看。

function reactive(target) {
  return new Proxy(target, {
    get(target, key, recevier) {
      return Reflect.get(target, key, recevier);
    },
    set(target, key, value, recevier) {
      return Reflect.set(target, key, value, recevier);
    }
  });
}

这里，Reflect 和 Proxy() 是配套的，等同于我们直接对 target[key] 进行操作，但用 Reflect 更加方便，也更加安全。我们可以通过在拦截器层面增加 console.log() 来查看效果。

BFC 简述

Sun, 06 Aug 2023 19:09:10 +0800

BFC 指块格式上下文。格式上下文定义了一个元素内部如何排布，以及与外部元素间如何排布。BFC 即定义了块元素的格式上下文。

默认情况下，<html> 为块格式上下文。块元素的子元素将按块排布，或者按行排布，如果出现混合排布的情况，则会将内联元素用匿名块包裹起来，然后按块排布。同时，匿名块不能被 CSS 指定，不受 CSS 样式影响。

如何正确的替换 HTML

Sat, 18 Feb 2023 14:08:26 +0800

算是私人页的一个 BUG ，之前没有注意到。使用 innerHTML 进行替换后，替换内容内所有的 script 都失效了，这是符合浏览器预期的，可见 MDN 。

Although this may look like a cross-site scripting attack, the result is harmless. HTML specifies that a <script> tag inserted with innerHTML should not execute.

CSS 盒子模型

Fri, 13 Jan 2023 09:27:13 +0800

一个 HTML 文档在浏览器内将会被解析为一棵文档树，这是众所周知的。 CSS 的盒子模型则描述了文档上的每一个节点所生成的模型，这是 CSS 布局排版的基础。

标准盒型

盒子模型示意图

每一个盒子都一块内容（content）区域，围绕内容从内向外分别是内边距、边框和外边距（padding 、 border 、 margin）。

CSS 三栏布局

Tue, 10 Jan 2023 09:27:35 +0800

三栏布局是比较经典的 CSS 布局，特点就是中间内容自适应，首先渲染，其次左右内容大小保持不变分布两旁。结构上打破了一般意义上的左中右的顺序，变成了中左右的顺序，但视觉展示仍然要求是左中右的布局，于是，如何将中间内容放回到中间，并重新分布左右则是此类技术的核心所在。在 flex 之前，前端多用 float 实现，出现了双飞翼和圣杯布局两种实现，现在我们可以用 flex 来很简单的实现。

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 的结果：

Angular 简易入门

Mon, 06 Dec 2021 09:29:04 +0800

因为最近重新用了用 Angular ，在有了 Vue 和 React 的使用经验之后，对 Angular 又有了新的理解。 Angular 是真正意义上与 Vue 和 React 区分的框架，因为其思想与二者截然不同。不过我不讨论这个，我是来讲 Angular 入门。

drop-shadow 隐藏原始图像

Fri, 03 Dec 2021 16:32:50 +0800

看到张鑫大佬的这篇文章很有意思。

张鑫大佬讲述了如何使用 filter 中的 drop-shadow 实现 png 图标改颜色的技巧，本质上是利用阴影偏移实现的。不过我有一点我一直没有搞明白就是如何将原始图像遮住。

Nginx 按路由分流请求

Tue, 30 Nov 2021 14:04:23 +0800

一个很恶心的需求，到部署最后部署的时候才发现问题很大，但只好死马当活马医了。

我们目前搞了两个项目，其中一个项目是传统 Vue 项目，另一个是 Angular SSR ，刚开始的时候，我们设想两个项目会由 Nginx 根据路由进行分流请求到不同项目，这样我们就可以不用将全部项目改造为 SSR 。设想很美好，但是我们漏考虑了一个点，我接下来就会说。

为什么 overflow 能够清除 float

Sun, 07 Nov 2021 17:27:40 +0800

有些学问还是自己研究最为靠谱，像是 overflow 为什么能清 float ，都知道是 BFC ，但是为什么呢？因为在文档流中，普通的 div 其实也是 BFC ，所以，理论上添加 overflow 为非 visible 的时候，它也仍然是 BFC 啊？所以，问题在哪里呢？