为什么要用 CSS-in-JS？

1. 缺乏模块的概念
2. 缺乏作用域的概念【CSS 类名容易重复、覆盖】
3. 多选择器作用在同一个元素上、同一个选择器作用在不同的元素上，可能造成混乱
4. 废弃代码：经常性地会发生，改变了类名，老的类名旧样式扔在代码文件里不会去碰的情况
5. CSS 样式的顺序、继承、覆盖问题
6. HTML 和 CSS 实际是强耦合的 （改结构基本意味着改样式）
7. 选择器太过全能（啥都能选）
8. 基于状态的样式

此文包含：

1. reselect 源码分析
2. reselect 可能的问题（dependences 函数运行）
3. 首参 state 的注入，减少重复工作量

前言

redux / flux 要求采用返回新对象的形式，来触发数据更新、re-render，一般推荐的做法就是采用对象结构的方式：

1
2
3
4

return {
  ...state,
  enabled: true,
}

如果要更改 state.settings.profile.darkmode，大概就会变成这样：

1
2
3
4
5
6
7
8
9
10

return {
  ...state,
  settings: {
    ...state.settings,
    profile：{
      ...state.settings.profile,
      darkmode: true,
    }
  }
}

以上存在两个问题：

1. 如果 state 对象巨大（注意：对象巨大），在结构、拷贝 state 的过程中，耗时会较长
2. 如上更改 state.settings.profile.darkmode，要进行 “庞大”的工作

如何解决这两个在使用 redux 过程中可能存在的问题，便是此文讨论的点。

相应的此文，此文包含内容：

• 不可变（Immutable）数据

  • 新数据结构
    • facebook/immutable-js
    • swannodette/mori
  • 原生 JS 数据形式
    • rtfeldman/seamless-immutable
    • planttheidea/crio
    • aearly/icepick

• 不可变更新（Immutable Update）实用程序

  • mweststrate/immer
  • kolodny/immutability-helper
  • mariocasciaro/object-path-immutable
  • debitoor/dot-prop-immutable
• Immutable/Redux 互操作
  • gajus/redux-immutable
  • eadmundo/redux-seamless-immutable

先说结论，80% - 90% 的场景，直接使用 immer 即可

大纲

此文通过 React 实现一个三行计数器的四种写法

• 普通 写法
• MVC 写法
• Flux 写法
• Redux 写法

过程中分析各自对应的问题，以此梳理 MVC、Flux、Redux 脉络，附带

• Flux 源码分析
• Redux 源码分析

以此增强理解

以及此文所有内容，可在 flux-redux-demo 仓库 找到。

前言

前文 JavaScript & WebAssembly 解释、编译相关

提到了不少编译相关的内容，对应的延伸，想了解下：

1. 有哪些 JavaScript 引擎？
2. 跨平台 都有哪些形式？是怎么做到的？

对应的，也搜集了如下一些文章：

前言

因 前文 抽象语法树 AST 与 编译器 Compiler 整理了部分 抽象语法树 AST 与 编译器 Compiler 相关的内容，进一步地，会有一些问题产生：

1. JavaScript 在浏览器是怎么执行的（或者说浏览器是怎么解析的）？
2. JavaScript 为什么叫做解释型语言？
3. 解析器、解释器、编译器 分别是什么？
4. WebAssembly？

因而，找了以下一些文章：

准备工作

此文前，需要先阅读

1. 抽象语法树 AST 与 编译器 Compiler
2. babel 7 全套
3. Babel 6 插件手册 （PS：尽管大部分 API 已过时，但是大概的理念仍然适用）

babel 官方在 2018-08-27 发布了文章，babel 7 正式发布，距离 babel 6 相隔3年。

包含内容（官网cp）：

1. upgrade tool
2. JavaScript 配置文件 babel.config.js
3. 选择性的配置 overrides
4. TC39 提案 支持 @babel/proposals
5. jsx、typescript、flow 的支持
6. Babel 辅助函数的变化
7. 自动 Polyfill (试验) useBuiltins

详细内容可见：Babel 7 发布

此篇文章主要介绍 babel 7 相关 presets、plugins、@babel 下其他所有的 packages、babel 其他工具、以及 babel 插件相关，即 babel 全套（包含部分流程上的源码链接）

至于 AST 抽象语法树相关可见另一文 抽象语法树-AST-与-编译器-Compiler 内容。

the-super-tiny-compiler / 超级微小的编译器

此部分 the-super-tiny-compiler / 超级微小的编译器 内容，均摘取自 the-super-tiny-compiler-CN，先看完 the-super-tiny-compiler-CN 才有看后续的意义。

概要

大部分编译器的工作可以被分解为三个主要阶段：解析（Parsing），转化（Transformation）以及 代码生成（Code Generation）

1. 解析 将源代码转换为一个更抽象的形式。
2. 转换 接受解析产生的抽象形式并且操纵这些抽象形式做任何编译器想让它们做的事。
3. 代码生成 基于转换后的代码表现形式（code representation）生成目标代码。

文档

印记中文 - webpack 文档

推荐顺序：