根据组件类型与条件动态添加下拉框及选项

前言

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

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

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

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

阅读更多

秒杀倒计时(准确计时)

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

阅读更多

类型兼容

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函数里

JSX

一种嵌入式的类似XML的语法。 它可以被转换成合法的JavaScript。常见的有React,博客所用到的库为inferno也是jsx。

阅读更多

枚举类型

枚举可以清晰地表达意图或创建一组有区别的用例。TypeScript支持数字的和基于字符串的枚举

阅读更多

声明合并

可以在类型层面上描述JavaScript对象的模型

声明合并指指编译器将针对同一个名字的两个独立声明合并为单一声明。 合并后的声明同时拥有原先两个声明的特性。 任何数量的声明都可被合并;不局限于两个声明

阅读更多