上一篇已经详解了关于定位器的实现细节，本篇主要是讲解实现引导的组成模块及整个引导流程，并给出整个引导的源码。
整个引导框架分为以下几个部分： – 引导配置 – 定位器 – 引导任务处理器
引导配置
请下看图：
设计UI引导步骤：
UI操作的设计已经确定，控件名字对于引导至关重要，我们首先要把这些准备工作做好。 这里引入任务和步骤的概念：引导是由多个任务组成，我们称为tasks，其中一个任务称为task，一个任务中又包含多个引导步骤称为step。(这里与上一篇中所讲的任务组、任务是一至的，只是换了一个说法而以。在编写代码时，我觉得使用任务与步骤来表达，让代码更清楚)
引导细节需求：
对应的引导配置：
var guideConfig = {tasks: {1: [{log: “关闭第一盏灯”,command: sz.GuideCommand.GC_FINGER_HINT,locator:”_fire1″},{log: “关闭第二盏灯”,command: sz.GuideCommand.GC_FINGER_HINT,locator:”_fire2″},{log: “保存进度”,command: sz.GuideCommand.GC_SAVE_PROGRESS},{log: “点亮第一盏灯”,command: sz.GuideCommand.GC_FINGER_HINT,locator:”_fire1″},{log: “点亮第二盏灯”,command: sz.GuideCommand.GC_FINGER_HINT,locator:”_fire2″},],2: [{log:’点击home’,command: sz.GuideCommand.GC_FINGER_HINT,locator:”_btnHome”}],3: [{log:’点击task’,command: sz.GuideCommand.GC_FINGER_HINT,locator:”_btnTask”}]},locateNodeDurationTime: 0.1,fingerImage: ‘res/finger.png’};//引导命令sz.GuideCommand = {GC_SET_PROPERTY: 1, //设置属性GC_FINGER_HINT: 2, //手型提示GC_SAVE_PROGRESS: 3 //保存进度};
目前sz.GuideCommand只内置了三个命令：设置属性、手型提示、保存进度
引导任务处理器
从上面的任务配置来看，任务步骤的处理是一个顺序执行过程，但UI操作却是一个异步过程，只有UI操作完成后才能进行下一个任务。 对于javascript来说，处理异步事件、回调函数是最拿手的，，但为了代码可读性、维护性比较好，我们这里使用了大名顶顶的async库来处理任务和步骤，这样可以解决回调函数的深度。
async
这里只用到async两个函数：
async.eachSeries(tasks, iterator, callback)
我们使用async.eachSeries来遍历我们整个任务数组，iterator为迭代器函数，用于处理每一个任务，callback为任务全部处理完后，我们用来离开引导
async.series({}, [callback])
我们使用async.series处理一个步骤对象的几个主要动作：步骤开始、步骤处理、步骤完毕 这里核心的是步骤处理，步骤开始和结束我们可以用来扩展步骤对象，增加灵活性。 比如说，当一个步骤开始前，需要检查金币、等级这些，不满足的话可以不触发本步骤的进行。下一篇我会给大家做相关代码的演示。
处理所有任务
//获得任务数组 var tasks = […] //使用eachSeries函数，遍历所有任务对象 async.eachSeries(tasks, async.eachSeries(task, stepHandle, self._guideLayer.save(true, cb);}); }, self._exitGuide(); });{async.series({//步骤开始stepBegin: function(cb) {self._guideLayer._setLocateNode(null);if (step.onEnter) {step.onEnter.call(this._guideLayer, cb);} else {cb(); //执行cb函数触发下面的stepProcess函数}},//步骤处理stepProcess: (step.delayTime) {self._guideLayer.scheduleOnce(function() {self._processStep(step, cb);})} else {//执行具体的步骤处理操作，传入setp对象，当步骤完成后自动执行cb函数，进入下面setpEnd函数self._processStep(step, cb);}},//步骤完毕stepEnd: (step.onExit) {step.onExit.call(this._guideLayer, callback);} else {//callback为stepHandle的参数，执行callback函数本任务全部完成。callback();}}}); };
任务处理的核心是步骤的处理，步骤的处理最主要是正确执行步骤指令
_processStep: self = this;//打印步骤日志if (step.log) {cc.log(“guide: <” + step.log + “, step begin >”);}{if (step.log) {cc.log(“guide: <” + step.log + “, step finished >”);}if (step.delayTime) {setTimeout(cb, step.delayTime * 1000);} else {cb();}};//处理步骤指令switch (step.command) {//设置属性case sz.GuideCommand.GC_SET_PROPERTY:property = step.args[0];var args = step.args.slice(1);node[property].apply(node, args);});break;//手型提示case sz.GuideCommand.GC_FINGER_HINT:this._guideLayer.locateNode(step.locator, function(node) {self._guideLayer.fingerToNode(node, finish, true);if (step.onLocateNode) {step.onLocateNode.call(this._guideLayer, node);}});break;//保存进度case sz.GuideCommand.GC_SAVE_PROGRESS:this._guideLayer.save(false, finish);break;default:cc.log(“guide command is not define”);}}关于定位区UI事件的检测旅行要学会随遇而安，淡然一点，走走停停，
