转载

轻量jquery框架之--组件交互基础设计

概要

组件交互基础，即考虑在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设计

轻量jquery框架之--组件交互基础设计

三、整体代码

  1 /**   2  * @author huangjingwen   3  * 封装通用公用接口   4  * @version 1.0   5  */   6 (function ($) {   7     var ajaxOpts = {   8         timeout: 1000 * 60,   9         type: "POST",  10         dataType: 'json',  11         async: true,  12         preRequest: function () {//请求前  13         },  14         /***  15         *ajax错误  16         ***/  17         error: function (xhr, status, errorThrown) {  18             this.final(status);  19         },  20         /**  21         *请求成功，并返回结果  22         ***/  23         success: function (res) {  24             this.final(res);  25             if (res.code === 0) {  26                 //res.convert 指的是返回的data属性值是json数据，但是是字符串格式，需要转为json对象后才传给客户代码  27                 if (typeof res.convert != 'undefined' && (res.convert || res.convert === 'true'))  28                     res.data = eval("(" + res.data + ")");  29                 this.ok(res.data);  30             } else {  31                 this.fail(res.message);  32             }  33         },  34         /**  35         *当返回结果是正确时的处理  36         **/  37         ok: function (data) {  38         },  39         /***  40         *当返回结果是非正确时的处理  41         ***/  42         fail: function (msg) {  43             alert(msg);  44         },  45         /**  46         * 无论如何都回调的函数  47         ****/  48         final: function (res) {//无论成功，失败，错误都执行的回调  49         }  50     };  51     /**  52     *框架的ajax统一入口  53     *所有ajax返回均以 {code:'',message:'',data:{}}的格式返回  54     *code=0表示服务器无异常运行并返回结果，code=1时，表示服务器出现异常并返回提示  55     *message，用与服务器返回的信息提示  56     *data,用于服务器返回的数据，如tree组件、datagrid组件返回的数据就保存到data当中  57     ****/  58     $.request = function () {  59         var args = arguments[0];  60         var opts;  61         if (args != undefined)  62             opts = $.extend({}, ajaxOpts, args);  63         else  64             opts = ajaxOpts;  65         opts.preRequest();  66         $.ajax(opts);  67     };  68     /***  69     * 某个html标签加载远程html文件  70     *options={  target:jquery目标对象,  71     *           url:'远程地址',   72     *           params:{},//参数                       73     *           load:function(){.........} , //加载前处理事件  74     *           loaded:function(result){.........}  //加载后处理事件   75     *   }             76     ***/  77     $.htmlLoad = function () {  78         var opts = arguments[0];  79         opts.target.html("<div class='loading'>正在加载......</div>");  80         if (typeof opts.load === 'function') {  81             opts.load.call(opts.target);  82         }  83         var url = opts.url;  84         opts.target.load(url, opts.prarms, function (xmlReq, statu, error) {  85             if (statu === 'error') {  86                 opts.target.html(xmlReq);  87             } else {  88                 if (typeof opts.loaded === 'function') {  89                     opts.loaded.call(opts.target);  90                 }  91             }  92         });  93     };  94     /**  95     *将form表单转为json对象  96     ***/  97     $.parseForm = function () {  98         var opts = arguments[0];  99     }; 100     /*** 101     *将json对象填充到表单中 102     ***/ 103     $.fillForm = function () { 104         var opts = arguments[0]; 105     }; 106     /*** 107     *重置表单 108     ****/ 109     $.resetForm = function () { 110  111     }; 112     /** 113     *信息弹唱框 114     ***/ 115     $.alert = function () { 116     }; 117     /** 118     *打开一个窗口 119     ***/ 120     $.window = function () { 121     }; 122     /*** 123     *获取字符长度 124     **/ 125     $.getCharWidth = function (text, fontSize) { 126         var span = document.getElementById("__getcharwidth"); 127         if (span == null) { 128             span = document.createElement("span"); 129             span.id = "__getcharwidth"; 130             document.body.appendChild(span); 131             span.style.visibility = "hidden"; 132             span.style.whiteSpace = "nowrap"; 133         } 134         span.innerText = text; 135         span.style.fontSize = fontSize; 136         return span.offsetWidth; 137     }; 138     /*** 139     *扩展一个通用的curd对象，用于结合datagrid实现通用的curd操作api封装 140     ***/ 141     $.curd = function () { 142  143     }; 144     $.curd.prototype = { 145     }; 146 })(jQuery);