輕量jquery框架之--組件交互基礎設計

時間 2019-11-10

標籤輕量 jquery 框架組件交互基礎設計欄目 JQuery 简体版

原文原文鏈接

概要html

組件交互基礎，即考慮在JQUERY對象下($)下擴展全部組件都須要用到的通用api，如ajax入口、對錶單的操做、html片斷加載、通用的配合datagrid通用的curd客戶端對象等。jquery

擴展api以下ajax

1、ajax設計json

　　（1）統一ajax請求的流程預計數據返回格式、ajax請求的數據返回格式以下：api

　　　　{服務器

　　　　　　code:0/1,　　//0 表示正確運行，並返回了信息、數據；1表示非正確返回結果(多是程序異常或者運算結果異常)，異常信息放到message屬性中app

　　　　　　message:"服務端提示的信息",框架

　　　　　　data:{}　　//數據，若是返回的結果須要帶數據，則保持到data屬性中，如tree，datagrid的請求返回的數據就放在該屬性中　　　　async

　　　　}函數

　　（2）將ajax的請求流程設計爲try.. catch.. finally...模式，即不管是正確運行仍是錯誤運行，都應該有一個finally執行，這樣客戶代碼能夠註冊本身須要運行的函數

　　（3）ajax默認配置定義

2、其餘通用api設計

3、總體代碼

  1 /**
  2  * @author huangjingwen
  3  * 封裝通用公用接口
  4  * @version 1.0
  5  */
  6 (function ($) {
  7     var ajaxOpts = {
  8         timeout: 1000 * 60,
  9         type: "POST",
 10         dataType: 'json',
 11         async: true,
 12         preRequest: function () {//請求前
 13         },
 14         /***
 15         *ajax錯誤
 16         ***/
 17         error: function (xhr, status, errorThrown) {
 18             this.final(status);
 19         },
 20         /**
 21         *請求成功，並返回結果
 22         ***/
 23         success: function (res) {
 24             this.final(res);
 25             if (res.code === 0) {
 26                 //res.convert 指的是返回的data屬性值是json數據，可是是字符串格式，須要轉爲json對象後才傳給客戶代碼
 27                 if (typeof res.convert != 'undefined' && (res.convert || res.convert === 'true'))
 28                     res.data = eval("(" + res.data + ")");
 29                 this.ok(res.data);
 30             } else {
 31                 this.fail(res.message);
 32             }
 33         },
 34         /**
 35         *當返回結果是正確時的處理
 36         **/
 37         ok: function (data) {
 38         },
 39         /***
 40         *當返回結果是非正確時的處理
 41         ***/
 42         fail: function (msg) {
 43             alert(msg);
 44         },
 45         /**
 46         * 不管如何都回調的函數
 47         ****/
 48         final: function (res) {//不管成功，失敗，錯誤都執行的回調
 49         }
 50     };
 51     /**
 52     *框架的ajax統一入口
 53     *全部ajax返回均以 {code:'',message:'',data:{}}的格式返回
 54     *code=0表示服務器無異常運行並返回結果，code=1時，表示服務器出現異常並返回提示
 55     *message，用與服務器返回的信息提示
 56     *data,用於服務器返回的數據，如tree組件、datagrid組件返回的數據就保存到data當中
 57     ****/
 58     $.request = function () {
 59         var args = arguments[0];
 60         var opts;
 61         if (args != undefined)
 62             opts = $.extend({}, ajaxOpts, args);
 63         else
 64             opts = ajaxOpts;
 65         opts.preRequest();
 66         $.ajax(opts);
 67     };
 68     /***
 69     * 某個html標籤加載遠程html文件
 70     *options={  target:jquery目標對象,
 71     *           url:'遠程地址', 
 72     *           params:{},//參數                     
 73     *           load:function(){.........} , //加載前處理事件
 74     *           loaded:function(result){.........}  //加載後處理事件 
 75     *   }           
 76     ***/
 77     $.htmlLoad = function () {
 78         var opts = arguments[0];
 79         opts.target.html("<div class='loading'>正在加載......</div>");
 80         if (typeof opts.load === 'function') {
 81             opts.load.call(opts.target);
 82         }
 83         var url = opts.url;
 84         opts.target.load(url, opts.prarms, function (xmlReq, statu, error) {
 85             if (statu === 'error') {
 86                 opts.target.html(xmlReq);
 87             } else {
 88                 if (typeof opts.loaded === 'function') {
 89                     opts.loaded.call(opts.target);
 90                 }
 91             }
 92         });
 93     };
 94     /**
 95     *將form表單轉爲json對象
 96     ***/
 97     $.parseForm = function () {
 98         var opts = arguments[0];
 99     };
100     /***
101     *將json對象填充到表單中
102     ***/
103     $.fillForm = function () {
104         var opts = arguments[0];
105     };
106     /***
107     *重置表單
108     ****/
109     $.resetForm = function () {
110 
111     };
112     /**
113     *信息彈唱框
114     ***/
115     $.alert = function () {
116     };
117     /**
118     *打開一個窗口
119     ***/
120     $.window = function () {
121     };
122     /***
123     *獲取字符長度
124     **/
125     $.getCharWidth = function (text, fontSize) {
126         var span = document.getElementById("__getcharwidth");
127         if (span == null) {
128             span = document.createElement("span");
129             span.id = "__getcharwidth";
130             document.body.appendChild(span);
131             span.style.visibility = "hidden";
132             span.style.whiteSpace = "nowrap";
133         }
134         span.innerText = text;
135         span.style.fontSize = fontSize;
136         return span.offsetWidth;
137     };
138     /***
139     *擴展一個通用的curd對象，用於結合datagrid實現通用的curd操做api封裝
140     ***/
141     $.curd = function () {
142 
143     };
144     $.curd.prototype = {
145     };
146 })(jQuery);