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

　　

三、整体代码

　　

 /**
  * @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.csdn.net/hjwen/open-ui/tree/master