Miaowei 교실 JS 고급 주제 비디오 자료 공유

"Miaowei Classroom JS Advanced Topic Video Tutorial"에서는 JavaScript에 대해 자세히 소개합니다. JavaScript는 문자 그대로의 스크립팅 언어이자 클라이언트 측 웹 개발에 널리 사용되는 스크립팅 언어입니다. 현재 수백만 개의 웹 페이지에서 디자인 개선, 양식 유효성 검사, 브라우저 감지, 쿠키 생성 등을 위해 사용됩니다.

동영상 재생 주소: 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({})를 캡슐화하고 캡슐화된 공개 메서드에서 오류에 해당하는 이벤트를 정의할 수 있습니다. 실제로 이는 우리의 요구 사항을 충족할 수 있지만 완벽하지는 않습니다. 이유는 매우 간단합니다. 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 교실 JS 고급 주제 비디오 자료 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!