Partage de matériel vidéo de sujet avancé Miaowei Classroom JS

"Miaowei Classroom JS Advanced Topic Video Tutorial" vous présentera JavaScript en détail. JavaScript est un langage de script littéral et un langage de script largement utilisé dans le développement Web côté client. Actuellement utilisé par des millions de pages Web pour améliorer la conception, valider des formulaires, détecter les navigateurs, créer des cookies, etc.

Adresse de lecture vidéo : http://www.php.cn/course/241.html

La difficulté de cela La vidéo consiste à encapsuler votre propre bibliothèque JS :

1. Contexte requis
Souvent, nous utilisons jquery.ajax pour envoyer des requêtes en arrière-plan, telles que

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

. commun. Eh bien, à l'heure actuelle, nous avons une telle exigence : lorsque nous appelons une requête ajax, nous ne voulons pas écrire de code comme error:function(e){} à chaque fois, mais nous voulons également qu'elle envoie l'erreur ajax. message à chaque fois Sortie vers le navigateur afin que les utilisateurs puissent le voir. Ce qu'il faut faire?

2. Principe de mise en œuvre
Il n'est pas difficile d'obtenir l'effet ci-dessus. Nous pouvons encapsuler $.ajax({}) et définir l'événement correspondant à l'erreur dans la méthode publique encapsulée. En effet, cela peut répondre à nos exigences, mais ce n'est pas parfait. Les raisons sont très simples : 1) Encapsuler une autre couche au-dessus de jquery n'est pas assez efficace 2) Les habitudes de l'appelant doivent être modifiées, et à chaque appel d'ajax ; , Nous ne voulons pas le voir écrit selon les règles de la méthode que nous avons définie, au lieu d'utiliser directement la méthode native $.ajax({}).

Dans ce cas, comment pouvons-nous répondre aux exigences ci-dessus sans encapsuler les contrôles ? La réponse est d'étendre le jquery.ajax natif via notre $.extend.

En fait, ce n'est pas difficile à mettre en œuvre. Nos exigences peuvent être satisfaites grâce au morceau de code suivant.

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

Si vous n'avez jamais été exposé à la méthode $.extend dans jquery, vous ne comprendrez peut-être pas ce que signifie ce qui précède. Bon, voyons d'abord comment l'API jquery explique la méthode $.extend().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!