越来越多的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) {
ee.text=e.name;
ee.value=e.id;
});
ok,这样问题就解决了,这种方式在很多地方都可以使用.小小技巧,分享一下.
来源:Ajax中国,作者北极星
分享到:
相关推荐
绿色版JSON格式化工具,解压后直接可以使用,打开JsonView.exe的执行文件即可。对于前端和后端开发人员来说是一款不错的工具!
后端接口和文档自动化,前端(客户端) 定制返回JSON的数据和结构!.zip,gitee最有价值的projecta json传输协议和一个自动提供api和文档的orm库
操作人员可以选择将需要上传的病害信息、照片及其详情,系统将数据打包成JSON格式并上传到后台服务器,以适配服务器提供的RESTful风格接口,且方便后续补充更多功能,可扩展性高。使用了百度地图提供的SDK进行定位并...
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
前端组件越来越多,组件的配置一般都是JSON格式的。有些面向用户展示的组件,很多时候运营人员是要修改配置的的,但是把代码暴漏给运营人员是相当不靠谱的,无论是json还是html。一直想有个工具,可以直接按照一定...
3、好处:简化了前端数据读取与后端数据赋值。 代码如下:function GetJSONStr(class_name) { var a = []; //文本框 $(“.” + class_name).filter(“:text”).each(function(i) { //alert(this
Swagger是一个规范和完整的...在项目开发中,根据业务代码自动生成API文档,给前端提供在线测试,自动显示JSON格式,方便了后端与前端的沟通与调试成本。 Swagger有一个缺点就是侵入性模式,必须配置在具体的代码里。
系统后台模块采用 MVC 与 前后端分离 的架构思想,引入了 spring boot 2 框架构建 Web 项目,以及提供 json 格式的数据接口给予前端进行接口调用,从而实现前后端分离的架构思想。前端采用 layUI 作为前端 UI 框架,...
Mozilla印度开发人员排行榜 您在同行中表现如何? 在此排行榜中查找。 它是如何工作的? 页首横幅有一个和一个前端( this是... 它仅要求后端提供的JSON,并以使我们更好地了解开发人员贡献指标的方式对其进行格式化。
2.web应用优化(json,sql ,web前端html,css,js压缩格式化代码,web客户端性能提升) 3.数据库性能优化,数据库参数设置,查询,数据库连接字符串优化,SQL耗时优化,SQL格式化,SQL美化 4.服务器高并发性能优化( ...
介绍Vulnogram是用于以CVE JSON格式创建和编辑CVE信息以及生成建议的工具。 Vulnogram这个名字的灵感来自希腊语后缀“ -gram”,该词后缀用于表示特别是以某种方式记录或记录的东西。 以标准格式记录的与漏洞相关的...
自动校验与格式化,支持高亮和收展 自动生成各种语言代码,一键下载 自动管理与测试接口用例,一键共享 自动给请求JSON加注释,一键切换 2、对于前端 不用再向后端催接口、求文档 数据和结构完全定制,要啥有啥 看...
自动校验与格式化,支持高亮和收展 自动生成各种语言代码,一键下载 自动管理与测试接口用例,一键共享 自动给请求JSON加注释,一键切换 2、对于前端 不用再向后端催接口、求文档 数据和结构完全定制,要啥有...
一个简单的前后端分离Demo,前后端交互JSON数据格式 软件架构 后端基于Maven构建,采用Jdbc完成数据持久化操作。代码分层编写,分为Controller控制器层,Service业务逻辑层,dao持久化层,以及相对应的工具类。 ...
1、灵活的图形化增加和删除节点;删除和恢复删除节点后,其他节点的序号自动变更。 2、将用户定义的节点信息生成json格式。 3、后端传回的json格式的数据,在前端显示。
Dashboard ,图形化的HTML格式多维度测试报告。借助这个特性,可以很大程度上降低我们搭建基于JMeter的性能测试平台时,在结果展示上的难度,将更多的经历放在后端的平台功能而不是去临时学习前端图表库。
2. 安全问题集中在接口上,由于接受json格式,防止了注入型等安全问题 3. 前端无关化,后端只负责数据处理,前端表现方式可以是任何前端语言(android,ios,html5) 4. 前端和后端人员更加专注于各自开发,只需接口...
在Spark Shell中撰写Scala代码,通过JDBC连接MySQL获取数据,并大部分通过Spark SQL来分析出结果,然后以json格式保存在HDFS中。手动将HDFS中的数据下载下来,Django通过I/O操作,获取到分析成功的结果数据,然后...
1. 前后端分离:前端 Echarts...3. 数据格式:JSON; 更多Python&Echarts版的数据可视化大屏源码: https://yydatav.blog.csdn.net/article/details/120705616 更多Java SpringBoot&Echarts版的数据可视化大屏源码: ...
dayjs 日期格式化 clipboard 复制粘贴插件 nprogress 加载进度条 vue-clickaway 点击元素外隐藏元素插件 后端技术 技术 说明 koa2 基于Node.js的web框架 mongoose 操作MongoDB数据库的模块 jsonwebtoken token生成...