妙味課堂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中文網其他相關文章！