V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
richards64
V2EX  ›  JavaScript

有 JS 或者 TS 的操作树的库吗?自己写起来感觉头都大了

  •  
  •   richards64 · 2023-10-26 22:49:45 +08:00 · 3907 次点击
    这是一个创建于 394 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目需要,需要完全通过前端来操作树。不是 DOM 树也不是树形组件,是下面这样的数据结构意义上的树:

    const tree = [
      {
        id: '1',
        title: '节点 1',
        children: [
          {
            id: '1-1',
            title: '节点 1-1'
          },
        ]
      }
    ]
    

    需要用到下面这些操作:

    • 增加节点
    • 删除节点
    • 修改节点
    • 移动节点,包括平级和跨层级移动

    拼拼凑凑勉强写了个能用的,但是总感觉还是很不放心。就像之前去看 lodash 的源代码一样,看起来很简单的功能,为了考虑周全各种状况,最后写出来的代码都比想象中长很多。

    所以有类似 lodash 这样的可以放心使用操作树的 JS 库吗?

    30 条回复    2023-11-03 00:30:46 +08:00
    nulIptr
        1
    nulIptr  
       2023-10-26 23:07:43 +08:00   ❤️ 2
    这不就是普通的业务代码吗,实在觉得自己写的不行就有请 chatgpt 吧
    kuber
        2
    kuber  
       2023-10-26 23:26:21 +08:00
    能压扁来处理吗?你是什么场景?
    Pastsong
        3
    Pastsong  
       2023-10-26 23:27:42 +08:00 via Android
    npm 库一大堆
    angrylid
        4
    angrylid  
       2023-10-27 01:47:11 +08:00 via Android
    你是要做类似资源管理器左侧目录那种功能吗
    gooin
        5
    gooin  
       2023-10-27 09:59:17 +08:00
    antd 呗
    SixGodHave7
        6
    SixGodHave7  
       2023-10-27 10:01:33 +08:00
    @nulIptr 确实,我个人觉得像这些基础逻辑用 gpt 比自己靠谱
    Leila233
        7
    Leila233  
       2023-10-27 10:01:35 +08:00
    之前 start 了一个库,感觉还不错,也比较简单: https://github.com/wintc23/js-tree-tool
    Coder89757
        8
    Coder89757  
       2023-10-27 10:20:32 +08:00
    0829ewlLuna
        9
    0829ewlLuna  
       2023-10-27 10:37:13 +08:00
    之前研究过 antd 的 treeSelect 组件,可以去看看他们的源码,你说的这几个场景都有覆盖,我是扒了他们的源码改改用的,使用到的场景是一个文档的目录页面,需要支持展开收起,以及文件目录的删除/平移/跨级移动。
    sx931210
        10
    sx931210  
       2023-10-27 12:08:01 +08:00
    火焰纹章好玩吗
    MrDavidJones
        11
    MrDavidJones  
       2023-10-27 12:08:49 +08:00 via iPhone
    NerbraskaGuy
        12
    NerbraskaGuy  
       2023-10-27 13:10:45 +08:00
    之前做项目,后端接入第三方数据之后数据清洗全放在了前端,也是这种树结构还好几层,各种展开 筛选 增删,弄麻了
    txzh007
        13
    txzh007  
       2023-10-27 13:43:52 +08:00
    ui 组件很多都支持,麻烦的是移动后的逻辑处理
    duan602728596
        14
    duan602728596  
       2023-10-27 14:00:25 +08:00
    只能多写测试用例覆盖一下了
    iOCZ
        15
    iOCZ  
       2023-10-27 14:02:09 +08:00
    用宽度优先遍历打平即可
    ChefIsAwesome
        16
    ChefIsAwesome  
       2023-10-27 14:05:07 +08:00 via Android
    浏览器环境的话,你直接创建一个 dom 元素,把值写在 attribute 上,这样那一堆 dom 操作节点的方法你都能用了。
    Nazz
        17
    Nazz  
       2023-10-27 15:48:28 +08:00
    练一练递归
    darkengine
        18
    darkengine  
       2023-10-27 16:01:11 +08:00
    这个树操作打算支持拖拽吗?
    HelloWorld556
        19
    HelloWorld556  
       2023-10-27 16:03:33 +08:00
    我是问的 gpt ,写出来的非常好用
    dudubaba
        20
    dudubaba  
       2023-10-27 19:54:14 +08:00
    先递归打平,增删改完再递归还原。嗖一下,比引入库快多了。
    coderHu
        21
    coderHu  
       2023-10-27 23:21:47 +08:00
    learningman
        22
    learningman  
       2023-10-28 02:31:21 +08:00 via Android
    基础不牢建议转行
    HaroldFinchNYC
        23
    HaroldFinchNYC  
       2023-10-28 03:50:48 +08:00
    @NerbraskaGuy 那你们后端太懒了
    lisxour
        24
    lisxour  
       2023-10-28 09:13:54 +08:00
    @txzh007 对数据处理总不能用一个 ui 库去完成吧。。。
    meteor957
        25
    meteor957  
       2023-10-28 09:32:06 +08:00 via Android
    @learningman 你的建议没人会听,你的建议毫无价值
    dayeye2006199
        26
    dayeye2006199  
       2023-10-28 11:29:58 +08:00 via Android
    Leetcode 多刷刷
    learningman
        27
    learningman  
       2023-10-28 12:55:39 +08:00
    @meteor957 那就不叫建议好了,改叫早晚转行比较好
    txzh007
        28
    txzh007  
       2023-10-30 10:04:25 +08:00
    @lisxour 数据是数据,ui 是 ui,是 ui 改变数据,还是数据改变 ui,拖拽操作这些 ui 组件都会有拖拽回调
    humbass
        29
    humbass  
       2023-11-01 02:49:15 +08:00
    听说这个 https://www.npmjs.com/package/tree-model 就是楼主想要的
    enchilada2020
        30
    enchilada2020  
       2023-11-03 00:30:46 +08:00
    @ChefIsAwesome 角度刁钻!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1045 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 19:30 · PVG 03:30 · LAX 11:30 · JFK 14:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.