第一次发技术文，这篇文章原文写在我的Blog上，因为这边不能直接写Demo所以我改给JS Fiddle的Demo连结。

以下正文开始

前言

前天有人问了一题有趣的题目，内容是问要怎么实作编辑器得上一步下一步动作，也是就是说要做一个步骤纪录器，觉得没做过这种东西觉得好像蛮有趣的，就来试试看。

步骤纪录器原理

基本原理

原理很简单，先建立一个Array当作容器，每次输入时使用就把资料塞进Array中，在使用一个变数纪录当前的步骤，上一步就是把资料还原上一个Array元素的内容而已，是不是很简单呢？XD

纪录的频率

HTML的DOM事件只能监控你每次输入的瞬间，假如说你输入123，这样会产生3步，这样感觉纪录的太细腻，所以我们要做一个延迟，需要输入后停止多久的时间，纪录器才会把资料记录下来。

纪录器的空间控管

当然纪录器的空间要有限制，不是一直Array.push()就好，这样你会害使用者记忆体爆掉的....

所以我们一定要限制Array的大小，对使用者来说就是可以纪录的几个步骤。

步骤纪录器实作

建立基本容器与变数

实作使用TextArea来当示範，首先先建立2个Button和TextArray

<button id="prev" type="button">上一步</button><button id="next" type="button">下一步</button><textarea id="text" cols="5"></textarea>

建立Array和使用的变数

var step = 0; // 步骤变数var textList = new Array(); // array容器var prev = document.getElementById('prev');var next = document.getElementById('next');var text = document.getElementById('text');

步骤事件建立及加入输入的监听

写一个事件，每个步骤都会把TextArea的内容写入textList，并写步骤+1

function textWrite(){    step++;     textList.push(text.value);}

当然只有事件是不会自动执行的，此时我们需要监控TextArea的输入，并执行上面的事件

text.addEventListener('input', textWrite);

上下步事件建立

这边开始就简单了，上一步只要读取上个Array元素的资料并塞进TextArea，下一步则是倒过来。

prev.onClick = function(){    // 判断是否还有上一步    if(step < 2){        alert('没有上一步');    }else{        step--;// 步骤往回一步        text.value = textList[step - 1]; // 因为Array从0开始所以要-1    }}next.onClick = function(){    if(step => textList.length){        alert('没有下一步');    }else{        step++;        text.value = textList[step - 1];    }}

Demo连结

延迟纪录的实现

这个就要使用我的上一篇文章，使用Lodash的_.debounce就能实现了。

var debounce = _.debounce(textWrite, 500);// 延迟500毫秒纪录text.addEventListener('input', debounce);// 改成监听延迟函数

Demo连结

步骤器的限制

要限制很简单，只要储存容器本身要限制宽度就行，这边主要的另一个问题应该是超出範围是该怎么办？
答案很简单就是把现有资料向前移动就行，然后在最后一项资料再塞进新资料。

var textList = new Array(3); // 限制Array只能4个元素function textWrite(){    // 判断是否已到最大纪录步骤    if(step === textList.length){        for(var i = 0;i < textList.length - 1; i++){            textList[i] = textList[i + 1];        }        textList[step - 1] = text.value;     } else {        step++;         textList[step] = text.value;    }}

Demo连结

后记

整体来说不难，最后一项步骤器的限制难度有比较高，我在想资料位移时还一直想到脑筋打结，原本是for递减，后来想一想好像递增比较好写，
害我卡了很久，不过很多IT邦很多大大说编辑器很难写是真的，虽然基本的观念不是很难，但是细部的微调真的很难写，例如我其时还少写了一个步骤不在最后一步时，
要覆写后面的步骤，实作起来应该是更难，我这边就不做了(晕)。

Blog原文