Introduction to rewrap-ajax.js plug-in

I haven’t written technical articles for a long time. I have been writing diaries during this process. The recording of daily life has replaced the writing of technical articles. It can be seen that in the past, my heart was full of passion or fire, but now it is . ..

Recently I wrote a JS plug-in. In the words of the circle, it is called a wheel. Whether it is good or not is not up to you. The key is what everyone uses. Good and bad.
Of course I am also using it myself. Due to my personal preferences and preferences, I cannot borrow the writing methods of other Ajax frameworks. The current version is the result of upward integration from version one, so you If you want to fully understand the internal structure, you can start with version 1.

Now let’s talk about the overall design structure. Version 1 is a method of collecting and organizing friends. The basic writing method has been formed. Just call nativeAjax and put it. There are three parameters inside the method. The first One is an ajax attribute, the second is a successful function, and the third is an error function. The details are as follows:

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

Based on the above design pattern, then encapsulate it twice, First of all, the service properties of ajax are fixed, so we can bind all ajax properties to the object. If they are directly bound to the specified object, in fact, we only need to give and take parameters, which saves a lot. Things, this process is much simpler, so the flexibility will not be very high. If we want to encapsulate it internally, we need high flexibility and reusable attributes, so I put the attributes in the function function, so I use this pointer to bind the ajax attribute internally to call it, and at the same time, I can do it internally. The re-encapsulation of the plug-in is the design pattern of the internal structure of this version as I understand it.

Version 2The external structure called by rewrap-ajax is similar to the JQ.fn attribute of jq. It is used by the object attribute method of the chain structure, so we use the <script> internal Just use wrap.service(`ajax`, foo), and then the foo function has the service attribute of ajax inside. We only need to bind the ajax attribute to this pointer. The get of ajax includes URL, TYPE, and SUCCESS. ERROR has four attributes, and all four attributes support uppercase and lowercase formats. Then this.success and this.error are two methods, which are to call the successful data request and to call the error status capture, and both this.success and this.error have a parameter. </script>

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

Version 3rewrap-ajax maintains the external structure and this writing method of version 2. There are two more functions on the this pointer, namely props and methods methods. The props method returns internally. The structure is a data format of key-value pairs, with multiple state... states, such as:

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 }

The value corresponding to each state state must be saved using an array [], The interior of the array must be an object {}. The attributes of the object are required in a regular format. The value corresponding to the attribute of the object must be an Element element (or node node, class, id, tag label, etc.) that can be accessed by a dom node.

However, the internal structure of the methods method is in the format of a regular object call function, in which the object key returned by return is the API method. Note that it does not support custom writing. The returned object is The value is a function writing method, then the function method receives a parameter (this parameter is the state attribute inside the props pipeline), and the method uses this pointer writing method internally, as follows: this.el(param).add()

Complete structure:

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

Wherein the parameter inside this.el(param) method is the status attribute value flowing out through the props pipeline as a parameter, and the result received by the parameter is a string, multiple characters The string results can be stored in the form of array [], then these strings have this API method. The add method after this.el() is the add method called by the current string. However, the add binding method is an API method. For example, addClass is the API method inside rewrap-ajax, so you call your custom add externally. method to implement the addClass method. Note that the customized add method within this.methods does not require parameters, but whether external pipeline calls to add require parameters depends on the addClass method (addClass is the API method inside rewrap-ajax). So the API methods will be exposed later.

　The method of external this call is to obtain the props attribute and methods method through the scope $scope. The external call is as follows:

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)
}

The above is the detailed content of Introduction to rewrap-ajax.js plug-in. For more information, please follow other related articles on the PHP Chinese website!