rewrap-ajax.js插件介紹

　　很久沒有動手寫技術的文章，這個過程中間一直在寫日記，生活點滴的記錄替代了技術文章的編寫，可以看出以往的內心是激情或烈火，現在是. ..

　　最近寫了一個JS插件，用圈內的話說叫造了個輪子，造的好與不好都不是自己說了算，關鍵還是大家用的好與不好。
　　當然我自己也在使用，由於個人偏愛與喜好，所以未能藉簽其他Ajax框架的寫法，目前的版本都是以版本一進行往上整合的成果，所以你想要全面了解內部的結構，可以先從版本一開始看起。

　　現在我們說說整體的設計結構，版本一是好友收集整理的方法，基礎的寫法已經成型，調用nativeAjax方放即可，方法內部有三個參數，第一個為ajax的屬性，第二個為成功的函數，第三個為錯誤的函數，具體如下：

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

　　基於以上的設計模式，然後給他進行二次封裝，首先ajax的服務屬性固定不變，那麼我們可以把所有的ajax properties綁定到物件上即可，如果直接綁定在指定的物件上，其實我們只管給參數和拿參數，省了很多事情，這個過程簡單了不少，那麼彈性就不會很高。如果我們想自己在內部進行封裝，那麼就要求高靈活性和可復用屬性，所以我把屬性放在了function函數裡面，於是在內部使用this指針綁定ajax屬性進行調用，同時可以在內部進行插件的再次封裝，這是我所理解的這個版本的內部結構的設計模式。

　　版本二rewrap-ajax調用的外部結構類似jq的JQ.fn屬性，是以鍊式結構的物件屬性方法來使用的，所以我們在<script>內部使用wrap.service(`ajax`, foo)即可，然後foo函數內部具有ajax的服務屬性，我們只要把ajax的屬性綁定到this指針上即可，ajax的get分別有URL，TYPE，SUCCESS， ERROR四個屬性，而這4個屬性都支援大小寫的格式。然後this.success，this.error是二個方法，分別是呼叫成功的資料請求和呼叫錯誤狀態的捕獲，而this.success和this.error都擁有一個參數。 </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)
    };
});

　　版本三rewrap-ajax保持版本二的外部結構和this寫法，this指針上多了二個功能，分別是props和methods方法，其中props方法內部return返回的結構為鍵值對的資料格式，具有多個state...狀態，例如：

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 }

#　　其中每一個state狀態對應的值必須是使用陣列[]儲存，陣列內部必須是物件{}，物件的屬性以常規格式要求，物件的屬性對應的值必須是一個dom節點能存取的Element元素（或node節點，class類，id，tag標籤等等）。

　　然而methods方法的內部結構為常規的物件呼叫函數的格式，其中return傳回的物件鍵為API的方法，注意它不支援自訂寫法，傳回的物件的值為函數寫法，那麼函數方法接收一個參數（此參數為props管道內部的state狀態屬性），方法的內部使用this指標寫法，如下：this.el(param).add()

完整結構：

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

　　其中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方法。

　　外部this呼叫的方式，透過作用域$scope的形式獲得props屬性和methods方法，外部呼叫如下：

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中文網其他相關文章！