JS組件系列——封裝自己的JS組件
1、需求背景
很多時候，我們使用jquery.ajax的方式向後臺發送請求，型如
$.ajax({
type: "post",
url: "/User/Edit",
data: { data: JSON.stringify(postdata) },
success: function (data, status) {
if (status == "success") {
toastr.success(‘提交數據成功‘);
$("#tb_aaa").bootstrapTable(‘refresh‘);
}
},
error: function (e) {
},
complete: function () {
}
});
這種代碼太常見了，這個時候我們有這樣一個需求：在自己調用ajax請求的時候，我們不想每次都寫error:function(e){}這種代碼，但是我們又想讓它每次都將ajax的錯誤信息輸出到瀏覽器讓用戶能夠看到。怎麽辦呢？
2、實現原理
要想實現以上效果其實並不難，我們可以將$.ajax({})封裝一層，在封裝的公共方法裏面定義error對應的事件即可。確實，這樣能達到我們的要求，但是並不完美，原因很簡單：1）在jquery的基礎上面再封裝一層，效率不夠高；2）需要改變調用者的習慣，每次調用ajax的時候需要按照我們定義的方法的規則來寫，而不能直接用原生的$.ajax({})這種寫法，這是我們不太想看到。
既然如此，那我們如何做到既不封裝控件，又能達到以上要求呢？答案就是通過我們的$.extend去擴展原生的jquery.ajax。
其實實現起來也並不難，通過以下一段代碼就能達到我們的要求。
(function ($) {
//1.得到$.ajax的對象
var _ajax = $.ajax;
$.ajax = function (options) {
//2.每次調用發送ajax請求的時候定義默認的error處理方法
var fn = {
error: function (XMLHttpRequest, textStatus, errorThrown) {
toastr.error(XMLHttpRequest.responseText,
如果沒接觸過jquery裏面$.extend這個方法的童鞋可能看不懂以上是什麽意思？那麽請看之前我寫的博客，介紹比較詳細：jQuery.extend() 函數使用詳解
了解了$.extend()的作用，我們就能大概看懂上面那個擴展jquery.ajax的實現了吧。主要的步驟分為：
1）定義默認的error處理方法。
2）判斷用戶在調用$.ajax({})的時候是否自定了error:function(){}，如果定義過，則使用用戶定義的，反之則用默認的error處理方法。
3）使用$.extend()將error默認處理方法傳入$.ajax()的參數中。我們看options參數時包含$.ajax()方法裏面所有的參數的，然後用默認的fn去擴展它即可。
通過以上三步就能夠實現對$.ajax()方法裏面error默認處理方法。這樣擴展，對於我們使用者來說完全感覺不到變化，我們仍然可以$.ajax({});這樣去發送ajax請求，如果沒有特殊情況，不用寫error處理方法。
組件擴展的意義：使用組件擴展，能夠幫助我們在原有組件上面增加一些和我們系統業務相關的處理需求，而在使用時，還是和使用原生組件一樣去調用，免去了在組件上面再封裝一層的臃腫。
3、實例：
function btn_delete() {
var keyValue = $("#gridTable").jqGridRowValue("id");
if (checkedArray(keyValue)) {
$.RemoveForm({
msg:"該設備刪除之後，無法進行管控，也無法進行卸載，您確定要繼續刪除嗎？",//這些內容均用於自定義
url: "${basePath}/assets/deviceAction_delete.do",
param: {"ids": keyValue },
success: function (responseText) {
if (responseText == "success") {
dialogMsg("<s:text name="cems.public.msgSuccess"></s:text>", 1);
} else if(responseText !="" && responseText !="error"){
dialogAlert("<s:text name="cems.public.msgFail"></s:text>", -1);
} else {
dialogAlert("<s:text name="cems.public.msgFail"></s:text>", -1);
}
$("#gridTable").trigger("reloadGrid");
}
})
} else {
dialogMsg(‘請選擇需要刪除的用戶！‘, 0);
}
}
封裝的方法：
$.RemoveForm = function (options) {
var defaults = {
msg: "註：您確定要刪除嗎？該操作將無法恢復",
loading: "正在刪除數據...",
url: "",
param: [],
type: "post",
dataType: "text",
success: null
};
var options = $.extend(defaults, options);
dialogConfirm(options.msg, function (r) {
if (r) {
Loading(true, options.loading);
window.setTimeout(function () {
var postdata = options.param;
if ($(‘[name=__RequestVerificationToken]‘).length > 0) {
postdata["__RequestVerificationToken"] = $(‘[name=__RequestVerificationToken]‘).val();
}
$.ajax({
url: options.url,
data: postdata,
type: options.type,
dataType: options.dataType,
success: function (data) {
options.success(data);
/*if (data.type == "3") {
dialogAlert(data.message, -1);
} else {
dialogMsg(data.message, 1);
options.success(data);
}*/
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
Loading(false);
dialogMsg(errorThrown, -1);
},
beforeSend: function () {
Loading(true, options.loading);
},
complete: function () {
Loading(false);
}
});
}, 500);
}
});
}
JS組件系列——封裝自己的JS組件