egoist / vue-requests

Need a Vue.js module or looking for ideas? Here to help!
2 stars 0 forks source link

Vue make some algorithms visually #3

Open monkindey opened 8 years ago

monkindey commented 8 years ago

just like introducing the vue cache algorithm, i make the vc demo to show the vue cache algorithm clearly.

egoist commented 8 years ago

eh, do you mean using Vue to make graphs?

fengzilong commented 8 years ago

感觉说的应该是这种,https://github.com/parkjs814/AlgorithmVisualizer 算法可视化

monkindey commented 8 years ago

The algorithm is so boring, but if we translate the algorithm in some interesting ways, such as the GUI with animation. Specially the sort algorithm, because Vue focus the data, it will be easier than the jquery.

好吧,英文不行,编不下去了。 @fengzilong, 你的链接有点问题噢

fengzilong commented 8 years ago

@monkindey 已更新

monkindey commented 8 years ago

@fengzilong 对,就那种感觉吧,算法可视化会不会好点呢,能让人家一目了然。

fengzilong commented 8 years ago

@monkindey 感觉没有必要再造这个轮子,花费的代价太大,而且这东西是教程性质的,用什么写其实并不重要

egoist commented 8 years ago

做一个常用 SVG 组件库不错 😂

egoist commented 8 years ago

或者做 flowchart 的框架也行

monkindey commented 8 years ago

@fengzilong 感觉有这个意识会不会好点呢,不是为了造轮子,以后源代码的分析也是可以用图形化页面来解释的。人家说了一大堆话,我感觉不如一个图形页面或者gif解释地清楚

@egoist 是否可以用跟 d3 结合起来呢?

fengzilong commented 8 years ago

我还是比较赞同 @egoist 的想法,做个图表库可能更实际点

fengzilong commented 8 years ago

@monkindey 如果你是指源代码分析的话,前段时间看到支付宝也在摸索图形化编程的方式 https://github.com/dvajs/dva-gui 可以参考下,是在dva的基础上构建的,同时需要对工程代码进行ast解析

monkindey commented 8 years ago

非常感谢。不过借这个issue来问两位大神@fengzilong @egoist 一个困扰我挺久的Vue问题了。

你们有什么好的解决方案么?希望不是用setTimeout的吧,我总是想要让Vue去强制更新页面。

egoist commented 8 years ago

this.$nextTick 😂 虽然和 setTimeout 差不多

monkindey commented 8 years ago

😂 😂 不想用异步的方案哈,这个只是一个项目中遇见的问题抽出来而已,并不是真正的问题噢,后期如果用异步的方式的话感觉不太可控。所以总是想让Vue在state修改就更新页面,不过感觉$forceUpdate并没多大用呀,可能我用的不对吧。

其实感觉有一个方案就是 直接去操作DOM,但是我觉得用Vue就老老实实操作数据就好,操作DOM让Vue去做,这个就是一个备胎方案吧😂 😂

fengzilong commented 8 years ago

@monkindey 其实异步的写法也还好,没什么不可控的,如果你用yield的话

const delay = timeout => new Promise(( resolve, reject ) => {
    setTimeout( function() {
        resolve();
    }, timeout );
 });

...
yield delay(500);
...

看起来和同步的写法差不多

monkindey commented 8 years ago

@fengzilong 非常感谢,之前也打算用async await 去做,但是仔细想了想感觉不太好,还是异步的处理方式。

一种场景:那个列表是组件,是其他组件或者父组件通过事件机制告诉它现在应该高亮哪一列的。如果不要把它看成列表,看成树了,列表项里面也有列表。高亮的顺序是全部的父节点高亮后然后再高亮子节点。而且高亮子节点这个时间点不是跟高亮父节点的节奏的,也就是高亮父节点后可能要等1s再高亮子节点。

不知道我讲清楚了么。

fengzilong commented 8 years ago

@monkindey 听明白了:joy: 不过咱们还是回到这个issue的主题上来吧,这才是这个issue的意义

monkindey commented 8 years ago

😂 我觉得结合 d3 会不会好点呢,毕竟用d3操作svg还是比较方便的呢。