JS--撤销恢复,简单的想法。

看下面这张图,在一个emojimaker的页面中,功能是点击拖动眼睛,鼻子等等坠饰,能组成一个emoji。

需求是点击之后能撤销或者恢复,走了许多弯路啊。最后借鉴了react的思想完成了这个功能。

就简单说说:

我们需要什么? 需要2个栈,一个operationList[]用来记录正常的点击操作,一个buffer[]用来记录恢复的操作。

这样我们就不用在出栈入栈的时候考虑前后状态的问题,所需要做的仅仅是处理operationList[]这个栈。

下图是撤销操作示意图。详细讲起来会特别麻烦,主要想法就是避免状态的判断,尤其是前后状态。

也不知道该不该这样说,灵感来自于react维护的虚拟dom。

时间: 2024-08-25 01:59:03

JS--撤销恢复,简单的想法。的相关文章

JS实现一个简单的计算器

使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getElementById( id名 ).value 获取或设置 id名的值. 第三步: 获取通过下拉框来选择的值来改变加减乘除的运算法则. 提示:使用switch判断运算法则. 第四步:  通过 = 按钮来调用创建的函数,得到结果. 注意: 使用parseInt

【转】九个Console命令,让js调试更简单

一.显示信息的命令 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>常用console命令</title> 5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6: </head> 7: <body> 8: <script

分别用css3、JS实现图片简单的无缝轮播功效

本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个img标签:为了实现无缝轮播,注意第一张图片要与最后一张图片相同: <div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/> <img s

js日期格式简单转换代码

js日期格式简单转换代码: 未经修饰的东西总是狂野粗糙的,比如人没有经过良好的教育,这人可能会有各种问题,同样js中的时间格式也是如此,所以要对时间进行一定的格式化操作,下面是一段非常简单的代码实例和大家分享一下. 代码如下: function dateStr(x,y) { var z={ y:x.getFullYear(), M:x.getMonth()+1, d:x.getDate(), h:x.getHours(), m:x.getMinutes(), s:x.getSeconds() }

[3] 用D3.js做一个简单的图表吧!

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像,不清楚什么是SVG的朋友请先在 w3cschools 学习下

用JS做一个简单的电商产品放大镜功能

使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能:1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理:1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 -------------------------------

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

JS代码的简单重构与优化

JS代码的简单重构与优化(适合新手) 原文  http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) { return true; } else { return false; } //good return age > 20; 这种一看就明白吧,没什么说的. Demo . 2 //bad for (var i = 0; i < arr.length; i++) { //do something

JS CSS 网页 简单 右侧 悬浮

<!--右侧效果--> <script> $().ready(function() { $(".orm").hover(function() { $(this).css("right", "-2px"); }, function() { $(this).css("right", "-175px"); }); }); </script> <div class=&quo

使用JS完成一个简单的计算器功能

使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElementById("id").value = 1: 取值:var = document.getElementById("id").value: 任务 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getElement