Miaowei Classroom JS Advanced Topic Video Material Sharing

"Miaowei Classroom JS Advanced Topic Video Tutorial" will introduce you to JavaScript in detail. JavaScript is a literal scripting language and a scripting language widely used in client-side Web development. Currently used by millions of web pages to improve design, validate forms, detect browsers, create cookies, and more.

Video playback address: http://www.php.cn/course/241.html

The difficulty of this video is Encapsulate your own JS library:

1. Requirement background
Many times, we use jquery.ajax to send requests to the background. Code like

$.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 () {
        }
 
      });

is too common. At this time, we have such a requirement: when we call the ajax request, we don’t want to write code like error:function(e){} every time, but we also want it to output the ajax error message to The browser allows users to see. How to do it?

2. Implementation principle
It is not difficult to achieve the above effect. We can encapsulate $.ajax({}) and define the event corresponding to error in the encapsulated public method. . Indeed, this can meet our requirements, but it is not perfect. The reasons are very simple: 1) Encapsulating another layer on top of jquery is not efficient enough; 2) The caller's habits need to be changed, and each time ajax is called, We don’t want to see it written according to the rules of the method we defined, instead of directly using the native $.ajax({}) method.

In this case, how can we achieve the above requirements without encapsulating controls? The answer is to extend the native jquery.ajax through our $.extend.

In fact, it is not difficult to implement. Our requirements can be achieved through the following piece of code.

(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);

If you have not been exposed to the $.extend method in jquery, you may not understand what the above means. Okay, let's first take a look at how the jquery API explains the $.extend() method.

The above is the detailed content of Miaowei Classroom JS Advanced Topic Video Material Sharing. For more information, please follow other related articles on the PHP Chinese website!