Mockjs의 원리 소개

零到壹度
풀어 주다: 2018-04-12 11:12:02
원래의
3827명이 탐색했습니다.

이 글에서 공유한 내용은 Mockjs의 원칙에 대한 소개입니다. 필요한 친구들이 참고할 수 있습니다. 백엔드는 데이터 형식을 제공하고 프런트엔드는 시뮬레이션된 인터페이스를 통해 데이터를 반환하여 페이지를 렌더링합니다. 한동안 이 플러그인이 Ajax 요청을 차단했는지 궁금했습니다. . 온라인으로 검색한 결과 정보가 매우 적고 성공하지 못한 것으로 나타났습니다. 그러던 어느 날 문득 생각이 들었습니다. ajax 메서드 요청을 다시 작성하면 요청을 보내기 전에 콜백을 제공하면 이 기능을 구현할 수 있지 않을까요?

Idea

환경 준비

  • 가장 편리한 jquery로 시작하여 $.ajax


    • 다시 작성하도록 계획하세요. 해결해야 할 주요 문제 are
    • $.ajax

  • 需要解决的问题主要有

    • $.ajax即将被改写,所以要自己实现一个发送请求的xhr方法(又懒得写封装的ajax方法,于是把$.ajax缓存起来,以待后用)

    • 如何去匹配将被拦截的请求地址

    • 拦截了请求之后,如何把预先准备好的数据当做请求成功后的数据

  • 代码实现

    let Mock = {  // 存储匹配规则
      rules: new Map(),  // 缓存ajax方法
      ajax: $.ajax,
      mock(url, data) {
        this.rules.set(url, data)
      }
    }// 改写ajax方法$.ajax = function(options) {
      Mock.ajax({
        url: options.url,
        beforeSend(XHR) {      let data = Mock.rules.get(options.url)      // 找到规则拦截请求,并执行回调(return false时会拦截请求)
          data && options.success(data)      return !data
        },
        success(data) {      // 找不到规则,正常发送请求
          options.success(data)
        }
      })
    }// 测试Mock.mock('/a', {
      a: 1,
      b: 2})
    $.ajax({
      url: '/a',
      success(data) {
        console.log(data, 1)
      }
    })
    $.ajax({
      url: '/b',
      success(data) {
        console.log(data, 2)
      }
    })
    로그인 후 복사
  • 功能检测

    • 以上代码可直接拷贝至控制栏运行,我们可以看到只发送了b请求,a请求被拦截了下来,同时我们也能拿到所预期的数据

    • 至于Mockjs随机数据的功能,我们暂不考虑

总结

  • 之后我也粗略看了下Mockjs源码,它也是改写了jquery和zepto的$.ajax

    $.ajax가 곧 다시 작성될 예정이므로 요청을 보내는 xhr 메서드를 직접 구현해야 합니다. (캡슐화된 ajax 메서드를 작성하기에는 너무 게으른 관계로 캐시합니다. $.ajax 추후 사용)

감청할 요청 주소를 일치시키는 방법🎜🎜🎜🎜요청을 감청한 후 미리 준비된 데이터를 데이터로 사용하는 방법 요청이 성공한 후🎜🎜🎜🎜🎜코드 구현🎜
var Ajax={    get: function(url, fn) {
        var xhr = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // readyState == 4说明请求已完成
                fn.call(this, xhr.responseText);  //从服务器获得数据
            }
        };
        xhr.send();
    },
    post: function (url, data, fn) {         // datat应为'a=a1&b=b1'这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  // 添加http头,发送信息至服务器时内容编码类型
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
                fn.call(this, xhr.responseText);
            }
        };
        xhr.send(data);
    }
}
로그인 후 복사
🎜🎜 🎜기능 감지🎜🎜🎜🎜🎜🎜위 코드를 컨트롤바에 직접 복사해서 실행하면 되는 것을 알 수 있습니다. 요청이 차단되는 동시에 예상되는 데이터도 얻을 수 있습니다🎜🎜🎜🎜 Mockjs 임의 데이터의 기능에 관해서는 지금은 고려하지 않겠습니다🎜🎜🎜🎜🎜요약🎜🎜🎜🎜이후 즉, jquery 및 zepto Implemented의 $.ajax 메서드도 다시 작성한 Mockjs 소스 코드를 대략적으로 살펴보았는데, 이는 네이티브 js로 ajax 메서드를 캡슐화하면 이를 수행할 수 없음을 의미합니다. 다음은 네이티브 js의 ajax 메서드입니다. 관심이 있으시면 직접 확인해 보세요. 🎜rrreee🎜🎜🎜🎜🎜

위 내용은 Mockjs의 원리 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿