2 设计一个简易的引导任务框架 | 4.23粉丝赠书 _指令

设计一个简易的引导任务框架
前文导读
【2设计一个简易的引导任务框架 | 4.23粉丝赠书】上一篇分析了如何定位节点，如何显示节点遮罩，以及节点事件的确认，原理和方法是有了但要将整个逻辑链条串连起来，还需要下一翻功夫。
编写了一个简单的引导任务框架，想仅通过 JSON 配置的方式，完成上述步骤、任务的执行，实现一个配置式、可编程的引导框架，期望的是让非程序人员经过简单的学习，也能实现引导内容的制作，我们先看一个任务配置案例：
module.exports = {name: '进入商店',debug: true,steps: [{desc: '点击主界面主页按钮',command: { cmd: 'locator', args: 'Home > main_btns > btn_home'},delayTime: 1,},{desc: '点击主界面设置按钮',command: { cmd: 'finger', args: 'Home > main_btns > btn_setting'},},]};
下面是按此配置执行的效果：
引导框架—串联异步引导步骤
前面讲过，一个引导步骤中节点定位函数 .find() 是通过回调函数异步返回目标节点，用户对目标节点的点击确定也是异步的，因此任务中的每一个 step 都是异步的，为了方便对流程的异步控制，在这里使用了 async 这个三方库，如果你不习惯也可以更换为你熟悉的异步编程方式。
首先，我们看看任务配置中的 steps 异步串行处理：
run() {//串行处理 steps 数组中的每一项目元素async.eachSeries(this._task.steps, (step, cb) => {//_processStep 是一个异步函数，通过回调通知 step 处理完毕this._processStep(step, cb);}, () => {//this._task.steps 中所有步骤处理完成，关闭引导this._task = null;//引导结束，隐藏遮罩、手指节点this._mask.node.active = false;if (this._finger) {this._finger.active = false;}});}
async. 是将 steps 数组中的元素依次迭代处理，具体的步骤处理我们封装在引导类的 this. 成员函数中，当 steps 数组中所有步骤执行完毕，async. 最后一个回调函数被触发，退出引导状态。
引导步骤—步骤生命周期回调与步骤指令
上面是控制的是引导整体流程，我们再深入到 this. 函数：
_processStep(step, callback) {async.series({//步骤开始stepStart: (cb) => { step.onStart ? step.onStart(this, cb) : cb();},//步骤指令stepCommand: (cb) =>{this.scheduleOnce(() => {this._processStepCommand(step, () => {cb();});}, step.delayTime || 0);},//步骤结束stepEnd: (cb) => {step.onEnd ? step.onEnd.call(this, cb) : cb();}}, callback);},
1. 步骤生命周期回调
async. 帮助我们串行执行多个异步函数，这里为 step 设计了、onEnd 两个生命周期回调，分别在上面和中执行，我们可以在这两个函数中做一些初始化、条件检查等异步等待操作，例如:
下面代码是模拟道具购买的引导实现，可以具体了解到、onEnd 的使用方法
{...steps: [{desc: '10 级提示购买道具',//步骤开始onStart(callback) {let obj = {};//监听玩家等级变化cc.director.on('player-lv-up', (player) => {//到达 10 级，显示商店界面if (player.lv >= 10) {cc.director.emit('show-shop');//移除事件监听cc.director.targetOff(obj);//执行回调，执行步骤指令callback();}}, obj);},//步骤指令，定位商店界面中的购买按钮command: { cmd: 'finger', args: 'Shop > btnBuy'},//当玩家点击购买按钮，进入 onEnd 事件回调onEnd(callback) {//使用网络代理模块，监听指定网络事件NetProxy.once('message-buy-item', (msg) => {//事件发生，执行 callback 回调步骤结束callback();});}}]}