轻量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设计

　　

三、整体代码

　　

  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);

 

代码下载：https://code.csdn.net/hjwen/open-ui/tree/master

 

　　　　

 

posted @ 2015-05-02 11:11  hjwen  Views(866)  Comments(1)  Edit  收藏  举报