JS組件系列之JS組件封裝過(guò)程詳解
前言：
之前分享了那么多bootstrap組件的使用經(jīng)驗(yàn)，這篇文章打算研究下JS組件的擴(kuò)展和封裝，我們來(lái)感受下JQuery為我們提供$.Extend的神奇，看看我們?cè)趺醋远x自己的組件，比如我們想擴(kuò)展一個(gè)$("#id").MyJsControl({})做我們自己的組件，我們?cè)撊绾稳プ瞿?，別急，我們慢慢來(lái)看看過(guò)程。
一、擴(kuò)展已經(jīng)存在的組件
1、需求背景
很多時(shí)候，我們使用jquery.ajax的方式向后臺(tái)發(fā)送請(qǐng)求，型如
$.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 () {
}
});
這種代碼太常見(jiàn)了，這個(gè)時(shí)候我們有這樣一個(gè)需求：在自己調(diào)用ajax請(qǐng)求的時(shí)候，我們不想每次都寫(xiě)error:function(e){}這種代碼，但是我們又想讓它每次都將ajax的錯(cuò)誤信息輸出到瀏覽器讓用戶能夠看到。怎么辦呢？
2、實(shí)現(xiàn)原理
要想實(shí)現(xiàn)以上效果其實(shí)并不難，我們可以將$.ajax({})封裝一層，在封裝的公共方法里面定義error對(duì)應(yīng)的事件即可。確實(shí)，這樣能達(dá)到我們的要求，但是并不完美，原因很簡(jiǎn)單：1）在jquery的基礎(chǔ)上面再封裝一層，效率不夠高；2）需要改變調(diào)用者的習(xí)慣，每次調(diào)用ajax的時(shí)候需要按照我們定義的方法的規(guī)則來(lái)寫(xiě)，而不能直接用原生的$.ajax({})這種寫(xiě)法，這是我們不太想看到。
既然如此，那我們?nèi)绾巫龅郊炔环庋b控件，又能達(dá)到以上要求呢？答案就是通過(guò)我們的$.extend去擴(kuò)展原生的jquery.ajax。
其實(shí)實(shí)現(xiàn)起來(lái)也并不難，通過(guò)以下一段代碼就能達(dá)到我們的要求。
(function ($) {
//1.得到$.ajax的對(duì)象
var _ajax = $.ajax;
$.ajax = function (options) {
//2.每次調(diào)用發(fā)送ajax請(qǐng)求的時(shí)候定義默認(rèn)的error處理方法
var fn = {
error: function (XMLHttpRequest, textStatus, errorThrown) {
toastr.error(XMLHttpRequest.responseText, '錯(cuò)誤消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
},
success: function (data, textStatus) { },
beforeSend: function (XHR) { },
complete: function (XHR, TS) { }
}
//3.如果在調(diào)用的時(shí)候?qū)懥薳rror的處理方法，就不用默認(rèn)的
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.擴(kuò)展原生的$.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對(duì)象
_ajax(_options);
};
})(jQuery);
如果沒(méi)接觸過(guò)jquery里面$.extend這個(gè)方法的童鞋可能看不懂以上是什么意思。好，我們首先來(lái)看看jquery API對(duì)$.extend()方法是作何解釋的。
什么意思呢？我們來(lái)看官方的兩個(gè)例子就知道了
栗子一：
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
結(jié)果：
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);
結(jié)果：
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }
以上的兩個(gè)簡(jiǎn)單例子就說(shuō)明extend()方法作用就是合并另個(gè)對(duì)象，有相同的則覆蓋，沒(méi)有相同的則添加。就是這么簡(jiǎn)單。
了解了$.extend()的作用，我們就能大概看懂上面那個(gè)擴(kuò)展jquery.ajax的實(shí)現(xiàn)了吧。主要的步驟分為：
1）定義默認(rèn)的error處理方法。
var fn = {
error: function (XMLHttpRequest, textStatus, errorThrown) {
toastr.error(XMLHttpRequest.responseText, '錯(cuò)誤消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
},
success: function (data, textStatus) { },
beforeSend: function (XHR) { },
complete: function (XHR, TS) { }
}
2）判斷用戶在調(diào)用$.ajax({})的時(shí)候是否自定了error:function(){}，如果定義過(guò)，則使用用戶定義的，反之則用默認(rèn)的error處理方法。
3）使用$.extend()將error默認(rèn)處理方法傳入$.ajax()的參數(shù)中。我們看options參數(shù)時(shí)包含$.ajax()方法里面所有的參數(shù)的，然后用默認(rèn)的fn去擴(kuò)展它即可。
通過(guò)以上三步就能夠?qū)崿F(xiàn)對(duì)$.ajax()方法里面error默認(rèn)處理方法。這樣擴(kuò)展，對(duì)于我們使用者來(lái)說(shuō)完全感覺(jué)不到變化，我們?nèi)匀豢梢?.ajax({});這樣去發(fā)送ajax請(qǐng)求，如果沒(méi)有特殊情況，不用寫(xiě)error處理方法。
3、組件擴(kuò)展的意義
使用組件擴(kuò)展，能夠幫助我們?cè)谠薪M件上面增加一些和我們系統(tǒng)業(yè)務(wù)相關(guān)的處理需求，而在使用時(shí)，還是和使用原生組件一樣去調(diào)用，免去了在組件上面再封裝一層的臃腫。
二、擴(kuò)展自己組件
上面通過(guò)$.extend()方法擴(kuò)展了$.ajax()的error事件處理方法。下面我們來(lái)封裝一個(gè)自己的組件試試，功能很簡(jiǎn)單，但比較有說(shuō)明性。我們就以select這個(gè)組件為例，很多情況下，我們的select里面的option都是需要從數(shù)據(jù)庫(kù)里面取數(shù)據(jù)的，所以一般的做法就是發(fā)送一個(gè)ajax請(qǐng)求，然后在success方法里面拼html。現(xiàn)在我們就封裝一個(gè)select遠(yuǎn)程取數(shù)據(jù)的方法。
1、代碼實(shí)現(xiàn)以及使用示例
先上干貨吧，將寫(xiě)好的整出來(lái)：
(function ($) {
//1.定義jquery的擴(kuò)展方法combobox
$.fn.combobox = function (options, param) {
if (typeof options == 'string') {
return $.fn.combobox.methods[options](this, param);
}
//2.將調(diào)用時(shí)候傳過(guò)來(lái)的參數(shù)和default參數(shù)合并
options = $.extend({}, $.fn.combobox.defaults, options || {});
//3.添加默認(rèn)值
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.判斷用戶傳過(guò)來(lái)的參數(shù)列表里面是否包含數(shù)據(jù)data數(shù)據(jù)集，如果包含，不用發(fā)ajax從后臺(tái)取，否則否送ajax從后臺(tái)取數(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.如果傳過(guò)來(lái)的是字符串，代表調(diào)用方法。
$.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('請(qǐng)選擇');
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.默認(rèn)參數(shù)列表
$.fn.combobox.defaults = {
url: null,
param: null,
data: null,
valueField: 'value',
textField: 'text',
placeholder: '請(qǐng)選擇',
onBeforeLoad: function (param) { },
onLoadSuccess: function () { },
onChange: function (value) { }
};
})(jQuery);
先來(lái)看看我們自定義組件如何使用：
用法一：通過(guò)URL遠(yuǎn)程取數(shù)據(jù)并初始化
首先定義一個(gè)空的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ù)很簡(jiǎn)單，就不一一介紹了。很簡(jiǎn)單有木有~~
用法二：取值和設(shè)置
var strSelectedValue = $('#sel_search_plant').combobox("getValue");
$('#sel_search_plant').combobox("setValue", "aaa");
其實(shí)對(duì)于簡(jiǎn)單的select標(biāo)簽，博主覺(jué)得這里的getValu和SetValue意義不大，因?yàn)橹苯油ㄟ^(guò)$('#sel_search_plant').val()就能解決的事，何必要再封一層。這里僅僅是做演示，試想，如果是封裝成類似select2或者multiselect這種組件，getValue和setValue的意義就有了，你覺(jué)得呢？
2、代碼詳細(xì)講解
上面的實(shí)現(xiàn)代碼，如果您一眼就能看懂，證明您是經(jīng)常封組件的大蝦了，下面的就不用看了。如果看不懂，也沒(méi)關(guān)系，我們將代碼拆開(kāi)詳細(xì)看看里面是什么鬼。
（1）首先看看我們最?？吹降娜缦聦?xiě)法：
(function ($) {
//....封裝組件邏輯
})(jQuery);
初初看到這種用法，博主也是狂抓，這是什么鬼嘛，四不像啊。使用多了之后才知道原來(lái)這就是一個(gè)匿名函數(shù)的形式。將它拆開(kāi)來(lái)看如下：
var fn = function($){
//.....組件封裝邏輯
};
fn(jQuery);
也就是說(shuō)這種寫(xiě)法就表示先定義一個(gè)方法，然后立即調(diào)用這個(gè)方法，jQuery相當(dāng)于實(shí)參。打開(kāi)jquery.js的原文件可以看到，jQuery是這個(gè)文件里面的一個(gè)全局變量。
（2）定義自己的組件的代碼：
$.fn.combobox = function (options, param) {
};
習(xí)慣這種寫(xiě)法的應(yīng)該知道，這個(gè)就表示向jquery對(duì)象添加自定義方法，比如你想使用文章開(kāi)始的 $("#id").MyJsControl({}) 這種用法，你就可以這樣定義 $.fn.MyJsControl=function(options){} 。
（3） options = $.extend({}, $.fn.combobox.defaults, options || {}); 這一句，看過(guò)上文的朋友應(yīng)該還記得extend這么一個(gè)方法吧，怎么樣，又來(lái)了你。這句話其實(shí)就沒(méi)什么好說(shuō)的了，合并默認(rèn)參數(shù)和用戶傳進(jìn)來(lái)的參數(shù)。
（4）默認(rèn)參數(shù)列表
$.fn.combobox.defaults = {
url: null,
param: null,
data: null,
valueField: 'value',
textField: 'text',
placeholder: '請(qǐng)選擇',
onBeforeLoad: function (param) { },
onLoadSuccess: function () { },
onChange: function (value) { }
};
如果用戶沒(méi)有傳參，就用默認(rèn)的參數(shù)列表。如果你夠細(xì)心，你會(huì)發(fā)現(xiàn)博主之前分享的其他bootstrap組件的js文件里面都有這么一個(gè)default參數(shù)列表。我們隨便找兩個(gè)：
bootstrap上傳組件
bootstrap table組件
基本都是這么些用法。這樣來(lái)看，是否也可以自己封一個(gè)js組件~~
三、總結(jié)
以上就是博主對(duì)js組件擴(kuò)展以及封裝用法的認(rèn)識(shí)和總結(jié)。當(dāng)然，都是些比較簡(jiǎn)單基礎(chǔ)的封裝，如果想要實(shí)現(xiàn)類似bootstrap table的組件，那還差得很遠(yuǎn)。不過(guò)萬(wàn)丈高樓平地起，只要打好基礎(chǔ)，封一個(gè)自己的table組件也不是什么大問(wèn)題。如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
webpack中使用Eslint的實(shí)現(xiàn)
本文主要介紹了webpack中使用Eslint的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
js實(shí)現(xiàn)的定時(shí)關(guān)閉頁(yè)面或定時(shí)提醒效果代碼
比較有創(chuàng)意的定時(shí)關(guān)閉頁(yè)面或定時(shí)提醒效果代碼2008-02-02
用js實(shí)現(xiàn)的刪除table中一行數(shù)據(jù)的代碼2008-06-06
JS數(shù)組索引檢測(cè)中的數(shù)據(jù)類型問(wèn)題詳解
這篇文章主要給大家介紹了關(guān)于JS數(shù)組索引檢測(cè)中的數(shù)據(jù)類型問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了JAVA面試題 淺析Java中的static關(guān)鍵字,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
JS實(shí)現(xiàn)網(wǎng)頁(yè)右側(cè)帶動(dòng)畫(huà)效果的伸縮窗口代碼
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)右側(cè)帶動(dòng)畫(huà)效果的伸縮窗口代碼,通過(guò)JavaScript基于時(shí)間函數(shù)實(shí)現(xiàn)頁(yè)面元素樣式漸變效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
閉包是有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。首先要明白的就是，閉包是函數(shù)。由于要求它可以訪問(wèn)另一個(gè)函數(shù)的作用于中的變量，所以我們往往是在一個(gè)函數(shù)的內(nèi)部創(chuàng)建另一個(gè)函數(shù)，而“另一個(gè)函數(shù)”就是閉包。本文對(duì)其進(jìn)行系統(tǒng)分析，需要的朋友可以看下2016-12-12
javaScript 連接打印機(jī),打印小票的實(shí)例
下面小編就為大家分享一篇javaScript 鏈接打印機(jī),打印小票的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
微信小程序?qū)W習(xí)總結(jié)（二）樣式、屬性、模板操作分析
這篇文章主要介紹了微信小程序樣式、屬性、模板操作,結(jié)合實(shí)例形式分析了微信小程序尺寸單位、樣式、數(shù)據(jù)初始化、屬性、模板調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2020-06-06- 眾所周知，IE8開(kāi)放了對(duì)DOM原型的支持以及ECMA v5的兩個(gè)新方法——Object.defineProperty和Object.getOwnPropertyDexcriptor（單詞好長(zhǎng)……），并且這兩個(gè)新方法居然只能用于DOM。2009-12-12