TypeScript 函数调用时优化新手小笔记

在听海江老师课上写 cocos 的 ts 脚本时，做资源加载需要写很多的回调函数，为了优化代码，使用工具类的方式来做优化

 

第一种：编写一个方法，这个方法传入的参数是一个方法数组，然后循环遍历这个方法数组，顺序执行，就能完成不带异步回调的普通方法顺序执行

static serize_0(oFunArray: Array<() => void>): void {
        if (null == oFunArray ||
            oFunArray.length <= 0) {
            return;
        }

        for (let i = 0; i < oFunArray.length; i++) {
            let funCurr = oFunArray[i];

            if (null != funCurr) {
                funCurr();
            }
        }
    }

第二种：为了满足回调的方法也能够顺序执行，编写一个内部类，这个内部类里，含有一个私有数组，通过 put 的方法来赋值，do 方法操作这个函数数组，执行方法

/**
     * 函数数组
     */
    private _oFunArray: Array<> = null;

    /**
     * 设置函数数组
     * 
     * @param oVal 函数数组
     */
    public putFunArray(oVal: Array<>): void {
        this._oFunArray = oVal;
    }

    /**
     * 执行下一个函数
     * @returns 
     */
    public doNext(): void {
        if (null == this._oFunArray ||
            this._oFunArray.length <= 0) {
            return;
        }

        let funCurr = this._oFunArray.shift();
        if (null != funCurr) {
            funCurr();
        }
    }

在调用时，通过传入工具类的对象，就可以完成在前一个方法回调结束时，调用下一个方法

static serize_1(oNextStep: NextStep, oFunArray: Array<() => void>): void {
        if (null == oNextStep ||
            null == oFunArray ||
            oFunArray.length <= 0) {
            return;
        }

        oNextStep.putFunArray(oFunArray);
        oNextStep.doNext();
    }

但是，这么操作需要额外引入一个内部类，如果不引入这个内部类，就可以采用更简单的方式来操作这个方法

 

第三种：这个方法传入的方法数组里，带上一个参数，类型就是内部类的类型，然后修改这个内部类，把私有数组也改成这个带参类型

    static serize_2(oFunArray: Array<(oNextStep: NextStep) => void>): void {
        if (null == oFunArray ||
            oFunArray.length <= 0) {
            return;
        }

        let oNextStep = new NextStep();

        oNextStep.putFunArray(oFunArray);
        oNextStep.doNext();
    }

内部类就变形成这样，这么做在于进行 do 方法调用时，直接使用 this 来传入参数，我的理解是，在 serize_2 中，执行的第一个方法 new 了这个内部类对象，然后这个对象的操作在 doNext 时，需要执行下一个方法，再将对象自己重新传入，就可以对这个对象的复用，来完成回调函数调用，并且不需要暴露内部类来调用

    /**
     * 函数数组
     */
    private _oFunArray: Array<(oNextStep: NextStep) => void> = null;

    /**
     * 设置函数数组
     * 
     * @param oVal 函数数组
     */
    public putFunArray(oVal: Array<(oNextStep: NextStep) => void>): void {
        this._oFunArray = oVal;
    }

    /**
     * 执行下一个函数
     * @returns 
     */
    public doNext(): void {
        if (null == this._oFunArray ||
            this._oFunArray.length <= 0) {
            return;
        }

        let funCurr = this._oFunArray.shift();
        if (null != funCurr) {
            funCurr(this);
        }
    }