概要
组件交互基础，即考虑在JQUERY对象下($)下扩展所有组件都需要用到的通用api，如ajax入口、对表单的操作、html片段加载、通用的配合datagrid通用的curd客户端对象等。
扩展api如下
一、ajax设计
（1）统一ajax请求的流程预计数据返回格式、ajax请求的数据返回格式如下：
{
code:0/1, //0 表示正确运行，并返回了信息、数据；1表示非正确返回结果(可能是程序异常或者运算结果异常)，异常信息放到message属性中
message:"服务端提示的信息",
data:{} //数据，如果返回的结果需要带数据，则保持到data属性中，如tree，datagrid的请求返回的数据就放在该属性中
}
（2）将ajax的请求流程设计为try.. catch.. finally...模式，即无论是正确运行还是错误运行，都应该有一个finally执行，这样客户代码可以注册自己需要运行的函数
（3）ajax默认配置定义
var ajaxOpts = {
timeout: 1000 * 60,
type: "POST",
dataType: 'json',
async: true,
preRequest: function () {//请求前
},
/***
*ajax错误
***/
error: function (xhr, status, errorThrown) {
this.final(status);
},
/**
*请求成功，并返回结果
***/
success: function (res) {
this.final(res);
if (res.code === 0) {
//res.convert 指的是返回的data属性值是json数据，但是是字符串格式，需要转为json对象后才传给客户代码
if (typeof res.convert != 'undefined' && (res.convert || res.convert === 'true'))
res.data = eval("(" + res.data + ")");
this.ok(res.data);
} else {
this.fail(res.message);
}
},
/**
*当返回结果是正确时的处理
**/
ok: function (data) {
},
/***
*当返回结果是非正确时的处理
***/
fail: function (msg) {
alert(msg);
},
/**
* 无论如何都回调的函数
****/
final: function (res) {//无论成功，失败，错误都执行的回调
}
};
二、其他通用api设计
三、整体代码
/**
* @author huangjingwen
* 封装通用公用接口
* @version 1.0
*/
(function ($) {
var ajaxOpts = {
timeout: 1000 * 60,
type: "POST",
dataType: 'json',
async: true,
preRequest: function () {//请求前
},
/***
*ajax错误
***/
error: function (xhr, status, errorThrown) {
this.final(status);
},
/**
*请求成功，并返回结果
***/
success: function (res) {
this.final(res);
if (res.code === 0) {
//res.convert 指的是返回的data属性值是json数据，但是是字符串格式，需要转为json对象后才传给客户代码
if (typeof res.convert != 'undefined' && (res.convert || res.convert === 'true'))
res.data = eval("(" + res.data + ")");
this.ok(res.data);
} else {
this.fail(res.message);
}
},
/**
*当返回结果是正确时的处理
**/
ok: function (data) {
},
/***
*当返回结果是非正确时的处理
***/
fail: function (msg) {
alert(msg);
},
/**
* 无论如何都回调的函数
****/
final: function (res) {//无论成功，失败，错误都执行的回调
}
};
/**
*框架的ajax统一入口
*所有ajax返回均以 {code:'',message:'',data:{}}的格式返回
*code=0表示服务器无异常运行并返回结果，code=1时，表示服务器出现异常并返回提示
*message，用与服务器返回的信息提示
*data,用于服务器返回的数据，如tree组件、datagrid组件返回的数据就保存到data当中
****/
$.request = function () {
var args = arguments[0];
var opts;
if (args != undefined)
opts = $.extend({}, ajaxOpts, args);
else
opts = ajaxOpts;
opts.preRequest();
$.ajax(opts);
};
/***
* 某个html标签加载远程html文件
*options={ target:jquery目标对象,
* url:'远程地址',
* params:{},//参数
* load:function(){.........} , //加载前处理事件
* loaded:function(result){.........} //加载后处理事件
* }
***/
$.htmlLoad = function () {
var opts = arguments[0];
opts.target.html("<div class='loading'>正在加载......</div>");
if (typeof opts.load === 'function') {
opts.load.call(opts.target);
}
var url = opts.url;
opts.target.load(url, opts.prarms, function (xmlReq, statu, error) {
if (statu === 'error') {
opts.target.html(xmlReq);
} else {
if (typeof opts.loaded === 'function') {
opts.loaded.call(opts.target);
}
}
});
};
/**
*将form表单转为json对象
***/
$.parseForm = function () {
var opts = arguments[0];
};
/***
*将json对象填充到表单中
***/
$.fillForm = function () {
var opts = arguments[0];
};
/***
*重置表单
****/
$.resetForm = function () { };
/**
*信息弹唱框
***/
$.alert = function () {
};
/**
*打开一个窗口
***/
$.window = function () {
};
/***
*获取字符长度
**/
$.getCharWidth = function (text, fontSize) {
var span = document.getElementById("__getcharwidth");
if (span == null) {
span = document.createElement("span");
span.id = "__getcharwidth";
document.body.appendChild(span);
span.style.visibility = "hidden";
span.style.whiteSpace = "nowrap";
}
span.innerText = text;
span.style.fontSize = fontSize;
return span.offsetWidth;
};
/***
*扩展一个通用的curd对象，用于结合datagrid实现通用的curd操作api封装
***/
$.curd = function () { };
$.curd.prototype = {
};
})(jQuery);
代码下载：https://code.****.net/hjwen/open-ui/tree/master