1

网页是用户与网站对接的入口,当我们允许用户在网页上进行一些频繁的操作时,对用户而言,误删、误操作是一件令人抓狂的事情,“如果时光可以倒流,这一切可以重来……”。
当然,时光不能倒流,而数据是可以恢复的,比如采用 redux(https://redux.js.org/) 来管理页面状态,就可以很愉快地实现撤销与重做,但是傲娇的我婉拒了redux的加持,手撕出一个 Javascript 状态管理工具,鉴于是私有构造函数,怎么命名不重要,就叫他李狗蛋好了,英文名就叫 —— DataSet。

1. 数据的存储

DataSet并不是被设计来存储大量数据的,因此采用键值对的方式存储也不会有任何问题,甚至连 W3C 支持的 IndexdDB 都懒得用,直接以对象存在内存中即可,遂有:

                    // 存储具体数据的容器
                    this.dataBase = {};
                    

另外,撤回与重做依赖于历史数据,因此有必要将每次改动的数据存储起来,在撤回/重做的时候按照先进后出的规则取出,为此定义了两个数组——撤回栈和重做栈,默认可以往后回退100步,当然,步长可以传入的参数 undoSize 自定义:

                    // 撤回与重做栈
                    this.undoStack = new Array(options.undoSize || 100);
                    this.redoStack = new Array(options.undoSize || 100);
                    

当然,一开始为了开发方便,有时候需要查询数据操作历史,因此还开辟了日志存储的空间,但是目前这些日志貌似没有派上过用场,还白白占用内存拖慢速度,有机会得把它移除掉。

2. 数据隔离

我们知道,Javascipt 变量实际上只是对内存引用的一个句柄,因此当你把对象“存”起来之后,在外部对该对象的改动仍旧是会影响存储的数据的,因此多数情况下需要对存入的对象进行深拷贝,由于需要保存的对象通常只是用来描述状态,因此不应包含方法,所以是可以转为符串再存储的,取用数据的时候再把它转为对象即可,所以数据的出入分别采用了 JSON.stringify 和JSON.parse 方法。
存数据:

    this.dataBase[key].value = this.immutable &&
         JSON.stringify(this.dataBase[key].value) ||
         this.dataBase[key].value;
    

取数据:

    var result= (!this.mutable) &&
         JSON.parse(dataBase['' + key].value) || 
         dataBase['' + key].value;
    

鉴于部分情况下数据可以不进行隔离,比如存储AJAX获取到的数据,为此我预留了 immutable 参数,这个值为真的时候存取数据不需要经过字符串的转换,有助于提高运行效率。

3. 撤回、重做栈管理

前面已经说了栈实现的中心思想——先进后出,因此数据发生变化的时候,视情况对两个数组进行操作,采用数组的 push 方法存入,用 pop 方法取出即可,每次操作前后执行一下数组的 shift 或者 unshift方法,来保证数组长度的稳定(毕竟这个栈是假的)。实现代码大致如下:

                    // 回退/重做操作
                    var undoStack = this.undoStack;
                    var redoStack = this.redoStack;
                    var undoLength = undoStack.length;
                    if(!undoFlag){
                        // 普通操作,undo栈记录,redo栈清空
                        undoStack.shift();
                        undoStack.push(formerData);
                        if(!!redoStack.length){
                            redoStack.splice(0);
                            redoStack.length = undoLength 
                        }
                    } else if(undoFlag === 1){
                        // 撤回操作
                        redoStack.shift();
                        redoStack.push(formerData);
                    } else {
                        // 重做操作
                        undoStack.shift();
                        undoStack.push(formerData);
                    }
                    

4. 数据的订阅

数据是以键值对存储的,相应地,订阅的时候也以键名为准。由于接触过的诸多代码都滥用了 jQuery 的 .on 方法,我决定自己实现的所有订阅都必须是唯一的,因此这里的每个键名也只能订阅一次。订阅的接口如下:

        function subscribe(key, callback) {
                if(typeof key !== 'string'){
                    console.warn('DataSet.prototype.subscribe: required a "key" as a string.');
                    return null;
                }

                if(callback && callback instanceof Function){
                    try{
                        if(this.hasData(key)){
                            this.dataBase[key].subscribe = callback;
                        } else {
                            var newData = {};
                            newData['' + key] = null;
                            this.setData(newData, false);
                            this.dataBase[key].subscribe = callback;
                        }
                    } catch (err) {

                    }
                }

                return null;
            };
            

这样就把回调函数与键名绑定了,对应数据发生改变的时候,即执行对应的回调函数:

            ... 数据发生了改动
            // 如果该data被设置订阅,执行订阅回调函数
            var subscribe = dataBase[key].subscribe;
            (!BETA_silence) && (subscribe instanceof Function) && (subscribe(newData, ver));

你可能注意到了这里有个 BETA_silence 参数。这是为了方法复用而预留的参数,适用于数据已在外部修改的情形,只需在内部同步一下数据即可,触发订阅可能引起bug,此时将 silence 设为true即可。不过我认为应当尽量减少方法内部的判断,因此 silence 添加了 BETA_ 前缀,提醒自己有时间的话还是另增一个专门的方法。

以上基本概括 DataSet 的设计思想,剩下的就是更加具体的实现和接口的设计,就不再细说,下面贴出完整代码,实现有些仓促,欢迎批评与指正。
代码:

        /**
         * @constructor DataSet 数据集管理
         * @description 对数据的所有修改历史进行记录,提供撤回、重做等功能
         * @description 内部采用 JSON.stringify 和 JSON.parse对对象进行引用隔离,因此存在性能问题,不适用于大规模的数据存储
         * */
        function DataSet(param){
            return this._init(param);
        }

        !function(){
            'use strict''
            /**
             * @method 初始化
             * @param {Object} options 配置项
             * @return {Null}
             * */
            DataSet.prototype._init = function init(options) {
                try{
                    // 存储具体数据的容器
                    this.dataBase = {};

                    // 日志存储
                    this.log = [
                        {
                            action: 'initial',
                            data: JSON.stringify(options).substr(137) + '...',
                            success: true
                        },
                    ];

                    // 撤回与重做栈
                    this.undoStack = new Array(options.undoSize || 100);
                    this.redoStack = new Array(options.undoSize || 100);

                    this.mutable = !!options.mutable;

                    // 初始化的时候可以传入原始值
                    if(options.data){
                        this.setData(options.data);
                    }
                } catch(err) {
                    this.log = [
                        {
                            action: 'initial',
                            data: 'error:' + err,
                            success: false
                        },
                    ]  // 操作日志
                }
                return this;
            };

            /**
             * @method 设置数据
             * @param {Object|JSON} data 数据必须以键值对格式传入,数据只能是纯粹的Object或Array,不能有循环引用、不能有方法和Symbol
             * @param {Number|*} [undoFlag] 用来标识对历史栈的更改, 1-undo 2-redo 0|undefined-just 默认不进行栈操作
             * @param {Boolean} [BETA_silence] 静默更新,即不触发订阅事件,该方法不够安全,慎用
             * @return {Boolean} 以示成败
             * */
            DataSet.prototype.setData = function setData(data, undoFlag, BETA_silence) {
                // try{
                    var val = null;
                    try {
                        val = JSON.stringify(data);
                    }catch(err) {
                        console.error('DataSet.prototype.setData: the data cannot be parsed to JSON string!');
                        return false;
                    }
                    var dataBase = this.dataBase;
                    var formerData = {};
                    for(var handle in data) {
                        var key = '' + handle;
                        var immutable = !this.mutable;
                        // 保存到撤回/重做栈
                        var thisData = dataBase[key];
                        var newData = immutable && JSON.parse(JSON.stringify(data[key])) || data[key];
                        if(this.dataBase[key]){
                            formerData[key] = immutable &&
                             JSON.parse(JSON.stringify(this.dataBase[key].value)) ||
                              this.dataBase[key].value;
                              
                            // 撤回时版本号减一,否则加一
                            var ver = thisData.version + ((undoFlag !== 1) && 1 || -1);  
                            dataBase[key].value = newData;
                            dataBase[key].version = ver;

                            // 如果该data被设置订阅,执行订阅回调函数
                            var subscribe = dataBase[key].subscribe;
                            (!BETA_silence) &&
                            (subscribe instanceof Function) &&
                            (subscribe(newData, ver));
                        } else {
                            this.dataBase[key] = {
                                origin: newData,
                                version: 0,
                                value: newData,
                            }
                        }
                    }

                    // 回退操作
                    var undoStack = this.undoStack;
                    var redoStack = this.redoStack;
                    var undoLength = undoStack.length;
                    if(!undoFlag){
                        // 普通操作,undo栈记录,redo栈清空
                        undoStack.shift();
                        undoStack.push(formerData);
                        if(!!redoStack.length){
                            redoStack.splice(0);
                            redoStack.length = undoLength;
                        }
                    } else if(undoFlag === 1){
                        // 撤回操作
                        redoStack.shift();
                        redoStack.push(formerData);
                    } else {
                        // 重做操作
                        undoStack.shift();
                        undoStack.push(formerData);
                    }

                    // 记录操作日志
                    this.log.push({
                        action: 'setData',
                        data: val.substr(137) + '...',
                        success: true
                    });

                    return true;
                // } catch (err){
                //     // 记录失败日志
                //     this.log.push({
                //         action: 'setData',
                //         data: 'error:' + err,
                //         success: false
                //     });
                //
                //     throw new Error(err);
                // }
            };

            /**
             * @method 获取数据
             * @param {String|Array} param
             * @return {Object|*} 返回数据依原始数据而定
             * */
            DataSet.prototype.getData = function getData(param) {
                try{
                    var dataBase = this.dataBase;

                    /**
                     * @function 获取单个数据
                     * */
                    var getItem = function getItem(key) {
                        var data = undefined;

                        try{
                            data = (!this.mutable) && 
                                JSON.parse(JSON.stringify(dataBase['' + key].value)) ||
                                dataBase['' + key].value;
                        } catch(err){
                        }

                        return data;
                    };

                    var result = [];

                    if(/string|number/.test(typeof param)){
                        result = getItem(param);
                    } else if(param instanceof Array){
                        result = [];
                        for(var cnt = 0; cnt < param.length; cnt++) {
                            if(/string|number/.test(typeof param[cnt])) {
                                result.push(getItem(param[cnt]))
                            }else {
                                console.error('DataSet.prototype.getData: requires param(s) ,which typeof string|Number');
                            }
                        }
                    } else {
                        console.error('DataSet.prototype.getData: requires param(s) ,which typeof string|Number');
                    }

                    this.log.push({
                        action: 'getData',
                        data: JSON.stringify(result || []).substr(137) + '...',
                        success: true
                    });

                    return result;
                } catch(err) {
                    this.log.push({
                        action: 'getData',
                        data: 'error:' + err,
                        success: false
                    });
                    console.error(err);

                    return false;
                }
            };

            /**
             * @method 判断DataSet中是否有某个键
             * @param {String} key
             * @return {Boolean}
             * */
            DataSet.prototype.hasData = function hasData(key) {
                return this.dataBase.hasOwnProperty(key);
            };

            /**
             * @method 撤回操作
             * */
            DataSet.prototype.undo = function undo() {
                var self = this;
                var undoStack = self.undoStack;

                // 获取上一次的操作
                var curActive = undoStack.pop();
                undoStack.unshift(null);

                // 撤回生效
                if(curActive){
                    self.setData(curActive, 1);
                    return true;
                }
                return null;
            };

            /**
             * @method 重做操作
             * */
            DataSet.prototype.redo = function redo() {
                var self = this;
                var redoStack = self.redoStack;
                redoStack.unshift(null);
                var curActive = redoStack.pop();

                // 重做生效
                if(curActive){
                    this.setData(curActive, 2);
                    return true;
                }
                return null;
            };

            /**
             * @method 订阅数据
             * @description 注意每个key只能被订阅一次,多次订阅将只有最后一次生效
             * @param {String} key
             * @param {Function} callback 在订阅的值发生变化的时候执行,参数为所订阅的值
             * @return {Null}
             * */
            DataSet.prototype.subscribe = function subscribe(key, callback) {
                if(typeof key !== 'string'){
                    console.warn('DataSet.prototype.subscribe: required a "key" as a string.');
                    return null;
                }

                if(callback && callback instanceof Function){
                    try{
                        if(this.hasData(key)){
                            this.dataBase[key].subscribe = callback;
                        } else {
                            var newData = JSON.parse('{"' + key + '":null}');
                            this.setData(newData, false);
                            this.dataBase[key].subscribe = callback;
                        }
                    } catch (err) {

                    }
                }

                return null;
            };
            
            return null;
        }();

君迹我心
5.1k 声望44 粉丝

WEB前端,懂点皮毛。