成都哪家做网站/营销型网站建设实训总结

      越来越多的js供我们来选择,在使用过程中插件会提供一个数据给我们进行填充.现在大部分的数据格式都是为json.这个格式就需要后端开发人员提供给前端了.web的软件无非就是后端给前端数据，然后前端再转数据类型.然而这个转换该如何来做?

矛盾的产生:

1.前端的一个插件,下面以一个简单的jQuery插件为例子，这个方法可以帮助你为一个select标签添加项

    $.fn.setSelect = function(data){
        var self = this;
        self.empty();
        $.each(data, function(i){
            var oOption = document.createElement("option");
            oOption.innerText = this.text;
            oOption.value = this.value;
            oOption.selected = this.selected;
            self[0].appendChild(oOption);
        });
    }

 

作为这个插件的开发者,感觉这个方法很完美.它要求json的传进来的格式是这样的.

var data = [  
       {text:'',value:''},  
        {text:'',value:''},  
        {text:'',value:''},  
        {text:'',value:'',selected:true}] 

 

然后我告诉后端开发人员,"你只要给我上面的格式就可以了".

这个时候插件的开发者并没有意识到这个世界上的数据接口并不是他说了算的,后端有着其自己的业务逻辑.

现在假设我要显示一个后端为Employee的列表

    public class Employee
    {
        public string Name { get; set; }

        public Guid Id { get; set; }

        public bool isOnline { get; set; }
    }

 

作为后端人员，最简单的做法如下

List<Employee> list = GetEmployeeList();
return list.ToJSON();

 

问题是Employee的属性不符合前端插件的要求.还好c# 3.0有匿名对象.还可以解决这个问题.现在更改后如下

            List<Employee> list = GetEmployeeList();

            var jsonList = from employee in list
                           select new { text = employee.Name, value = employee.Id, selected = employee.isOnline };
           return jsonList.ToJSON();

 

后来后端人员发现,这样的情况实在太多了,好好的一个Employee对象，里面的属性全变成text,value,selected了...

这里便出现了矛盾,前端的接口也可以根据后端来定的。即数据也可以这样的

var data=[{Name:'',Id:'',isOnline:""}];

 

前端的开发者妥协了,无奈还是接收上面的数据.然后做了一个循环,把数据转成符合插件接口的数据.

 

 

        var transdateData=[];
        $.each(data,function() {
            var newData={};
            newData.text=data.Name;
            newData.value=data.Id;
            newData.selected=data.isOnline;
            transdateData.push(newData);
        });

 

这样的做法并不好，为了用插件在循环,数据量大了就见的出来了.当然我们的目标还是需要转换数据的,这个转换确实应该前端来做,但我们要换个方法.

二.事件回调，格式化数据

改进插件的使用方法，在添加dom之前，格式化数据.现在插件代码如下,添加了一个formatEvent方法

    $.fn.setSelect = function(data,formatEvent){
        var self = this;
        self.empty();
        $.each(data, function(i){
            if(formatEvent) formatEvent(this);
            var oOption = document.createElement("option");
            oOption.innerText = this.text;
            oOption.value = this.value;
            oOption.selected = this.selected;
            self[0].appendChild(oOption);
        });
    }

 

插件使用方法

 

        var data = [  
         {name:'xx',id:'xx'},  
         {name:'xx',id:'xx'}];
            $("#xx").setSelect(data,function(e) {
                e.text=e.name;
                e.value=e.id;
            });

 

ok,这样问题就解决了，这种方式在很多地方都可以使用.小小技巧,分享一下.