推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
hd7771

怎么利用 js 在树上交互

  •  
  •   hd7771 · Jan 22, 2017 · 5405 views
    This topic created in 3571 days ago, the information mentioned may be changed or developed.

    比如我有一棵树,树上有些节点是让用户决定的变量。 如果没有限制就是一路 dfs 执行到底。 但是有时候根据用户决定的值一些子树不能进去。 最蛋疼的来了,用户点一下鼠标,往下执行一下,由于是前端,要考虑交互,鼠标点击是与函数绑定的,处理一句就要跳出函数,然后递归往前进一步还是什么。总是感觉好蛋疼。

    31 replies  •  2017-01-23 17:06:10 +08:00
    think2011
    think2011
    Jan 22, 2017❤️1
    1
    所有你需要事件委托代理?
    hd7771
    hd7771
    OP
    Jan 22, 2017
    2
    @think2011 我定义了一种制作 web 上 galgame 的语言,然后用 c++翻译成 js ,单线流程我已经试验成功了(链表),但是加了选项之后就是树结构,按理说差不多,但是我不知道每次调用监听函数怎么知道自己在树上跑到哪里了以及之前跑过哪些点,怎么回溯。。
    事件委托代理是监听给父元素?不过我这个问题和 DOM 关系好像不打。。望大佬指点。
    hd7771
    hd7771
    OP
    Jan 22, 2017
    3
    @think2011 其实主要是回溯蛋疼,,其他的可以标记
    liuhaotian
    liuhaotian
    Jan 22, 2017❤️1
    4
    用一个栈模拟 dfs ?
    hd7771
    hd7771
    OP
    Jan 22, 2017
    5
    @liuhaotian 对的。。。可以先预处理到栈里,之后就很好写了。。感谢大佬
    hd7771
    hd7771
    OP
    Jan 22, 2017
    6
    @liuhaotian 不对应该是运行一个语句丢一个到栈里。。我数据结构学炸了。
    xiaoxiuaoliang
    xiaoxiuaoliang
    Jan 22, 2017❤️2
    7
    我看标题还以为爬到树上用 js 搞智能硬件。。。
    think2011
    think2011
    Jan 23, 2017
    8
    @hd7771 应该是我误会了,纯前端,没能理解需求。
    zwhu
    zwhu
    Jan 23, 2017
    9
    其实就是 dom 树?

    有 childElements 和 parentElement 就可以了吧,大不了再搞个 siblingsElement
    zwhu
    zwhu
    Jan 23, 2017
    10
    dom 树的这种数据结构是啥,表示没大学没上过课不知道怎么表述..

    不过按照你的要求可以回溯,在生成树的时候加个 parentNode 完全可以搞定了吧
    Mirana
    Mirana
    Jan 23, 2017❤️2
    11
    还以为你们两个人蹲在树上写 js 。。。。
    hd7771
    hd7771
    OP
    Jan 23, 2017
    12
    @zwhu 大概就是我有很多要执行的语句,树上每个节点都有一句,有些是给用户决定赋值的,有些就是给用户看的。然后用户点击一下鼠标往后执行遇到有 stop 语句停下来,有些节点根据某些值决定进不进去。。。如果没有用户实时决定就是讲编译的书上前几章讲的 ast 树,,在一般的 ast 树上兄弟之间加单向边用栈模拟应该效果差不多。。
    hd7771
    hd7771
    OP
    Jan 23, 2017
    13
    @zwhu 我整个网页就一个元素<div id = "game area"> </div>。。。我指的就是普通的树,,
    des
    des
    Jan 23, 2017 via Android
    14
    @hd7771 你说的是 DFS 的树?好多人都以为是 DOM 树。。
    akring
    akring
    Jan 23, 2017
    15
    歪楼,建议找个梯子,上树方便
    des
    des
    Jan 23, 2017 via Android❤️1
    16
    @hd7771 要不试试用生成器函数?
    zwhu
    zwhu
    Jan 23, 2017
    17
    @hd7771

    我说的就是你的数据结构做成 dom 树那种结构就能满足你的需求,前提是你明白 dom 树的结构是啥样的。。

    在任何一个节点都可以通过 parentElement 向上找,也可以通过 siblingsElement 找兄弟节点,同样也可以通过 childElement 找子节点
    zwhu
    zwhu
    Jan 23, 2017
    18
    说的好像 DOM 树就不能用 DFS 算法似地...
    chengluyu
    chengluyu
    Jan 23, 2017❤️1
    19
    yield ? 或者手动实现一个 coroutine ?
    hd7771
    hd7771
    OP
    Jan 23, 2017
    20
    @zwhu 我用的一个叫做 pixi.js 的图形库。。。没有看过源码,,不知道内部怎么实现的。。它给的样例就没能让你操纵 DOM 树,只让你在一个框框里面加东西。。
    hd7771
    hd7771
    OP
    Jan 23, 2017
    21
    @zwhu 而且它也是用一个叫做 webGL 的东西弄得,我不明白原理还是调用它的 api 比较好吧。
    mjhlybmwq
    mjhlybmwq
    Jan 23, 2017❤️1
    22
    返回一个函数就可以了
    hd7771
    hd7771
    OP
    Jan 23, 2017
    23
    @zwhu 其实这种翻译成 html 再用 js 去控制好很多,,,就是不知道不调用图形库就靠 css 能不能做出游戏的效果。。
    zwhu
    zwhu
    Jan 23, 2017❤️1
    24
    @hd7771 - -。我说的 dom 树,是一种数据结构,不是真实的渲染出来的节点。

    因为我没学过数据结构这门课,不懂怎么表达。其实按照你的需求...回溯而已,给子节点上加上一个反向的父节点再加一个 nextsiblings 就完了。 start 的时候就是从 root 节点找第一个子节点,每次经过的时候标记当前节点
    1. 子节点都判断自己是不是叶子节点,如果是,就找 nextsiblings ,再回到 1
    2. 如果不是,就找子节点,如子节点已经被标记了就找 nextsiblings
    3. nextsiblings 被找完了,就找上层父节点的 nextsiblings , 再回到 1 开始

    直到找完
    zwhu
    zwhu
    Jan 23, 2017
    25
    同样暂停再开始就是重复上面的步骤而已
    hd7771
    hd7771
    OP
    Jan 23, 2017
    26
    @mjhlybmwq 您的意思是监听用的函数返回搜索的函数?
    zwhu
    zwhu
    Jan 23, 2017
    27
    简化的数据结构就是

    node : {
    parent: node,
    nextsiblings: node,
    children: [node.......],
    marked: true
    }
    fds
    fds
    Jan 23, 2017❤️1
    28
    要跳出函数并且保持运行状态自然是用 generator 和 yield 咯,用户点一下再继续回到函数里运行就好,不用自己记状态,方便得很
    mjhlybmwq
    mjhlybmwq
    Jan 23, 2017❤️1
    29
    @hd7771 对啊对啊 但是如果环境支持 generator 的话 generator 是不错的选择
    arzusyume
    arzusyume
    Jan 23, 2017❤️1
    30
    把 .next() 写成 await .next()不就好了...
    hd7771
    hd7771
    OP
    Jan 23, 2017
    31
    @chengluyu
    @mjhlybmwq
    @fds
    @arzusyume
    感谢大佬们,这东西用起来爽到不能自己。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5078 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 56ms · UTC 01:17 · PVG 09:17 · LAX 17:17 · JFK 20:17
    ♥ Do have faith in what you're doing.