首页 > 代码库 > 我的开源框架之交互控制、组件通用工具封装

我的开源框架之交互控制、组件通用工具封装

需求:

  (1)后期的jquery组件具有一些通用的需求,如ajax请求,数组的处理等

  

  (2)从系统UI与服务器集成的角度看,一个系统的前端交互需要做一个统一的封装来接受用户交互,同时统一于服务器的请求

  (3)前端的日志功能需要统一

  

  (4)统一的验证入口

  

  (5)综上:我们需要一个封装了通用表单操作(表单转对象,对象填充到表单,打开一个窗口),封装系统前端的统一ajax交互,ajax交互返回格式统一以便做统一处理。

 

初步代码实现(后期将会根据实际需求调整)

  1 /******************************************
  2 *作者:hjwen
  3 *电邮:hjwen88@126.com
  4 *版本:1.0
  5 *说明:myui是与服务器mvc web框架集成的关键,封装了对表单的常用操作,如:表单转对象,ajax统一交互,打开一个窗口等
  6 *      myui也是后期组件的依赖项,组件中用到日志,ajax等功能依赖此对象         
  7 *版权:中国通用开源许可协议V1.0
  8 ******************************************/
  9 (function($){
 10     /****
 11     *扩展myui到jquery
 12     ****/
 13     $.extend({
 14         myui: {
 15             version: ‘1.0‘,
 16             release: ‘2015.05.18‘,
 17             isDebug: false,
 18             /***
 19            *日志,日志需要对低版本ie做特殊处理
 20            ****/
 21             log: function (message) {
 22                 if (this.isDebug) {
 23                     if (window.console) {
 24                         window.console.log(typeof message != ‘string‘ ? JSON.stringify(message) : message);
 25                     } else {
 26                         alert(typeof message != ‘string‘ ? JSON.stringify(message) : message);
 27                     }
 28                 }                         
 29             },
 30             /***
 31             * 统一所有的服务器请求
 32             *@param options={
 33                             submit:‘触发提交的元素id/jq对象‘,
 34                             loadingContainer:‘提示框对象/id‘,
 35                             url:‘地址‘,
 36                             async:‘true/false‘,
 37                             type:‘post/get‘,
 38                             timeout:超时默认值不设置,
 39                             params:‘参数key1=value1&key2=value2 ‘,
 40                             dataType:‘json/xml/html/text/script‘ ,//默认json                           
 41                             okdeal:function(result){alert(‘返回结果正确的处理‘);},
 42                             faildeal:function(result){alert(‘返回结果错误处理‘);},
 43                             success:function(result){alert(‘ajax请求成功的处理‘);},
 44                             error:function(xhr){alert(‘ajax请求错误处理‘)}
 45                           }
 46             @return 系统返回的json 格式={code:‘状态码,0=处理ok,其他为错误‘,message:‘错误结果时的提示,如果没有错误则为空‘,data:‘返回的数据,string格式,如果是json需要再自行eval‘}
 47             **/
 48             ajaxRequest: function (options) {
 49                 if (typeof options.url === ‘undefined‘) {
 50                     alert("options.url未设置!");
 51                     return;
 52                 }
 53                 var faildeal = function (result) {
 54                     alert(result.message);
 55                 };
 56                 var okdeal = function (result) {
 57                 };
 58                 if (typeof options.faildeal === ‘function‘)
 59                     faildeal = options.faildeal;
 60 
 61                 if (typeof options.okdeal ===‘function‘)
 62                     okdeal = options.okdeal;
 63 
 64                 var submitObj = null;
 65                 if (typeof options.submit != ‘undefined‘) {
 66                     if (typeof options.submit === ‘string‘) {
 67                         submitObj = $(options.submit);
 68                     } else {
 69                         submitObj = options.submit;
 70                     }
 71                 }
 72                 var loadingContainer = null;
 73                 var loadingObj = null;
 74                 if (typeof options.loadingContainer != ‘undefined‘) {
 75                     if (typeof options.loadingContainer === ‘string‘) {
 76                         loadingContainer = $(options.loadingContainer);
 77                     } else {
 78                         loadingContainer = options.loadingContainer;
 79                     }
 80                 }
 81                 //设置默认处理
 82                 var ajaxOptDefault = {
 83                     url:options.url,
 84                     type: "POST",                   
 85                     dataType: ‘json‘,
 86                     async: true,
 87                     error: function (xhr, status, errorThrown) {
 88                         if (loadingObj != null)
 89                             loadingObj.remove();
 90                         if (submitObj != null)
 91                             submitObj.removeAttr(‘disabled‘);
 92                         alert("请求发生错误,请您稍后再试!" + xhr.responseText);
 93                     },
 94                     success: function (result) {
 95                         if (loadingObj != null)
 96                             loadingObj.remove();
 97                         if (submitObj != null)
 98                             submitObj.removeAttr(‘disabled‘);
 99                         if (result.code == 0) {
100                             okdeal(result.data);
101                         } else {
102                             faildeal(result);
103                         }
104                     }
105                 };               
106                 if (typeof options.async == ‘boolean‘)
107                     ajaxOptDefault.async = options.async;
108                 if (typeof options.type == ‘string‘)
109                     ajaxOptDefault.type = options.type;
110                 if (typeof options.dataType == ‘string‘)
111                     ajaxOptDefault.dataType = options.dataType;
112                 if (typeof options.timeout == ‘number‘)
113                     ajaxOptDefault.timeout = options.timeout;
114                 if (typeof options.params != ‘undefined‘)
115                     ajaxOptDefault.params = options.params;  
116                 if (typeof options.error === ‘functon‘)
117                     ajaxOptDefault.error = options.error;
118                 if (typeof options.success === ‘functon‘)
119                     ajaxOptDefault.success = options.success;
120                 if (submitObj!=null)
121                     submitObj.attr(‘disabled‘, ‘disabled‘);
122                 if (loadingContainer != null)
123                     loadingObj=$("<div class=‘loading icon-loading‘>正在加载......</div>").appendTo(loadingContainer);
124                 $.ajax(ajaxOptDefault);
125             },
126             /***
127             * 某个html标签加载远程html文件
128             *options={
129             *       target:jquery目标对象,
130             *       settings = { url:‘远程地址‘,                      
131             *                   load:function(){.........} , //加载前处理事件
132             *                   loaded:function(result){.........}  //加载后处理事件       
133             *        }
134             *   }           
135             ***/
136             objectLoadContect: function (options) {
137                 var opts = options.settings;
138                 if (typeof opts === ‘object‘ && typeof opts.url != ‘undefined‘ && opts.url != ‘‘) {
139                     options.target.html("<div class=‘loading icon-loading‘>正在加载......</div>");                    
140                     if (typeof opts.load === ‘function‘) {
141                         opts.load();
142                     }                   
143                     options.target.load(opts.url, function () {
144                         if (typeof opts.loaded === ‘function‘) {
145                             opts.loaded(options.target);
146                         }
147                     });
148                 }
149             },
150             /***
151             *填充表单
152             ****/
153             fillForm: function (options) {
154             },
155             /***
156             *表单转json对象
157             ****/
158             parseForm: function (options) {
159             },
160             /***
161             *重置表单
162             ****/
163             resetForm: function (options) {
164             },
165             /**
166             *打开窗口 
167             ***/
168             openWindow: function (options) {
169             },
170             /***
171             * 按下标移除数组元素,返回新数组
172             * srcArray:源数组,indexArr:下标数组
173             ***/
174             removeArrayEle: function (srcArray, indexArr) {
175                 var newArray = [];                
176                 for (var i = 0, len = srcArray.length; i < len;++i){
177                     var nodel = true;
178                     for (var j = 0, len1 = indexArr.length; j < len1; ++j) {
179                         if (i == parseInt(indexArr[j]))
180                             nodel=false;
181                     }
182                     if (nodel) {
183                         newArray.push(srcArray[i]);
184                     }
185                 }
186                 return newArray;
187             }
188         }
189     });   
190 })(jQuery)