优化文件存储服务，提供列队批量操作

Tevin

2022-07-17 bab852804ba2aa1dc23385e62f6873ccdbd73ccf

 common/Bridge.js

@@ -2,26 +2,29 @@
 * 跨端双向通讯桥
 * @author Tevin
 * @tutorial
 *  网页对 app 发起通讯
 *      1. app 注册接收机制
 *          app 在网页打开之前，注入方法 linking
 *      2. js 发起
 *          bridge.invoking('methodName', {key1:'value1'}, function(res){console.log(res)});
 *      3. Bridge 转换为发送
 *  网页对 App 发起通讯
 *      1. 【App端】App 注册接收器，用于接收网页通知
 *          在页面打开之前，App 注入方法 linking = function(paramStr) { <Native Code> }
 *      2. 网页业务中 js 发起通讯
 *          $bridge.invoking('methodName', {key1:'value1'}, function(res) {console.log(res)});
 *      3. 由 Bridge 转换为调用注入的方法（含callback）
 *          window.linking('{method:\'methodName\', param:{key1:\'value1\'}, callback:\'bridge.cb111at1541994536008\'}');
 *      4. app 处理完后直接调用网页上的回调，并传递结果
 *      4. 【App端】App 处理完后直接调用网页上的全局回调，并传递结果完成通讯
 *          bridge.cb101at1541994536008('{key2:\'value2\'}');
 *  app 对网页发起通讯
 *      1. 网页注册接收器，用于接收 app
 *          window.telling = function(dataStr) {};
 *      2. 网页注册业务
 *          bridge.register('methodName', function(data, callback){});
 *      3. app 调用（至少需要在页面完成再延迟至少1秒之后）
 *  App 对网页发起通讯
 *      1. 网页注册接收器，用于接收 App 通知
 *          window.telling = function(dataStr) { someJs };
 *      2. 网页业务中注册接收通讯
 *          $bridge.register('methodName', function(res, callback) {});
 *      3. 【App端】App 调用网页中的全局方法（至少需要在页面完成并延迟至少1秒之后再调用）
 *          telling('{method:\'methodName\', param:{key1:\'value1\'}, marker:\'mk222at1541994536008\'}');
 *      4. 网页完成业务逻辑处理，并回调
 *      4. 网页完成业务逻辑处理后调用注入的方法，并传递结果完成通讯（含marker、不含callback）
 *          window.linking('{method:\'methodName\', param:{key2:\'value2\'}, marker:\'mk222at1541994536008\'}');
 */

import { Fetcher } from '@components/bases/Fetcher';
import { Tools } from '@components/common/Tools';
import { $fileTrans } from '@components/common/FileTransform';

export class Bridge {

@@ -30,7 +33,10 @@
            count: 100,
        };
        this._receives = {};
        this._earlyInvok = [];
        this._init();
        // 挂载到全局
        window.bridge = this;
    }

    /**
@@ -40,7 +46,7 @@
     */
    _checkLinking() {
        // 安卓注入
        if (window.iTop && window.iTop.linking) {
        if (window.aisim && window.aisim.linking) {
            return 'android';
        }
        // 没有注入
@@ -59,25 +65,17 @@
            setTimeout(() => {
                this._init(++count);
            }, 500);
        } else {
            this._initReceive();
        }
    }

    /**
     * 发送
     * @param {object} data
     * @private
     */
    _send(data) {
        const platform = this._checkLinking();
        // 安卓注入
        if (platform === 'android') {
            window.iTop.linking(JSON.stringify(data));
        }
        // 没有注入
        // 开始工作
        else {
            console.error('没有注入 linking 方法！');
            this._initReceive();
            // 补发
            if (this._earlyInvok.length > 0) {
                this._earlyInvok.forEach(invok => {
                    const { method, param, callback } = invok;
                    this._sendLinking(method, param, callback);
                });
            }
        }
    }

@@ -90,16 +88,27 @@
     */
    _sendLinking(method, param, callback) {
        // 数据检查
        if (Object.prototype.toString.call(param) !== '[object Object]') {
        if (!Tools.isObject(param)) {
            console.error('$bridge.invoking 需要接受 JSON 对象！');
            return;
        }
        // 转换发送参数键名为下划线
        param = this.transKeyName('underline', param);
        // 如果有回调，转存回调
        const name = 'cb' + this._data.count++ + 'at' + Date.now();
        this[name] = (res) => {
            if (callback && Object.prototype.toString.call(callback) === '[object Function]') {
            if (callback && Tools.isFunction(callback)) {
                if (res) {
                    const data = typeof res === 'string' ? JSON.parse(res) : res;
                    let data;
                    try {
                        // 转对象
                        data = typeof res === 'string' ? JSON.parse(res) : res;
                        // 转换接收参数键名为驼峰
                        data = this.transKeyName('camel', data);
                    } catch (e) {
                        Tools.toast('跨端通讯异常：解析数据失败！');
                        return;
                    }
                    callback(data);
                } else {
                    callback();
@@ -108,11 +117,11 @@
            delete this[name];
        };
        // 发送
        this._send({
        window.aisim.linking(JSON.stringify({
            method,
            param,
            callback: 'bridge.' + name,
        });
        }));
    }

    /**
@@ -121,18 +130,19 @@
     * @param {object|function} [param]
     * @param {function} [callback]
     */
    invoking(method, param, callback) {
        const trans = param;
        if (trans) {
            if (Object.prototype.toString.call(trans) === '[object Function]') {
                callback = trans;
                param = {};
            }
        } else {
            callback = null;
    invoking(method, param = {}, callback) {
        // param 为函数时
        if (param && Tools.isFunction(param)) {
            callback = param;
            param = {};
        }
        this._sendLinking(method, param, callback);
        if (this._checkLinking()) {
            this._sendLinking(method, param, callback);
        }
        // 尚未准备好，挂起
        else {
            this._earlyInvok.push({ method, param, callback });
        }
    }

    /**
@@ -140,24 +150,28 @@
     * @private
     */
    _initReceive() {
        if (!this._checkLinking()) {
            return;
        }
        window.telling = (res) => {
            const data = typeof res === 'string' ? JSON.parse(res) : res;
            const method = data.method;
            const param = data.param;
            const marker = data.marker;
            const { method, param, marker } = data;
            // 转换接收参数键名为驼峰
            const param2 = this.transKeyName('camel', param);
            if (this._receives[method]) {
                this._receives[method](param, (param2) => {
                    this._sendTelling(method, param2, marker);
                });
                // 有通知回调
                if (marker) {
                    this._receives[method](param2, (param2) => {
                        this._sendTelling(method, param2 || {}, marker);
                    });
                }
                // 无通知回调
                else {
                    this._receives[method](param2);
                }
            }
        };
    }

    /**
     * 发送响应
     * 回发App通知的响应
     * @param {string} method
     * @param {object} param
     * @param {string} marker
@@ -165,20 +179,22 @@
     */
    _sendTelling(method, param, marker) {
        // 数据检查
        if (Object.prototype.toString.call(param) !== '[object Object]') {
        if (!Tools.isObject(param)) {
            console.error('$bridge.register 注册的函数需要接受 JSON 对象！');
            return;
        }
        // 转换发送参数键名为下划线
        param = this.transKeyName('underline', param);
        // 发送
        this._send({
        window.aisim.linking(JSON.stringify({
            method,
            param,
            marker,
        });
        }));
    }

    /**
     * 注册接收指令，可供 app 查询
     * 注册接收指令，可接收 app 通知
     * @param method
     * @param callback
     */
@@ -194,6 +210,178 @@
        return platform === 'android' || platform === 'iOS';
    }

    /**
     * 键名转换
     * @param type
     * @param json
     */
    transKeyName(type, json) {
        return Fetcher.prototype.transKeyName(type, json);
    }

    /* ----- 文件系统 ----- */

    /**
     * 保存文件到 java 端，并返回文件名
     * @param objUrl
     * @param callback
     */
    fileSave(objUrl = '', callback) {
        // 非 ObjectURL 跳过
        if (objUrl.indexOf('blob:') < 0) {
            callback(objUrl);
            return;
        }
        // 分段存储
        const saveFileChunk = (baseData, index) => {
            const writeData = {
                fileName: baseData.fileName,
                currentIdx: index,
                totalIdx: baseData.total,
                data: baseData.baseArr[index],
            };
            this.invoking('img_write', writeData, res => {
                if (res.result === false) {
                    Tools.toast(res.msg);
                    return;
                }
                // 按分段递归保存
                if (index < baseData.total - 1) {
                    setTimeout(() => {
                        saveFileChunk(baseData, index + 1);
                    }, 10);
                }
                // 已完成
                else {
                    callback && callback('bridge:' + baseData.fileName);
                }
            });
        };
        $fileTrans.transObjUrlToBaseData(objUrl, baseData => {
            saveFileChunk(baseData, 0);
        });
    }

    /**
     * 从 java 读取文件 base64
     * @param fileName
     * @param callback
     */
    fileLoad(fileName = '', callback) {
        // 非存储地址，跳过
        if (fileName.indexOf('bridge:') < 0) {
            callback(fileName);
            return;
        }
        fileName = fileName.split(':')[1];
        const chunkSize = $fileTrans.getChunkSize();
        const baseArr = [];
        let totalSize = 0;
        let totalCount = 0;
        const loadFileChunk = (index) => {
            const loadData = {
                fileName,
                offset: chunkSize * index,
                length: chunkSize,
            };
            this.invoking('img_read', loadData, res => {
                if (res.result === false) {
                    Tools.toast(res.msg);
                    return;
                }
                if (totalSize === 0) {
                    totalSize = res.totalSize;
                    totalCount = Math.ceil(res.totalSize / chunkSize);
                }
                baseArr.push(res.data);
                // 按分段递归读取
                if (totalCount > 1 && totalCount - 1 > index) {
                    loadFileChunk(index + 1);
                }
                // 读取完成
                else {
                    const baseData = {
                        baseArr,
                        fileName,
                    };
                    $fileTrans.transBaseDataToObjUrl(baseData, objUrl => {
                        callback && callback(objUrl);
                    });
                }
            });
        };
        loadFileChunk(0);
    }

    /**
     * 从 java 端移除文件
     * @param fileName
     */
    fileRemove(fileName = '') {
        if (fileName.indexOf('bridge:') < 0) {
            return;
        }
        fileName = fileName.split(':')[1];
        this.invoking('img_del', { fileName });
    }

    /**
     * 文件存储批量操作服务
     * @param type
     * @param names
     * @param callback
     */
    fileStorehouse(type, names = [], callback) {
        // 保存
        if (type === 'save') {
            const list = [];
            const save = index => {
                this.fileSave(names[index], fileName => {
                    list.push(fileName);
                    // 递归下一个
                    if (index < names.length - 1) {
                        setTimeout(() => {
                            save(index + 1);
                        }, 10);
                    }
                    // 完成
                    else {
                        callback && callback(list);
                    }
                });
            };
            save(0);
        }
        // 读取
        else if (type === 'load') {
            const list = [];
            const load = index => {
                this.fileLoad(names[index], objUrl => {
                    list.push(objUrl);
                    // 递归下一个
                    if (index < names.length - 1) {
                        setTimeout(() => {
                            load(index + 1);
                        }, 10);
                    }
                    // 完成
                    else {
                        callback && callback(list);
                    }
                });
            };
            load(0);
        }
        // 移除
        else if (type === 'remove') {
            names.forEach((name, index) => {
                setTimeout(() => {
                    this.fileRemove(name);
                }, 10 * index);
            });
        }
    }

}

// 全局服务实例