前言

本次在做低代码平台时，遇见了一个稍微有些复杂的业务场景，需求描述：

1. 根据用户拖拽表单生成的JSON数据(本次采用了FormGenerator去生成JSON数据)，生成对应的所有组件的下拉列表，并在流程图的边（节点连接线）上添加条件判断。
2. 当用户点击流程图的边时，生成该边上对应的所有组件的下拉列表，在点击某个组件的选项后，生成对应组件的下拉列表组件，在用户取消选择后，对应组件的下拉列表组件随之消失。
3. 针对不同组件对应的下拉列表，要求有不同的条件判断，例如：数字类型的需要有范围选择、大小判断、为空不为空，等条件；文本组件有包含不包含，等条件。
4. 当用户选择后，自动保存到当前边对应的JSON数据，若用户的选择无效，则不保存。
5. 要求能够回显用户选择的数据，即点击不同边时，回显该边上JSON对应的所有下拉列表组件。

经过梳理后，其实逻辑看起来也不是特别复杂，不过当时确实是有点被难倒了，主要原因就是一些细节性的问题没有考虑到，然后流程图也需要去学习如何操作，时间上有些紧，同时也在思考如何写能够更便于维护。其次就是没有一个清晰的该处业务的流程思考，不过后来捋了捋也就差不多啦，所以说三思而后行啊。

三思而后行：多思考几遍，自己又觉得自己行了哈哈

最近在准备事件循环的分享时，对于如何实现准确的计时有了点兴趣，因为在浏览器中，setTimeout/setInterval 并不是一个准确的计时，是存在延迟的。那么思考我们在双十一抢东西的场景，他们是如何做倒计时的呢？

前言

学习了这么长的时间，设计模式却还是浅尝辄止，而且最近在回顾Vue知识的时候，发现了很多常见的设计模式：观察者啊，单例啊什么的。让我意识到，如果想要去读懂Vue底层的话，设计模式的思想是必不可少的。
这就从简单的单例模式开始，学习学习设计模式

之前有被人问到过跨域这块的东西，当时答得有点模糊，再回顾一下

梳理Vue2底层执行流程

对于MVVM的实现原理之前其实就知道了，但是一直没有自己去尝试实现过，今个在这里实现一下，也加深下印象

简单的来说，就是将引用数据对象的对象作为订阅者，存放在数据对象的订阅者队列中或指定的缓存位置，当数据对象发生变化时，通过遍历订阅者队列通知订阅者数据的变化。

这种模式的存在解决了一些场景：例如需要轮询是否发生变化，这对性能无疑是一种浪费（但轮询可以做到主动索取，能避免通知失败的情况）

直观上来说，我仍然认为opacity与回流/重排没有半毛钱关系，但chrome控制台的性能分析报告显示确确实实出现了布局相关的渲染流程，但似乎是不确定的，存在某些契机。这太反直觉了，网上的资料也没有特别正确且直观的说明。所以下面只能根据个人推测来理解这个现象

牢记之所以使用 opacity 和 transform 等元素，最终是为了尽可能降低浏览器的计算成本，这一理论是正确的。

结论是，关于opacity的测试分为三种情况，分别是：

1. 触发回流（Layout）=>重绘（Paint）=>合成（Composite Layers）
2. 跳过回流和重绘，直接合成处理
3. 触发重绘=>合成

案例如下

TypeScript里的类型兼容性是基于结构类型系统的，只要二者的结构组成相同，就认为二者属于统一类型

1
2
3
4
5
6
7
8
9

interface Pet {
  name: string;
}
class Dog {
  name: string;
}
let pet: Pet;
// OK, because of structural typing
pet = new Dog();

三斜线指令是包含单个XML标签的单行注释。 注释的内容会做为编译器指令使用

仅可放在包含它的文件的最顶端。一个三斜线指令前面只能出现单行或多行注释，包括其他的三斜线指令。否则被当为普通注释

/// <reference path="..." />

用于声明文件间的依赖

当使用–out或–outFile时，它也可以做为调整输出内容顺序的一种方法。 文件在输出文件内容中的位置与经过预处理后的输入顺序一致

预处理输入文件

编译器通过预处理解析所有三斜线指令，将额外的文件加到编译过程中。

过程从一些根文件开始，它们在命令行中指定的文件或是tsconfig.json中的files列表里的文件。这些根文件按指定的顺序预处理。在一个文件被加入列表前，它包含的所有三斜线引用都要被处理，还有它们包含的目标。 三斜线引用以它们在文件里出现的顺序，使用深度优先的方式解析

一个三斜线引用路径是相对于包含它的文件的，如果不是根文件

错误

引用不存在的文件会报错。 一个文件用三斜线指令引用自己会报错。

使用 –noResolve

三斜线引用会被忽略；它们不会增加新文件，也不会改变给定文件的顺序

/// <reference types="..." />

指令声明了对某个包的依赖。

对这些包的名字的解析与在import语句里对模块名的解析类似。 可以简单地把三斜线类型引用指令当做import声明的包

仅当在你需要写一个d.ts文件时才使用这个指令。

当且仅当 结果文件中使用了引用的包里的声明时才会在生成的声明文件里添加/// <reference types="..." />语句

若要在.ts文件里声明一个对@types包的依赖，使用–types命令行选项或在tsconfig.json里指定

/// <reference no-default-lib="true"/>

把一个文件标记成 默认库。在lib.d.ts文件和它不同的变体的顶端看到这个注释

这个指令告诉编译器在编译过程中 不要 包含这个默认库（比如，lib.d.ts）。 这与在命令行上使用--noLib相似

当传递了--skipDefaultLibCheck时，编译器只会忽略检查带有/// <reference no-default-lib="true"/>的文件

/// <amd-module />

指令允许给编译器传入一个可选的模块名

1
2
3

///<amd-module name='NamedModule'/>
export class C {
}

这会将NamedModule传入到AMD define函数里