首页 > 代码库 > 我的开源框架之交互控制、组件通用工具封装
我的开源框架之交互控制、组件通用工具封装
需求：
（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)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。