Interaction control of my open-source framework and Universal Component tool Encapsulation

Requirements:

(1) later jquery components have some general requirements, such as ajax requests and array processing.

　　

(2) From the Perspective of system UI and server integration, front-end interaction of a system requires a unified encapsulation to accept user interaction, and at the same time, server requests

(3) frontend log functions must be unified

　　

(4) unified verification Portal

　　

(5) To sum up, we need to encapsulate a common form operation (Form-to-object, object filling into the form, and opening a window) to encapsulate the unified ajax interaction at the front end of the system, unified ajax Interactive Return formats for unified processing.

 

Preliminary code implementation (will be adjusted later based on actual needs)

1 /************************************** * *** Author: hjwen 3 * Email: hjwen88@126.com 4 * version: 1.0 5 * Description: myui is the key to integration with the server mvc web framework, encapsulates the common operations on the form, such as: form to object, unified ajax interaction. opening a window and other 6 * myui are also dependencies of later components. The components use logs, ajax, and other functions to depend on this object. 7 * copyright: general open-source license agreement for China V1.0 8 ********************************* */9 (function ($) {10/***** 11 * extended myui to jquery 12 *****/13 $. extend ({14 myui: {15 version: '1. 0', 16 release: '2017. 05.18 ', 17 isDebug: fal Se, 18/**** 19 * logs, logs need to be specially processed for earlier versions of 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 * unified all server requests 32 * @ param options = {33 submit: 'element id/jq object triggering submit', 34 loadingContainer: 'prompt box object/id', 35 url: 'address', 36 async: 'true/false', 37 type: 'Post/get', 38 timeout: the default value for timeout is not set, 39 params: 'parameter key1 = value1 & key2 = value2', 40 dataType: 'json/xml/html/text/script', // default json 41 okdeal: function (result) {alert ('Return result correct Process');}, 42 faildeal: function (result) {Alert ('Return result error Process') ;}, 43 success: function (result) {alert ('processing successful ajax requests') ;}, 44 error: function (xhr) {alert ('ajax request error Process')} 45} 46 @ return returned json format = {code: 'status code, 0 = OK, others are error messages, message: 'error result prompts. If there is no error, it is null. ', data:' returned data, in string format, if it is json, You need to perform self-eval'} 47 **/48 ajaxRequest: function (options) {49 if (typeof options. url = 'undefined') {50 alert ("options. url not set! "); 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 // The default value is 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 ("request error. Please try again later! "+ 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 '> loading ...... </div> "). appendTo (loadingContainer); 124 $. ajax (ajaxOptDefault); 125}, 126/*** 127 * an html Tag loads a remote html file. 128 * options = {129 * target: jquery target object, 130 * settings = {url: 'remote address', 131 * load: function (){.........}, // load the pre-processing event 132 * loaded: function (result ){.........} // load post-processing event 133 *} 134 *} 135 ***/136 objectLoadContect: function (options) {1 37 var opts = options. settings; 138 if (typeof opts = 'object' & typeof opts. url! = 'Undefined' & opts. url! = '') {139 options.target.html (" <div class = 'loading icon-loading '> loading ...... </div> "); 140 if (typeof opts. load = 'function') {141 opts. load (); 142} 143 options.tar get. load (opts. url, function () {144 if (typeof opts. loaded = 'function') {145 opts.loaded(options.tar get); 146} 147}); 148} 149 }, 150/*** fill form 151 ***/152 fillForm: function (options) {153 }, 155/*** form to json object 156 ***/157 parseForm: function (options) {158 }, 160/*** 161 * reset form 162 ***/163 resetForm: function (options) {164 }, 165/** 166 * Open Window 167 ***/168 openWindow: function (options) {169}, 170/*** 171 * remove array elements by subscript, returns the new array 172 * srcArray: source array, indexArr: subscript array 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)