js 中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都擁有一個參數。

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...狀態，比如：

return {
  State_01: [{ class : ‘.main', static: 'color', tip: 'message', content: 'container'}],
  State_02: [{ class : ‘.main', static: 'color'}],
  State_03: [{ class : ‘.main'}]
}

　　其中每一個state狀態對應的value值必須是使用數組[]保存，數組內部必須是一個對象{}，對象的屬性以常規格式要求，對象對應的value必須是一個dom節點能訪問的Element元素（或node節點，class類，id，tag標簽等等）。

　　然而methods方法的內部結構為常規的對象調用函數的格式，其中return返回的對象key鍵為API的方法，注意它不支持自定義寫法，返回的對象的value為函數寫法，那么函數方法接收一個參數，此參數為props管道內部的state狀態屬性。并且函數的方法內部使用this指針寫法，如下：this.el().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()
 }
}

　　其中.el()方法內部的參數通過props管道流出狀態屬性，此屬性的$scope作用域為state屬性，參數接收的結果為字符串，必須是從props獲得的字符串，多個字符串的結果可以使用數組的[]形式儲存，那么這些屬性都具有這個API方法。el()后面的add方法的作用為當前的元素調用的add方法，然而add綁定的方法是API方法，比如addClass就是rewrap-ajax內部的API方法，但是你在外部調用的時候，可以使用你自定義的add方法去實現addClass方法，方法內部不需要參數，但是外部管道調用add是否需要參數取決與rewrap-ajax內部的API方法。所以之后會公開API方法。

外部調用的方式，通過作用域$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)
}

　　目前$scope是作為方法的第一個參數流進來，那么元素的管道為scope.props.，獲得元素方法的管道為scope，獲得元素方法的管道為scope.props.el()，元素調用API的方法為：add()，remove()，push()等等。

rewrap-ajax詳細GIT地址：https://github.com/ZWLTZ/rewrap-ajax

總結

以上所述是小編給大家介紹的js 中rewrap-ajax.js插件實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！