为什么要用 CSS-in-JS?

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

前言

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 过程中可能存在的问题,便是此文讨论的点。

相应的此文,此文包含内容:

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

阅读全文 »

前言

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

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

因而,找了以下一些文章:

阅读全文 »

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 相关 presetsplugins@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)生成目标代码。
阅读全文 »