怎么利用 js 在树上交互

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2649 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

蛋疼

函数

树上

子树

31 条回复 • 2017-01-23 17:06:10 +08:00

think2011

2017-01-22 22:21:10 +08:00

所有你需要事件委托代理？

hd7771

2017-01-22 22:32:02 +08:00

@think2011 我定义了一种制作 web 上 galgame 的语言，然后用 c++翻译成 js ，单线流程我已经试验成功了（链表），但是加了选项之后就是树结构，按理说差不多，但是我不知道每次调用监听函数怎么知道自己在树上跑到哪里了以及之前跑过哪些点，怎么回溯。。
事件委托代理是监听给父元素？不过我这个问题和 DOM 关系好像不打。。望大佬指点。

hd7771

2017-01-22 22:33:34 +08:00

@think2011 其实主要是回溯蛋疼，，其他的可以标记

liuhaotian

2017-01-22 22:34:45 +08:00

用一个栈模拟 dfs ？

hd7771

2017-01-22 22:37:19 +08:00

@liuhaotian 对的。。。可以先预处理到栈里，之后就很好写了。。感谢大佬

hd7771

2017-01-22 22:39:59 +08:00

@liuhaotian 不对应该是运行一个语句丢一个到栈里。。我数据结构学炸了。

xiaoxiuaoliang

2017-01-22 23:39:34 +08:00

我看标题还以为爬到树上用 js 搞智能硬件。。。

think2011

2017-01-23 00:02:20 +08:00

@hd7771 应该是我误会了，纯前端，没能理解需求。

zwhu

2017-01-23 00:08:41 +08:00

其实就是 dom 树？

有 childElements 和 parentElement 就可以了吧，大不了再搞个 siblingsElement

zwhu

2017-01-23 00:13:59 +08:00

dom 树的这种数据结构是啥，表示没大学没上过课不知道怎么表述..

不过按照你的要求可以回溯，在生成树的时候加个 parentNode 完全可以搞定了吧

Mirana

2017-01-23 00:25:44 +08:00

还以为你们两个人蹲在树上写 js 。。。。

hd7771

2017-01-23 07:27:28 +08:00

@zwhu 大概就是我有很多要执行的语句，树上每个节点都有一句，有些是给用户决定赋值的，有些就是给用户看的。然后用户点击一下鼠标往后执行遇到有 stop 语句停下来，有些节点根据某些值决定进不进去。。。如果没有用户实时决定就是讲编译的书上前几章讲的 ast 树，，在一般的 ast 树上兄弟之间加单向边用栈模拟应该效果差不多。。

hd7771

2017-01-23 07:37:58 +08:00

@zwhu 我整个网页就一个元素<div id = "game area"> </div>。。。我指的就是普通的树，，

des

2017-01-23 09:03:40 +08:00 via Android

@hd7771 你说的是 DFS 的树？好多人都以为是 DOM 树。。

akring

2017-01-23 09:25:14 +08:00

歪楼，建议找个梯子，上树方便

des

2017-01-23 09:26:39 +08:00 via Android

@hd7771 要不试试用生成器函数？

zwhu

2017-01-23 09:38:59 +08:00

@hd7771

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

在任何一个节点都可以通过 parentElement 向上找，也可以通过 siblingsElement 找兄弟节点，同样也可以通过 childElement 找子节点

zwhu

2017-01-23 09:50:59 +08:00

说的好像 DOM 树就不能用 DFS 算法似地...

chengluyu

2017-01-23 09:55:04 +08:00

yield ？或者手动实现一个 coroutine ？

hd7771

2017-01-23 10:22:58 +08:00

@zwhu 我用的一个叫做 pixi.js 的图形库。。。没有看过源码，，不知道内部怎么实现的。。它给的样例就没能让你操纵 DOM 树，只让你在一个框框里面加东西。。

hd7771

2017-01-23 10:26:13 +08:00

@zwhu 而且它也是用一个叫做 webGL 的东西弄得，我不明白原理还是调用它的 api 比较好吧。

mjhlybmwq

2017-01-23 10:29:50 +08:00

返回一个函数就可以了

hd7771

2017-01-23 10:33:13 +08:00

@zwhu 其实这种翻译成 html 再用 js 去控制好很多，，，就是不知道不调用图形库就靠 css 能不能做出游戏的效果。。

zwhu

2017-01-23 10:35:26 +08:00

@hd7771 - -。我说的 dom 树，是一种数据结构，不是真实的渲染出来的节点。

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

直到找完

zwhu

2017-01-23 10:37:45 +08:00

同样暂停再开始就是重复上面的步骤而已

hd7771

2017-01-23 10:39:28 +08:00

@mjhlybmwq 您的意思是监听用的函数返回搜索的函数？

zwhu

2017-01-23 10:40:37 +08:00

简化的数据结构就是

node : {
parent: node,
nextsiblings: node,
children: [node.......],
marked: true
}

fds

2017-01-23 10:41:16 +08:00

要跳出函数并且保持运行状态自然是用 generator 和 yield 咯，用户点一下再继续回到函数里运行就好，不用自己记状态，方便得很

mjhlybmwq

2017-01-23 10:59:08 +08:00

@hd7771 对啊对啊但是如果环境支持 generator 的话 generator 是不错的选择

arzusyume

2017-01-23 13:15:25 +08:00

把 .next() 写成 await .next()不就好了...

hd7771

2017-01-23 17:06:10 +08:00

@chengluyu
@mjhlybmwq
@fds
@arzusyume
感谢大佬们，这东西用起来爽到不能自己。