MVC 和 MVVM 是比较常用的前端设计模式，你能清楚地说出 MVVM 到底比 MVC 好在哪里吗？我最近了解了一下 SwiftUI 里的 MVVM 是怎么应用的，觉得应该记录一下自己的想法，对这两种模式的对比和优缺点做个总结。

有状态组件 StatefulWidget 把可变的状态变量放到了 State 对象中，参照 StatelessWidget 的方式，把 build() 方法放到 StatefulWidget 中行不行？比如这样：

因为 setState() 最后会调用 markNeedsBuild()，Flutter 会调度使组件 rebuild，所以状态变量的改变不是必须写在 setState() 的回调里面，只需要最后执行一下 setState() 也可以达到刷新界面的效果。

跑起来后代码不会报错，Text('$_count') 显示结果是 1，看来 build() 调用 setState() 没啥问题呀。小改一下，来看看这个：

React 和 Vue 中都有虚拟 DOM 的概念，我们应该如何理解和掌握虚拟 DOM 的精髓呢？我推荐大家学习 Snabbdom 这个项目。Snabbdom 是一个虚拟 DOM 实现库，推荐的原因一是代码比较少，核心代码只有几百行；二是 Vue 就是借鉴此项目的思路来实现虚拟 DOM 的；三是这个项目的设计/实现和扩展思路值得参考。

先来举个简单的栗子，wepack 设置中有 3 个入口文件：a.js、b.js 和 c.js，每个入口文件都同步 import 了 m1.js，不设置 splitChunks，配置下 webpack-bundle-analyzer 插件用来查看输出文件的内容，打包输出是这样的：

JS 中所有对象的原型链缺省都继承自 Object.prototype，原始值有包装类型。所以 number、string、boolean、symbol、对象和函数都可以赋值给 Object 类型。

先来看一道示例题。按照以往的理解，我以为输出顺序是 2 1 3 4。然后通过调试发现 promise1 在初始化后状态依然是 pending，感觉自己在理解 Promise 微任务方面还是存在不足。研究了下 ECMA 规范，终于把这个问题搞清楚了。

最近重温了一下 Q/Promise 的设计讲解，结合自己的理解和一些小优化，决定也来写一篇手写 Promise 的文章。本文的内容适合对 Promise 的使用有一定了解的童鞋，因为过程中不会过多解释 Promise 的基础操作。我们从一个基础版本开始，渐进式地完成这个 Promise，在过程中分享我的理解和观点。内容可能有点长，废话不多说...

我们在开发中会经常使用 Align 组件来定位子组件的位置。通常使用的是几个常用的相对位置，比如：alignment: Alignment.bottomRight，右下角这种。最近看官方文档关于 alignment: Alignment(x, y) 在 Align 中的计算解释好像有点不对，再结合相关的源码，总算是弄清楚了。然后发现网上的教程解释大多有错误，下面就来分...

这里指的通用套路是把递归执行改为在一个函数中循环执行。出于好奇心想找出一种把递归改为非递归的通用方式，并学习其中的思路。在网上找了几篇文章，结合函数调用栈的理解，感觉自己总结的应该比较全面了，所以记录下来跟大家交流下。

Redux 是一个非常经典的状态管理库，在 2019 年接近年底的时候这个项目用 TypeScript 重写了。网上有很多分析 Redux JavaScript 代码实现的文章，然而 TypeScript 部分的却很少。我在看重写的 TypeScript 代码时发现有很多地方比较有意思，也启发我提炼了一些东西，所以整理成了这篇博客，欢迎一起来讨论和学习。

Hi 大家好，假期快乐鸭~ 咳咳，在前面两篇我们从设计出发讲了一下 Vue2 的响应式原理和实现，还有计算属性的详细解析等等。这一篇呢就是这个系列的最后一篇了，我们来聊一下侦听属性和 vm.$watch，再回到设计来总结一下 Vue2 的响应式。如果没有看过前面两篇的朋友先看了前面的再来哈，传送门：Vue2响应式原理解析（一）...

Hi，大家好~ 在上一篇 Vue2响应式原理解析（一）：从设计出发 中我讲了一下 Vue2 是如何抽象和设计响应式的， data 是如何实现响应式的，包括依赖收集和双向依赖记录的设计思路和关键代码。在这一篇中，我们来一起康康 Vue 中非常强大的响应式功能：计算属性。我主要会从功能需求的角度来分析计算属性的实现和关键代码，...

Vue 的响应式系统是 Vue 最有意思的特性之一，data 只需要返回一个普通的字面量对象，在运行时修改它的属性就会引起界面的更新。现在都是数据驱动界面开发，这种设计对于程序员开发来说非常爽，关注点只用放在数据变化的逻辑上。并且 Vue 把这个特性抽象成了一个独立的 observer 模块，可以单独剥离使用，比如小程序开发...

在微信小程序开发中，使用 iconfont 需要引用本地的文件。每次 iconfont 项目发生变更时，需要去下载最新的 css 文件，并且还要手动删除掉里面对于小程序无用的 src url(*) 兼容节点，然后保存为 wxss 文件。整个过程比较繁琐，这个小工具可以帮你自动完成这些工作。项目地址：[链接]

本质上来说 hook 模式类似与责任链模式，hook 建立了特定事件与事件处理程序之间的一对多关系，当事件需要处理时，沿着事件处理程序链条挨个执行。但不同的设计可能会有不同的处理行为，在本文中，链条靠前的处理程序有权决定是否需要交给下个处理程序接着处理还是直接返回最终结果。

Babel 转码的配置是每位前端童鞋在日常工作中都会遇到的。刚开始我也是在网上搜索各种配置方法，升级到 Babel 7 的时候又折腾了一把，所以决定把自己的心得和理解记录下来，希望能帮助到有需要的童鞋。

后续的处理是需要遍历这整个数组去完成某些功能，不关心这些字符串的相对顺序。但我们在维护这个字符串数组的时候会感觉有些不方便，比如太长、没有分类等。

在上一篇中我们聊过了 JS 类型转换的规则和我发现的一些常见书籍中关于类型转换的一些小错误，当碰到显示类型转换的时候大家可以按照这些规则去拆解出答案。但 JS 中存在一些很隐晦的隐式类型转换，这一篇就来谈下我对隐式类型转换的一些总结。

Javascript 里的类型转换是一个你永远绕不开的话题，不管你是在面试中还是工作写代码，总会碰到这类问题和各种的坑，所以不学好这个那是不行滴。关于类型转换我也看过不少的书和各种博客、帖子，也查过规范和做过各种测试，这里就谈谈我的总结和理解吧。

问题描述 先来看一个需求场景： 上图中需要实现在水平方向上子元素之间、子元素和父容器边框之间的间距要相等。 实现的方法有很多，我们这里要讨论的是：如何简洁地使用 Flex 布局来实现？我这里采用的方法是：使用自动的外边距在主轴上对齐。 自动的外边距在主轴上对齐 我们先来看一下 MDN 关于这个的解释： ... 自动的...

随着 Web 应用的复杂程度越来越高，很多公司越来越重视前端单元测试。我们看到的大多数教程都会讲单元测试的重要性、一些有代表性的测试框架 api 怎么使用，但在实际项目中单元测试要怎么下手？测试用例应该包含哪些具体内容呢？

这位楼主说他觉得 this.x 的值不是3，下面有网友说把代码粘贴到 chrome 控制台一试就是这结果没错，后来楼主说是他想错了。我也顺便把代码粘贴到 chome 下执行后答案也确实是3。

近两年来一直在关注 React 开发，最近也开始全面应用 TypeScript 。国内有很多讲解 React 和 TypeScript 的教程，但如何将 TypeScript 更好地应用到 React 组件开发模式的文章却几乎没有（也可能是我没找到），特别是 TS 的一些新特性，如：条件类型、条件类型中的类型引用等。这些新特性如何应用到 React 组件开发？没...