我的开源框架之交互控制、组件通用工具封装
需求：
（1）后期的jquery组件具有一些通用的需求，如ajax请求，数组的处理等
（2）从系统UI与服务器集成的角度看，一个系统的前端交互需要做一个统一的封装来接受用户交互，同时统一于服务器的请求
（3）前端的日志功能需要统一
（4）统一的验证入口
（5）综上：我们需要一个封装了通用表单操作（表单转对象，对象填充到表单，打开一个窗口），封装系统前端的统一ajax交互，ajax交互返回格式统一以便做统一处理。
初步代码实现（后期将会根据实际需求调整）
/****************************************** *作者:hjwen *电邮:[email protected] *版本：1.0 *说明：myui是与服务器mvc web框架集成的关键,封装了对表单的常用操作，如：表单转对象，ajax统一交互，打开一个窗口等 * myui也是后期组件的依赖项，组件中用到日志，ajax等功能依赖此对象 *版权：中国通用开源许可协议V1.0 ******************************************/ (function($){ /**** *扩展myui到jquery ****/ $.extend({ myui: { version: '1.0', release: '2015.05.18', isDebug: false, /*** *日志，日志需要对低版本ie做特殊处理 ****/ log: function (message) { if (this.isDebug) { if (window.console) { window.console.log(typeof message != 'string' ? JSON.stringify(message) : message); } else { alert(typeof message != 'string' ? JSON.stringify(message) : message); } } }, /*** * 统一所有的服务器请求 *@param options={ submit:'触发提交的元素id/jq对象', loadingContainer:'提示框对象/id', url:'地址', async:'true/false', type:'post/get', timeout:超时默认值不设置, params:'参数key1=value1&key2=value2 ', dataType:'json/xml/html/text/script' ,//默认json okdeal:function(result){alert('返回结果正确的处理');}， faildeal:function(result){alert('返回结果错误处理');}, success:function(result){alert('ajax请求成功的处理');}, error:function(xhr){alert('ajax请求错误处理')} } @return 系统返回的json 格式={code:'状态码，0=处理ok，其他为错误',message:'错误结果时的提示，如果没有错误则为空',data:'返回的数据，string格式，如果是json需要再自行eval'} **/ ajaxRequest: function (options) { if (typeof options.url === 'undefined') { alert("options.url未设置！"); return; } var faildeal = function (result) { alert(result.message); }; var okdeal = function (result) { }; if (typeof options.faildeal === 'function') faildeal = options.faildeal; if (typeof options.okdeal ==='function') okdeal = options.okdeal; var submitObj = null; if (typeof options.submit != 'undefined') { if (typeof options.submit === 'string') { submitObj = $(options.submit); } else { submitObj = options.submit; } } var loadingContainer = null; var loadingObj = null; if (typeof options.loadingContainer != 'undefined') { if (typeof options.loadingContainer === 'string') { loadingContainer = $(options.loadingContainer); } else { loadingContainer = options.loadingContainer; } } //设置默认处理 var ajaxOptDefault = { url:options.url, type: "POST", dataType: 'json', async: true, error: function (xhr, status, errorThrown) { if (loadingObj != null) loadingObj.remove(); if (submitObj != null) submitObj.removeAttr('disabled'); alert("请求发生错误，请您稍后再试！" + xhr.responseText); }, success: function (result) { if (loadingObj != null) loadingObj.remove(); if (submitObj != null) submitObj.removeAttr('disabled'); if (result.code == 0) { okdeal(result.data); } else { faildeal(result); } } }; if (typeof options.async == 'boolean') ajaxOptDefault.async = options.async; if (typeof options.type == 'string') ajaxOptDefault.type = options.type; if (typeof options.dataType == 'string') ajaxOptDefault.dataType = options.dataType; if (typeof options.timeout == 'number') ajaxOptDefault.timeout = options.timeout; if (typeof options.params != 'undefined') ajaxOptDefault.params = options.params; if (typeof options.error === 'functon') ajaxOptDefault.error = options.error; if (typeof options.success === 'functon') ajaxOptDefault.success = options.success; if (submitObj!=null) submitObj.attr('disabled', 'disabled'); if (loadingContainer != null) loadingObj=$("<div class='loading icon-loading'>正在加载......</div>").appendTo(loadingContainer); $.ajax(ajaxOptDefault); }, /*** * 某个html标签加载远程html文件 *options={ * target:jquery目标对象, * settings = { url:'远程地址', * load:function(){.........} , //加载前处理事件 * loaded:function(result){.........} //加载后处理事件 * } * } ***/ objectLoadContect: function (options) { var opts = options.settings; if (typeof opts === 'object' && typeof opts.url != 'undefined' && opts.url != '') { options.target.html("<div class='loading icon-loading'>正在加载......</div>"); if (typeof opts.load === 'function') { opts.load(); } options.target.load(opts.url, function () { if (typeof opts.loaded === 'function') { opts.loaded(options.target); } }); } }, /*** *填充表单 ****/ fillForm: function (options) { }, /*** *表单转json对象 ****/ parseForm: function (options) { }, /*** *重置表单 ****/ resetForm: function (options) { }, /** *打开窗口 ***/ openWindow: function (options) { }, /*** * 按下标移除数组元素,返回新数组 * srcArray:源数组，indexArr:下标数组 ***/ removeArrayEle: function (srcArray, indexArr) { var newArray = []; for (var i = 0, len = srcArray.length; i < len;++i){ var nodel = true; for (var j = 0, len1 = indexArr.length; j < len1; ++j) { if (i == parseInt(indexArr[j])) nodel=false; } if (nodel) { newArray.push(srcArray[i]); } } return newArray; } } }); })(jQuery)