需求：
（1）后期的jquery组件具有一些通用的需求，如ajax请求，数组的处理等
（2）从系统UI与服务器集成的角度看，一个系统的前端交互需要做一个统一的封装来接受用户交互，同时统一于服务器的请求
（3）前端的日志功能需要统一
（4）统一的验证入口
（5）综上：我们需要一个封装了通用表单操作（表单转对象，对象填充到表单，打开一个窗口），封装系统前端的统一ajax交互，ajax交互返回格式统一以便做统一处理。
初步代码实现（后期将会根据实际需求调整）
1 /******************************************
2 *作者:hjwen
3 *电邮:[email protected]
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)
我的开源框架之交互控制、组件通用工具封装,布布扣,bubuko.com
时间： 2024-08-10 15:39:24