构建一个前端库-Data对象深入分析

上一次，我依据Ajax原理简单讲了一下怎么样封装一个对象，用于执行页面上需要的Ajax请求，并保存Ajax数据。

但是一个完善的Data对象需求有哪些？

可控制权限

可并发

可收集异常信息

可有进度提示

可分页

可数据验证

 

但是以上的需求，有很多都是建立在一个View的显示上面的，例如进度提示，

我们通常用这样一个组件去表示数据还在查询中。所以，我们并不能把以上许多功能都封装在Data组件中，例如分页、数据验证。

于是，我们不得不提到一个模式：

MVVM，这个模式是SilverLight盛行的时候被提出的，最大的特点就是数据Model和View有效解耦。

 

当View上面数据被更改时，不需要执行如 Data.Name = Input.Value(); 对Model进行赋值。

那么，这一部分工作，我们把它放入核心库去做，就可以解放掉程序员的少部分的编码工作。

 

针对于增删改、查这两种不同的效果，我们在一个Data中定义两个数组

//数据从哪来
this.submitFrom = [];
//数据到哪去
this.bindingTo = [];

在声明一个View对象的时候，我们用了这两个参数，

new Input({
//数据源是谁
dataSource:QueryData,
//赋值给谁
submitTo:ModifyData});

当一个新的View被实例化的时候，我们用

this.submitForm.push(this.dataSource);和this.bindingTo.push(this.submitTo)

将这两个对象存在Data中，当Data对象调用Ajax方法，数据发生变化的时候
就可以操作与之对应的View对象进行值的变化了。

 

以上细节业务开发人员不需要关心，只需要简单的使用页面对象和数据对象就行了。

我们来看一个实例：

//声明并给这个data赋值
var data = new radf.Data({id:"data"});
data.setData([{test:"testMessage"}]);

//声明两个View绑定这个data
var view1 = new radf.Input({id:"view1",title:"test1",width:200,dataSource:data,dataBindding:{field:"test",mode:2}});
var view2 = new radf.Input({id:"view2",title:"test2",width:200,top:25,dataSource:data,dataBindding:{field:"test",mode:2}});

效果如下：

这样，一个用javascript构建的MVVM模式就实现了，

开发人员只需要在View中补充，需要验证的信息，需要分页的条数，即可实现Data对象和View的联动操作。

 

最后补弃一个json的数据的封装方法。

serializeObject = function (o) {
    var n;
    var s = "";
    for (n in o){
        if (typeof o[n] == "object") {
        //递归
        s += "," + arguments.callee(o[n]);
        } else if (typeof o[n] == "string") {
        //字符串
        s += "," + n + ":" + "\"" + o[n] + "\"";
        } else {
        //其它
        s += "," + n + ":" + o[n];
    }
        }
        if (o instanceof Array) {
        //数组
        s = "[" + s.substr(1) + "]";
        } else {
        //对象
        s = "{" + s.substr(1) + "}";
        }
        return s;
}