跳到主要内容

· 阅读需 5 分钟
黄振敏

Taro 2

Taro 2 是一个重编译时轻运行时的框架,主要是通过编译时的转换来实现跨端能力。

alt Taro2 它绑定了 React 的 DSL, 因此可以通过 React 语法来写小程序

  • 编译时: 通过 babel 插件将 React 语法转换成小程序原生的语法
  • 运行时: 主要处理生命周期、事件、setData等, 运行时和 React 并没有关系

alt Taro2 静态 template 转动态 JSX 相对简单, 但是反过来却十分困难。这是因为 JSX 过于灵活, Taro 2 采用穷举法来处理对 JSX 的适配, 工作量大。

Taro2

Taro 3

Taro 3 是一个重运行时轻编译时的框架,主要是通过运行时的转换来实现跨端能力。

alt Taro3

通过 Webpack 的 ProvidePlugin 插件,注入到小程序的逻辑层。

alt Taro3

· 阅读需 8 分钟
黄振敏

类型

原始类型

  • boolean: 表示布尔值 (true 或 false)。
  • number: 表示数字(支持整数和浮点数)。
  • string: 表示字符串。
  • null: 表示 null 值。
  • undefined: 表示 undefined 值。
  • symbol: 用于创建唯一值的类型。

复杂类型

  • 大整数类型: bigint
  • 数组类型:[]Array<T>
  • 对象类型:{}
  • object 类型:object, 表示非原始类型
  • Object 类型:所有类型(包括原始类型)的基类
  • 元组类型:[T1, T2, ...]
  • 枚举类型:enum
  • 函数类型:(args) => returnType
  • 类类型:class
  • 接口类型:interface
  • 泛型类型:<T>
  • 类型别名:type
  • any 类型:any
  • unknown 类型:unknown
  • void 类型:void
  • never 类型:never
  • Promise 类型:Promise<T>

· 阅读需 7 分钟
黄振敏

概述

动态规划(Dynamic Programming,简称DP)是一种算法设计思想,用于解决具有重叠子问题和最优子结构性质的问题。它通过将复杂问题分解为较小的子问题,避免重复计算相同的子问题,从而提高计算效率。
基本思想可以概括为以下几个步骤:

  1. 定义子问题:将原问题分解为多个子问题。通常,子问题的解能够组合成原问题的解。
  2. 确认状态:定义问题的状态,一般通过一个或多个变量来描述当前的子问题。例如,在求解最长公共子序列的问题中,状态可以用两个变量来表示序列的长度。
  3. 状态转移方程:找出子问题之间的关系,即状态转移方程。这些方程描述了如何从一个或多个子问题的解得到原问题的解。
  4. 初始条件和边界情况:确定动态规划的初始条件,即最基本的子问题的解,以及边界情况。
  5. 求解和优化:通过迭代或递归方式求解所有子问题,得到最终的解。

· 阅读需 4 分钟
黄振敏

概述

比起 antv/x6 的 v1版本,antv/x6 v2 提升了渲染性能(异步),解决了 v1 时期存在的 react 节点挂载问题。

依赖调整

业务模块的包(hmde/hlod)不再单独安装 antd/x6 依赖,全部抽离到公共模块(apaas)。统一让公共模块进行 x6 打包,业务模块采用联邦的方式进行引入。
新的引入方式如下:

import { Graph } from '@apaas/components/AntvX6';
import { Dnd } from '@apaas/components/AntvX6/plugins';

如需补充导出,到公共模块对应的组件下导出,然后在子模块导入使用

· 阅读需 8 分钟
黄振敏

阅读本篇需要对二叉树及其结构有基本的了解。

概念

堆一定是一颗完全二叉树, 按排序大小规则主要分为 2 种类型————最大堆最小堆

  • 最大堆:根节点的值大于等于左右子节点的值。
  • 最小堆:根节点的值小于等于左右子节点的值。
node

总结:最大堆和最小堆的根本区别在于根节点的最值情况。

Heap 类设计

在堆算法解题中,一般都需要设计一个 Heap 类,用于实现最大堆最小堆的通用操作。

· 阅读需 23 分钟
黄振敏

X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建流程图、DAG 图、ER 图等图应用。

本文适用于有一定 antv/x6 使用基础的开发者。

实现效果

alt 实现效果

实现效果示意图

业务对象 ER 图用来表示不同领域下不同业务对象之间的关系,如上图所示:

  • 一张卡片代表一个节点(业务对象),每个节点下有多个字段。
  • 节点间关系,使用带有向箭头的边表示。不同关系会有不同的边颜色对应展示。
  • 点击选中某个节点,与该节点所关联的边都会加粗高亮。
  • 存在操作按钮,可动态切换每个节点内展示的关联/非关联字段。
  • 可通过按钮操作业务对象的增删改查。
  • 可拖拽节点,但是不能自建连线。
  • 自动布局。

· 阅读需 6 分钟
黄振敏

三类空间

  • 命名空间
    声明的分类,不是具体的实体。一个命名空间内可以包含值或类型。对命名空间建立应用需要使用 import 语句,如果使用 const、let 或 var 会使新的实体不再具有命名空间的属性。编译成 JS 代码后会被清除。
  • 类型空间
    描述一个值的类型。常见有 type、interface、class、enum 等。编译成 JS 代码后会被清除。
  • 值空间
    真实可参与运算的值。常见有变量、对象、数组、class、enum 等。编译成 JS代码后会被保留。

操作符

  • typeofinstanceof:返回更详细的类型
  • keyof:返回一个对象的属性名称的字符串数组
  • O[K]:返回对象 K 的值
  • [K in O]:逐一映射 O 的类型
  • extends:泛型、类型别名、函数参数、联合类型的条件类型判断
  • infer:定义类型变量
  • readonly :只读
  • ?:可选
  • -?:去除类型的可选属性
  • !: 非空断言
  • =: 泛型的默认值
  • as: 类型断言
  • is: 类型谓词,辅助类型推断

· 阅读需 22 分钟
黄振敏

基础使用

import React, { useState, useCallback, useRef } from "react";
import MonacoEditor from "react-monaco-editor";
import * as monaco from "monaco-editor";

const Demo = () => {
const [value, setValue] = useState("");

const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>(); // 编辑器实例
const monacoRef = useRef<typeof monaco>(); // monaco 实例

// 获取编辑器实例
const editorDidMountHandle = useCallback(
(editor: monaco.editor.IStandaloneCodeEditor, monacoIns: typeof monaco) => {
editorRef.current = editor;
monacoRef.current = monacoIns;
},[]);

return (
<MonacoEditor
language="javascript"
height="100%"
theme="vs"
value={value}
onChange={setValue}
options={{
roundedSelection: false,
cursorStyle: "line",
wordWrap: "on",
}}
editorDidMount={editorDidMountHandle}
/>
);
};

editorInstancemonacoInstance 的区别:

  • editorInstance:主要作用于编辑器上操作的方法,例如编辑器写入操作等。
  • monacoInstance:主要是编辑器语言相关的内容,例如变量提示、鼠标悬浮提示等。