rewrap-ajax.js 플러그인 소개

나는 오랫동안 기술 기사를 쓰지 않았습니다. 이 과정에서 일상의 기록이 기술 기사 작성을 대체했음을 알 수 있습니다. 열정 아니면 불, 하지만 지금은 ...

최근 업계에서 휠이라고 불리는 JS 플러그인을 작성했습니다. 좋은지 아닌지는 당신에게 달려 있지 않습니다. 다들 잘 쓰시거나 안 쓰시거나.
　물론 제가 직접 사용하고 있기 때문에 다른 Ajax 프레임워크의 작성 방법을 차용할 수는 없습니다. 현재 버전은 버전 1에서 상향 통합된 결과이므로 완전히 이해하시기 바랍니다. 내부 구조의 경우 버전 1부터 시작할 수 있습니다.

이제 전반적인 디자인 구조에 대해 이야기해 보겠습니다. 버전 1은 친구를 모으고 정리하는 방법입니다. 기본 작성 방법은 nativeAjax를 호출하고 해당 방법 안에 두는 것입니다. 두 번째는 ajax 속성입니다. 두 개는 성공적인 함수이고 세 번째는 오류 함수입니다.

nativeAjax(postOption,function(data){
    // 3.1、请求成功回调
    console.log(data);
},function(error){
    // 3.2、请求失败回调,返回HTTP状态码
    console.log(error);
});

위의 디자인 패턴을 기반으로 먼저 다시 캡슐화합니다. ajax의 서비스 속성이 고정되면 모든 ajax 속성을 객체에 바인딩할 수 있습니다. 지정된 객체에 직접 바인딩되는 경우 실제로 매개변수를 주고 받기만 하면 되므로 많은 비용이 절약됩니다. 프로세스는 훨씬 간단하고 유연성은 그리 높지 않습니다. 내부적으로 캡슐화하려면 유연성이 높고 재사용 가능한 속성이 필요하므로 속성을 함수 함수에 넣기 때문에 이 포인터를 사용하여 ajax 속성을 내부적으로 바인딩하여 호출하는 동시에 다음을 수행할 수 있습니다. 플러그인이 다시 캡슐화되어 있는 것으로 알고 있습니다. 이것이 제가 이해하는 이번 버전의 내부 구조의 디자인 패턴입니다.

버전 2 rewrap-ajax가 호출하는 외부 구조는 jq의 JQ.fn 속성과 유사하므로 체인 구조의 객체 속성 메서드에서 사용하므로 내부적으로는 Wrap.service(`ajax`를 사용합니다. 3f1c4e4b6b16bbbd69b2ee476dc4f83a, foo), foo 함수는 내부에 ajax의 서비스 속성을 갖고 있습니다. ajax의 get에는 URL, TYPE, SUCCESS 및 ERROR의 네 가지 속성만 있으면 됩니다. 4 각 속성은 대문자 및 소문자 형식을 지원합니다. this.success와 this.error는 성공적인 데이터 요청을 호출하고 오류 상태 캡처를 호출하는 두 가지 메서드이며 this.success와 this.error 모두 매개 변수를 갖습니다.

wrap.service('ajax',function ajax() {
    // 支持大小写
    this.URL = "query.do"
    this.TYPE = "GET"
    this.SUCCESS = function(data) {
        var val = data;
        console.log(val)
    };
    this.ERROR = function(err) {
        console.log(err)
    };
});

버전 3rewrap-ajax는 버전 2의 외부 구조와 이 작성 방법을 유지합니다. this 포인터에는 두 가지 기능, 즉 props 메소드에 의해 내부적으로 반환되는 구조가 있습니다. 값 쌍 형식, 여러 상태... 상태(예:

1 return {
2     State_01: [{ class : ‘.main’, static: 'color', tip: 'message', content: 'container'}],
3     State_02: [{ class : ‘.main’, static: 'color'}],
4     State_03: [{ class : ‘.main’}]
5 }

　) 각 상태 상태에 해당하는 값은 배열 []을 사용하여 저장되어야 하며, 객체의 속성은 일반 형식으로 필요하며, 객체의 속성에 해당하는 값은 dom 노드에서 액세스할 수 있는 Element 요소(또는 노드 노드, 클래스 클래스, ID, 태그 레이블 등)여야 합니다.

하지만 methods 메소드의 내부 구조는 일반 객체 호출 함수 형식으로 되어 있으며, return으로 반환된 객체 키는 사용자 정의 쓰기를 지원하지 않습니다. 반환된 객체는 함수에 작성되므로 함수 메서드는 매개변수를 받습니다(이 매개변수는 props 파이프라인 내부의 상태 속성입니다). 메서드는 다음과 같이 이 포인터를 사용하여 내부적으로 작성됩니다.

전체 구조:

return {
    addClass: function (scope){
        this.el([scope.class,scope.static]).add()
    },
    removeClass: function (scope){
        this.el([scope.class,scope.tip]).remove()
    },
    pushHtml: function (scope){
        this.el([scope.static,scope.class]).push()
    },
    hasClass: function (scope){
        this.el(scope.define.content).has()
    }
}

　where this.el (param) 메소드 내부의 매개변수는 props 파이프라인을 통해 매개변수로 흘러나오는 상태 속성 값이며, 매개변수로 받은 결과는 문자열입니다. 문자열은 배열 [] 형식으로 저장될 수 있으며 이러한 문자열에는 모두 이 API 메서드가 있습니다. this.el() 뒤의 add 메소드는 현재 문자열에 의해 호출되는 add 메소드입니다. 그러나 add 바인딩 메소드는 API 메소드입니다. 예를 들어 addClass는 rewrap-ajax 내부의 API 메소드이므로 외부에서 사용자 정의 add를 호출합니다. addClass 메소드를 구현하기 위한 메소드입니다. this.methods 내의 사용자 정의된 add 메소드에는 매개변수가 필요하지 않지만 외부 파이프라인 호출 add에 매개변수가 필요한지 여부는 addClass 메소드에 따라 다릅니다(addClass는 rewrap-ajax 내부의 API 메소드입니다). 따라서 API 메소드는 나중에 공개됩니다.

　

외부 호출 방법은 $scope 범위를 통해 props 속성과 메서드 메서드를 얻는 것입니다.

this.ERROR = function( $scope, err ) {
    $scope.$props.$el($scope.$props.$scope.define.static).add('error_message')
    $scope.$props.$el($scope.$props.$scope.define.static).push('调用出错 error')
    $scope.$props.$el($scope.$props.$scope.define.tip).remove('show')
    console.log(err)
}

위 내용은 rewrap-ajax.js 플러그인 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!