JS二维数据处理逻辑封装探究

一、目的

定义出一个专门用于处理二维数据的组件，所谓二维数据就是能用二维表格显示出来的数据，所谓处理就是增删改查，很简单。

二、约束

外部程序给该组件传入如下形式的对象，让该组件自行解析。

var testData = {
    metadata: [{name: 'fid', label: 'fid', datatype: 'string', visible: 'false'},
        {name: 'fName', label: '名称', datatype: 'string', visible: 'true'},
        {name: 'fAge', label: '年龄', datatype: 'int', visible: 'true'}],
    data: [{fid: 'id_1', fName: 'yi', fAge: 25},
        {fid: 'id_2', fName: 'anna', fAge: 24},
        {fid: 'id_3', fName: 'kate', fAge: 26}]
};

testData分为metadata和data两部分，两部分均为数组。

metadata内的每一个元素可以对应于表格的一列，持有列标识（键名暂默认为name），列标签，数据类型，是否可见等属性，并不仅限于传入以上属性，外部程序想传入什么就传入什么，组件只管解析和缓存，不管功能。

data内每一个元素的键集合就是所有metadata的列标识，值就是对应的数据。

可以用表格把testData展现为如下外观，其中列明对应于metadata的列标签值(label)

fid	名称	年龄
id_1	yi	25
id_2	anna	24
id_3	kate	26

三、实现思路

组件命名为DataModel，仅有一个实例，获取方式为DataModel.getInstance。并提供以下公共方法：

parse: 解析数据

size: 获取数据数量

getData(index, prop): 根据索引和属性获取数据值

getMetadata(key, prop): 根据键和属性获取元数据属性值

foreach(type, fn): 迭代数据或元数据。其中type仅限于'metadata'和'data'，迭代过程中会给fn传入迭代对象

update(index, prop, newValue[, callback, url]): 更新数据，返回布尔值。其中callback会在更新成功后调用，url是服务端更新数据地址

addView(view): 添加视图，view必须定义render方法，DataModel更新后(update或parse执行)会触发调用，传入更新信息，通知视图更新

四、单元测试

这里采用TDD的方式，先写测试用例，再写实现。单元测试用例可以在一定程度上减轻手工测试的负担，快速验证基本功能的正确性。并且用例覆盖的场景越全面，质量的有力保障手段，有了它，对代码的修改不再像过去那般战战兢兢了。

1、场景设置

parse
预处理：插入预设数据

size

场景1：获取数据size
getData
场景2：根据索引和属性获取数据值
getMetadata
场景3：根据键和属性获取元数据属性值
foreach
场景4：迭代元数据
场景5：迭代数据
update
场景6：给字符串类型的字段更新数据
场景7：给int类型的字段更新字符串数据
场景8：给int类型的字段更新int数据
场景9：更新一个等于旧值的数据
addView
场景10：更新数据，所有注册于DataModel上的视图都会得到通知

2、qunit测试框架

这是jQuery团队所使用的单元测试框架，轻量级，入门简单，基本用法可以参阅cookbook，这里不作详细介绍。

测试DataModel的代码如下所示：

 /**
  * 测试DataModel
  */

 // 预处理：插入预设数据
 var testData = {
     metadata: [{name: 'fid', label: 'fid', datatype: 'string', visible: 'false'},
         {name: 'fName', label: '名称', datatype: 'string', visible: 'true'},
         {name: 'fAge', label: '年龄', datatype: 'int', visible: 'true'}],
     data: [{fid: 'id_1', fName: 'yi', fAge: 25},
         {fid: 'id_2', fName: 'anna', fAge: 24},
         {fid: 'id_3', fName: 'kate', fAge: 26}]
 };

 // 获取DataModel实例
 var model = DataModel.getInstance();
 model.parse(testData);

 // 测试parse效果
 // -场景1：获取数据size
 test('data size', function(){
 var size = model.size();
 equal(size, 3, 'get data size');
 });

 // -场景2：根据索引和属性获取数据值
 test('get data value by index and prop', function(){
 var data_1 = model.getData(1, 'fName'),
     data_2 = model.getData(2, 'fAge');
     strictEqual(data_1, 'anna', 'OK, name is ' + data_1);
     strictEqual(data_2, 26, 'OK, age is ' + data_2);
 });

 // -场景3：根据键和属性获取元数据属性值
 test('get metadata value by key and prop', function(){
 var val_1 = model.getMetadata('fid', 'visible'),
     val_2 = model.getMetadata('fName', 'label'),
     val_3 = model.getMetadata('fAge', 'datatype');
     strictEqual(val_1, false, 'OK, visible is ' + val_1);
     strictEqual(val_2, '名称', 'OK, label is ' + val_2);
     strictEqual(val_3, 'int', 'OK, datatype is ' + val_3);
 });
 // -测试foreach
 test('test foreach', 7, function(){
     var i = 0;
     // 场景4：迭代元数据
     model.foreach('metadata', function(obj){
         var result = {name: obj.name, label: obj.label, datatype: obj.datatype, visible: obj.visible};
         deepEqual(result, testData.metadata[i], 'for each one metadata testing');
         i++;
     });
     // 场景5：迭代数据
     i = 0;
     model.foreach('data', function(obj){
         deepEqual(obj, testData.data[i], 'for each one data testing');
         i++;
     });
     try{
         model.foreach('other', function(obj){
             ok(false, "shouldn't be called");
         });
     }catch(e){
         ok(true, 'should reach here');
     }
 });

 // 写入数据
 // -更新数据, 预期断言数是8,更新失败后回调不应该被调用，里面的断言也不会被执行。
 test('update data by index, prop and new value', 9, function(){
     var newValue = 'yi_2', newValue_int = 30;
     // 场景6：给字符串类型的字段更新数据
     var result = model.update(0, 'fName', newValue);
     strictEqual(result, true, 'update string value success');
     // 场景7：给int类型的字段更新字符串数据
     result = model.update(1, 'fAge', newValue, function(obj){
         ok(false, "callback function shouldn't be called if update failed");
     });
     strictEqual(result, false, 'OK, update string value into int field failed');
     // 更新失败，保留的还是旧值
     var data = model.getData(1, 'fAge');
     strictEqual(data, 24, 'ok, value is not changed if update failed');
     // 场景8：给int类型的字段更新int数据
     result = model.update(1, 'fAge', newValue_int, function(obj){
         strictEqual(obj.index, 1, 'in calllback obj index is right');
         strictEqual(obj.newValue, 30, 'in callback obj newValue is right');
         strictEqual(obj.prop, 'fAge', 'in callback obj prop is right');
     });
     strictEqual(result, true, 'OK, update int value into int field success');
     // 更新成功，保留的是新值
     data = model.getData(1, 'fAge');
     strictEqual(data, 30, 'ok, value is changed if update success');
     // 场景9：更新一个等于旧值的数据
     result = model.update(1, 'fAge', 30, function(obj){
         ok(false, "this shouldn't be called if newValue is equal to oldValue");
     });
     strictEqual(result, true, "update should return true if old value is equals to new value");

 });
 // -更新数据，检验渲染视图
 test('render data after update data model', 8, function(){
     // 场景10：更新数据，所有注册于DataModel上的视图都会得到通知
     var view1 = {render: function(obj){checkRender(obj);}},
         view2 = {render: function(obj){checkRender(obj);}};
     model.addView(view1).addView(view2);
     model.update(1, 'fAge', 28);
     function checkRender(obj){
         strictEqual(obj.id, 'id_2', 'check id');
         strictEqual(obj.index, 1, 'check index');
         strictEqual(obj.prop, 'fAge', 'check prop');
         strictEqual(obj.newValue, 28, 'check newValue');
     }
 });

严格来说，流程走到这里，因为还没有写实现，应该会报找不到符号之类的错才对。

还有一点要提一下，可以看出，把每个测试用例展开后显示的绿色字，就是给每个断言方法传入的第三个字符串参数。这个字符串更好的写法也许应该是对应于刚才列出的场景。这里没有改，我也是写到这里才想到这一点的。另外我也是第一次用这个东西，所以应该还会有更好的规范写法是我没有发现的，这点请大家自行思考。

五、具体实现

这里贴出DataModel的代码，还有很多功能点没有实现，例如删除，校验，还有parse的处理方式实在太蹩脚了，data只是单纯的赋值，按照数据类型校验或转换啥的都没有。这里的目的更多的是为了表达一种思想。另外这里贴出的肯定也不是最好的方式，因为本人也是缺少经验的js初学者，写的过程中经常发现这里不对，那种处理方式更好一些，大大小小的重构是经常的。这里之所以要写测试用例也是因为这个原因，管我怎么摆弄这些代码，写好了就run一下测试，只要公共接口能正确跑对就ok。

 var DataModel = (function(){
 // 惰性加载
 var _instance;
 return {
     getInstance: function(){
         if(!_instance)
             _instance = constructor();
         return _instance;
     }
 };
 function constructor(){
     var metadata, data,
         viewList = [];
     function renderView(obj){
         for(var i=0, len=viewList.length; i<len; i++){
             viewList[i].render(obj);
         }
     }
     return {
         parse: function(obj){
             if(obj && obj.metadata){
                 metadata = {};
                 var meta, name, i, len;
                 for(i=0, len=obj.metadata.length; i<len; i++){
                     meta = obj.metadata[i];
                     name = meta.name;
                     metadata[name] = new Metadata(meta);
                 }
                 // 注意：data是可以被清空的
                 data = obj.data;
                 // 给注册的视图发送消息
                 renderView();
             }else{
                 throw new Error('the param is invalid');
             }
         },
         // 从服务端取数据
         fetchDataFromServer: function(url){
             var self = this;
             yi.xhr.request('POST', url, {
                 success: function(responseText){
                     if(responseText){
                         var obj = eval("(" + responseText + ")");
                         self.parse(obj);
                     }
                 }
             });
         },
         size: function(){
             if(data)
                 return data.length;
             else
                 throw new Error('data is null');
         },
         getData: function(index, prop){
             if(data)
                 return data[index][prop];
             else
                 throw new Error('data is null');
         },
         getMetadata: function(key, prop){
             if(metadata)
                 if(metadata[key])
                     if(typeof metadata[key][prop] == 'boolean' || metadata[key][prop]){
                         var val = metadata[key][prop];
                         if(val == 'true' )
                             return true;
                         else if(val == 'false')
                             return false;
                         else
                             return val;
                     }
                     throw new Error('metadata[' + key + '] has not the prop: ' + prop);
                 throw new Error('metadata has not the key: ' + key);
             throw new Error('metadata is null');
         },
         update: function(index, prop, newValue, callback, url){
             // 新旧值如果相等就直接返回true可以了
             var oldValue = data[index][prop];
             if(oldValue === newValue)
                 return true;
             var datatype = this.getMetadata(prop, 'datatype');
             // 根据数据类型校验
             switch(datatype){
                 case 'int':
                     if(isNaN(parseInt(newValue)) || parseFloat(newValue) != parseInt(newValue)){
                         return false;
                     }
                     newValue = parseInt(newValue);
                     break;
                 case 'float':
                 case 'number':
                     if(isNaN(newValue = parseFloat(newValue))){
                         return false;
                     }
                     break;
             }
             // 更新数据
             data[index][prop] = newValue;
             // 通知服务端更新数据
             if(url){
                 var id = data[index]['fid'],
                     req = 'id=' + id + '&key=' + prop + '&value=' + newValue,
                     self = this;
                 yi.xhr.request('post', url, {
                     failure: function(){return false;}
                 }, req);
             }
             var obj = {'id': data[index]['fid'], 'index': index, 'prop': prop, 'newValue': newValue};
             // 给注册的视图发送消息
             renderView(obj);
             // 更新后回调
             if(callback) callback(obj);
             return true;
         },
         // 遍历metadata或者data
         foreach: function(type, fn){
             if(!fn) throw new Error('param[fn] is required.');
             if(type === 'metadata'){
                 for(var key in metadata){
                     fn(metadata[key]);
                 }
             }else if(type === 'data'){
                 for(var i=0, len=data.length; i<len; i++){
                     fn(data[i]);
                 }
             }else{
                 throw new Error('param[type] is only limit in "metadata" and "data".');
             }
         },
         // 添加视图
         addView: function(view){
             for(var i=0, len=viewList.length; i<len; i++){
                 if(view == viewList[i])
                     return this;
             }
             viewList.push(view);
             return this;
         }
     };
 }
 })();

 // 元数据数据结构
 function Metadata(config){
     for(var prop in config){
         var val = config[prop];
         this[prop] = val;
     }
     // name属性必须指定
     if(!this['name'])
         throw new Error('name must be provided!');
 }
 Metadata.prototype = {
     constructor: Metadata,
     // 默认属性
     label: 'Default Label',
     datatype: 'string',
     visible: true
 };

简单说明下这段代码的结构：

1、新建DataModel变量

首字母大写，因为它是个类。该变量的值由以下的结构返回

var DataModel = (function(){
// 惰性加载
var _instance;
function constructor(){}
return {
    getInstance: function(){
        if(!_instance)
            _instance = constructor();
        return _instance;
    }
};
})();

=号右边的是一个定义后立刻执行的函数，起到闭包的作用（外部不能访问私有成员_instance和constructor；getInstance方法可以访问_instance和constructor，外部可以访问getInstance；这两个私有成员值不会消失）。

getInstance里面是经典的单例模式写法。由于constructor有可能是一个比较耗费资源的操作，因此不必在页面加载的时候立刻执行，延迟到用户需要的时候，再通过getInstance获取。

2、另一个闭包，constructor函数

function constructor(){
    var metadata, data,
        viewList = [];
    function renderView(obj){
        for(var i=0, len=viewList.length; i<len; i++){
            viewList[i].render(obj);
        }
    }
    return{
        // parse
        // fetchDataFromServer
        // size
        // getData
        // ...
    };
}

外部程序通过getInstance获得constructor返回的那个对象字面量，然后就可以访问组件的公共api(parse,getData,etc.)了。

可以通过addView给私有成员viewList添加成员。update或parse执行到最后会内部调用私有方法renderView，给所有注册的视图发送消息（观察者模式）。

注意，注册到DataModel的视图必须实现render方法。

3、另外，这个实现代码存在两个约束。

一是在update方法里面，通知服务端更新数据之后，构造更新信息obj那里，其中id值是取data[index]['fid']。也就是说，数据的主键名已经写死为fid了。这里我能够想到的就只有两种处理方式，一种就是现在所使用的，一种是生成传递给parse方法的参数obj(自己写或者服务端生成)时，指定一个元数据对象为主键(可以给主键元数据对象增加一个identity或primary属性)。经过考虑，我还是觉得用写死的处理方式比较好。二是元数据里面，列标识的键名也写死为name了，而且在构造Metadata对象时，参数必须指定name属性值。