|
前言：之前分享了那么多bootstrap組件的使用經驗，這篇博主打算研究下JS組件的擴展和封裝，我們來感受下JQuery為我們提供$.Extend的神奇，看看我們怎么自定義自己的組件，比如我們想擴展一個$("#id").MyJsControl({})做我們自己的組件，我們該如何去做呢，別急，我們慢慢來看看過程。 一、擴展已經存在的組件1、需求背景很多時候，我們使用jquery.ajax的方式向后臺發(fā)送請求，型如  $.ajax({ type: "post", url: "/User/Edit", data: { data: JSON.stringify(postdata) }, success: function (data, status) { if (status == "success") { toastr.success('提交數(shù)據(jù)成功'); $("#tb_aaa").bootstrapTable('refresh'); } }, error: function (e) { }, complete: function () { } }); 這種代碼太常見了，這個時候我們有這樣一個需求：在自己調用ajax請求的時候，我們不想每次都寫error:function(e){}這種代碼，但是我們又想讓它每次都將ajax的錯誤信息輸出到瀏覽器讓用戶能夠看到。怎么辦呢？ 2、實現(xiàn)原理要想實現(xiàn)以上效果其實并不難，我們可以將$.ajax({})封裝一層，在封裝的公共方法里面定義error對應的事件即可。確實，這樣能達到我們的要求，但是并不完美，原因很簡單：1）在jquery的基礎上面再封裝一層，效率不夠高；2）需要改變調用者的習慣，每次調用ajax的時候需要按照我們定義的方法的規(guī)則來寫，而不能直接用原生的$.ajax({})這種寫法，這是我們不太想看到。 既然如此，那我們如何做到既不封裝控件，又能達到以上要求呢？答案就是通過我們的$.extend去擴展原生的jquery.ajax。 其實實現(xiàn)起來也并不難，通過以下一段代碼就能達到我們的要求。 (function ($) { //1.得到$.ajax的對象 var _ajax = $.ajax; $.ajax = function (options) { //2.每次調用發(fā)送ajax請求的時候定義默認的error處理方法 var fn = { error: function (XMLHttpRequest, textStatus, errorThrown) { toastr.error(XMLHttpRequest.responseText, '錯誤消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' }); }, success: function (data, textStatus) { }, beforeSend: function (XHR) { }, complete: function (XHR, TS) { } } //3.如果在調用的時候寫了error的處理方法，就不用默認的 if (options.error) { fn.error = options.error; } if (options.success) { fn.success = options.success; } if (options.beforeSend) { fn.beforeSend = options.beforeSend; } if (options.complete) { fn.complete = options.complete; } //4.擴展原生的$.ajax方法，返回最新的參數(shù) var _options = $.extend(options, { error: function (XMLHttpRequest, textStatus, errorThrown) { fn.error(XMLHttpRequest, textStatus, errorThrown); }, success: function (data, textStatus) { fn.success(data, textStatus); }, beforeSend: function (XHR) { fn.beforeSend(XHR); }, complete: function (XHR, TS) { fn.complete(XHR, TS); } }); //5.將最新的參數(shù)傳回ajax對象 _ajax(_options); }; })(jQuery); 如果沒接觸過jquery里面$.extend這個方法的童鞋可能看不懂以上是什么意思。好，我們首先來看看jquery API對$.extend()方法是作何解釋的。
什么意思呢？我們來看官方的兩個例子就知道了 栗子一： var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; $.extend(settings, options); 結果： settings == { validate: true, limit: 5, name: "bar" }栗子二： var empty = {}; var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; var settings = $.extend(empty, defaults, options); 結果： settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }以上的兩個簡單例子就說明extend()方法作用就是合并另個對象，有相同的則覆蓋，沒有相同的則添加。就是這么簡單。 了解了$.extend()的作用，我們就能大概看懂上面那個擴展jquery.ajax的實現(xiàn)了吧。主要的步驟分為： 1）定義默認的error處理方法。 var fn = { error: function (XMLHttpRequest, textStatus, errorThrown) { toastr.error(XMLHttpRequest.responseText, '錯誤消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' }); }, success: function (data, textStatus) { }, beforeSend: function (XHR) { }, complete: function (XHR, TS) { } } 2）判斷用戶在調用$.ajax({})的時候是否自定了error:function(){}，如果定義過，則使用用戶定義的，反之則用默認的error處理方法。 3）使用$.extend()將error默認處理方法傳入$.ajax()的參數(shù)中。我們看options參數(shù)時包含$.ajax()方法里面所有的參數(shù)的，然后用默認的fn去擴展它即可。 通過以上三步就能夠實現(xiàn)對$.ajax()方法里面error默認處理方法。這樣擴展，對于我們使用者來說完全感覺不到變化，我們仍然可以$.ajax({});這樣去發(fā)送ajax請求，如果沒有特殊情況，不用寫error處理方法。 3、組件擴展的意義使用組件擴展，能夠幫助我們在原有組件上面增加一些和我們系統(tǒng)業(yè)務相關的處理需求，而在使用時，還是和使用原生組件一樣去調用，免去了在組件上面再封裝一層的臃腫。 二、擴展自己組件上面通過$.extend()方法擴展了$.ajax()的error事件處理方法。下面我們來封裝一個自己的組件試試，功能很簡單，但比較有說明性。我們就以select這個組件為例，很多情況下，我們的select里面的option都是需要從數(shù)據(jù)庫里面取數(shù)據(jù)的，所以一般的做法就是發(fā)送一個ajax請求，然后在success方法里面拼html?，F(xiàn)在我們就封裝一個select遠程取數(shù)據(jù)的方法。 1、代碼實現(xiàn)以及使用示例先上干貨吧，將寫好的整出來： (function ($) { //1.定義jquery的擴展方法combobox $.fn.combobox = function (options, param) { if (typeof options == 'string') { return $.fn.combobox.methods[options](this, param); } //2.將調用時候傳過來的參數(shù)和default參數(shù)合并 options = $.extend({}, $.fn.combobox.defaults, options || {}); //3.添加默認值 var target = $(this); target.attr('valuefield', options.valueField); target.attr('textfield', options.textField); target.empty(); var option = $('<option></option>'); option.attr('value', ''); option.text(options.placeholder); target.append(option); //4.判斷用戶傳過來的參數(shù)列表里面是否包含數(shù)據(jù)data數(shù)據(jù)集，如果包含，不用發(fā)ajax從后臺取，否則否送ajax從后臺取數(shù)據(jù) if (options.data) { init(target, options.data); } else { //var param = {}; options.onBeforeLoad.call(target, options.param); if (!options.url) return; $.getJSON(options.url, options.param, function (data) { init(target, data); }); } function init(target, data) { $.each(data, function (i, item) { var option = $('<option></option>'); option.attr('value', item[options.valueField]); option.text(item[options.textField]); target.append(option); }); options.onLoadSuccess.call(target); } target.unbind("change"); target.on("change", function (e) { if (options.onChange) return options.onChange(target.val()); }); } //5.如果傳過來的是字符串，代表調用方法。 $.fn.combobox.methods = { getValue: function (jq) { return jq.val(); }, setValue: function (jq, param) { jq.val(param); }, load: function (jq, url) { $.getJSON(url, function (data) { jq.empty(); var option = $('<option></option>'); option.attr('value', ''); option.text('請選擇'); jq.append(option); $.each(data, function (i, item) { var option = $('<option></option>'); option.attr('value', item[jq.attr('valuefield')]); option.text(item[jq.attr('textfield')]); jq.append(option); }); }); } }; //6.默認參數(shù)列表 $.fn.combobox.defaults = { url: null, param: null, data: null, valueField: 'value', textField: 'text', placeholder: '請選擇', onBeforeLoad: function (param) { }, onLoadSuccess: function () { }, onChange: function (value) { } }; })(jQuery); 先來看看我們自定義組件如何使用： 用法一：通過URL遠程取數(shù)據(jù)并初始化首先定義一個空的select <select id="sel_search_plant" class="form-control"></select> 然后初始化它 $(function(){ $('#sel_search_plant').combobox({ url: '/apiaction/Plant/Find', valueField: 'TM_PLANT_ID', textField: 'NAME_C' }); })  參數(shù)很簡單，就不一一介紹了。很簡單有木有~~ 用法二：取值和設置var strSelectedValue = $('#sel_search_plant').combobox("getValue");$('#sel_search_plant').combobox("setValue", "aaa");其實對于簡單的select標簽，博主覺得這里的getValu和SetValue意義不大，因為直接通過$('#sel_search_plant').val()就能解決的事，何必要再封一層。這里僅僅是做演示，試想，如果是封裝成類似select2或者multiselect這種組件，getValue和setValue的意義就有了，你覺得呢？ 2、代碼詳細講解上面的實現(xiàn)代碼，如果您一眼就能看懂，證明您是經常封組件的大蝦了，下面的就不用看了。如果看不懂，也沒關系，我們將代碼拆開詳細看看里面是什么鬼。 （1）首先看看我們最?？吹降娜缦聦懛ǎ?/p> (function ($) { //....封裝組件邏輯 })(jQuery); 初初看到這種用法，博主也是狂抓，這是什么鬼嘛，四不像啊。使用多了之后才知道原來這就是一個匿名函數(shù)的形式。將它拆開來看如下： var fn = function($){ //.....組件封裝邏輯 }; fn(jQuery); 也就是說這種寫法就表示先定義一個方法，然后立即調用這個方法，jQuery相當于實參。打開jquery.js的原文件可以看到，jQuery是這個文件里面的一個全局變量。 （2）定義自己的組件的代碼： $.fn.combobox = function (options, param) { }; 習慣這種寫法的應該知道，這個就表示向jquery對象添加自定義方法，比如你想使用文章開始的 $("#id").MyJsControl({}) 這種用法，你就可以這樣定義 $.fn.MyJsControl=function(options){} 。 （3） options = $.extend({}, $.fn.combobox.defaults, options || {}); 這一句，看過上文的朋友應該還記得extend這么一個方法吧，怎么樣，又來了你。這句話其實就沒什么好說的了，合并默認參數(shù)和用戶傳進來的參數(shù)。 （4）默認參數(shù)列表 $.fn.combobox.defaults = { url: null, param: null, data: null, valueField: 'value', textField: 'text', placeholder: '請選擇', onBeforeLoad: function (param) { }, onLoadSuccess: function () { }, onChange: function (value) { } }; 如果用戶沒有傳參，就用默認的參數(shù)列表。如果你夠細心，你會發(fā)現(xiàn)博主之前分享的其他bootstrap組件的js文件里面都有這么一個default參數(shù)列表。我們隨便找兩個： bootstrap上傳組件
bootstrap table組件
基本都是這么些用法。這樣來看，是否也可以自己封一個js組件~~ 三、總結以上就是博主對js組件擴展以及封裝用法的認識和總結。當然，都是些比較簡單基礎的封裝，如果想要實現(xiàn)類似bootstrap table的組件，那還差得很遠。不過萬丈高樓平地起，只要打好基礎，封一個自己的table組件也不是什么大問題。文中如果有理解不對的地方，歡迎指出，博主將不勝感激。如果本文能夠對你有絲毫幫助，麻煩抬起你的小手點個推薦，博主一定繼續(xù)努力，將更好的文章分享給大家。
|
|
|
