跟大家講解下有關妙味課堂JS高級專題篇視頻資料分享，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說妙味課堂JS高級專題篇視頻資料分享，小編也收集到了有關妙味課堂JS高級專題篇視頻資料分享的相關資料，希望大家看到了會喜歡。

《妙味課堂JS高級專題篇視頻教程》將向大家詳細介紹javascript，javascript是一種直譯式腳本語言，也是一種廣泛用于客戶端Web開發的腳本語言。目前，被數百萬計的網頁用來改進設計、驗證表單、檢測瀏覽器、創建cookies,以及更多的應用。

視頻播放地址：http://www.php.cn/course/241.html

本視頻難點在于封裝自己的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, '錯誤消息', { 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方法，返回最新的參數 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.將最新的參數傳回ajax對象 _ajax(_options); };})(jQuery);

如果沒接觸過jquery里面$.extend這個方法的童鞋可能看不懂以上是什么意思。好，我們首先來看看jquery API對$.extend()方法是作何解釋的。

以上就是妙味課堂JS高級專題篇視頻資料分享的詳細內容，更多請關注php中文網其它相關文章！

來源：php中文網