zhjs

toolkit for frontend （前端工具集）

Important

原包名为 zhjs, 即将在 0.2.0 版本之后改为 h2o

文件选择器

使用方法

const selector = zhjs.useFileSelector({
  multiple: true,
  // 参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#accept
  accept: ".jpg,.png",
});
selector.openFileDialog().then((files) => {
  // TODO: use files here
});

数组转树

使用方法

const arr = [
  { id: 10, pid: 9 },
  { id: 9, pid: 5 },
  { id: 8, pid: 5 },
  { id: 7, pid: 2 },
  { id: 6, pid: 1 },
  { id: 5, pid: 1 },
  { id: 4, pid: 1 },
  { id: 3, pid: 0 },
  { id: 2, pid: 0 },
  { id: 1, pid: 0 },
  { id: 0, pid: null },
];
// output: 树形结构
const tree = zhjs.arrayToTree(arr, { parentProperty: "pid" });
// getRootNode
console.log(tree.getRoot());
// getLevelChildren
console.log(tree.getLevel(1));
// output 1 2 3
console.log(tree.find(9));
// output { id: 9, pid: 5 }
console.log(tree.sort((a, b) => a.id - b.id));
// sort by node.id, from low to height
console.log(tree.getRoot().flat());
// return flat tree nodes array

array工具方法

iife模式下工具方法被挂载在全局zhjs_array变量上。

• zip 创建一个分组元素数组，其中第一个包含给定数组的第一个元素，第二个包含给定数组的第二个元素，依此类推。

import { zip } from "zhjs/array";

zip(["a", "b"], [1, 2], [true, false]);
// => [['a', 1, true], ['b', 2, false]]

TODO:

• Tree增加update方法 传入数组对整棵树进行动态更新

changelog

• 0.1.4 修复文件选择器初始化时配置项不生效的问题
• 0.1.5 调整arratToTree返回类型为Tree 增加Tree类型的公开方法getRoot和getLevel
• 0.1.6 修复 Tree.getLevel无法获取0层节点 的问题 增加Tree类型的公开方法find用于获取给定customID的节点
• 0.1.7 增加Tree.sort公开方法，对每个children进行排序，参考Array.sort 增加Tree.getArray方法，获取树的源数组
• 0.1.8 增加TreeNode.flat方法，返回打平后的TreeNode数组 修复Tree根节点如果在给定的源数组中存在时，不能正确往TreeNode.data中插入数据的问
• 0.1.9 增加Tree模块的单元测试 增加Tasker类 增加FileSelector.dispose手动释放内存的方法 修复FileSelector类取消弹窗事件无法触发的问题
• 0.1.10
  修复FileSelector.openFileDialog返回的文件对象延迟之后被释放的问题