Miaowei Classroom JS 高度なトピックのビデオ資料の共有

「Miaowei Classroom JS Advanced Topic Video Tutorial」では、JavaScript について詳しく紹介します。JavaScript は文字通りのスクリプト言語であり、クライアント側の Web 開発で広く使用されているスクリプト言語です。現在、デザインの改善、フォームの検証、ブラウザの検出、Cookie の作成などを目的として、何百万もの Web ページで使用されています。

ビデオ再生アドレス: http://www.php.cn/course/241.html

このビデオの難しさは、独自の JS ライブラリをカプセル化することです:

要件の背景
何度も、 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({}) をカプセル化し、カプセル化された public メソッドにエラーに対応するイベントを定義することは難しくありません。確かに、これは要件を満たしますが、完全ではありません。理由は非常に単純です。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() メソッドをどのように説明するかを見てみましょう。

以上がMiaowei Classroom JS 高度なトピックのビデオ資料の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。