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

　　現(xiàn)在我們說說整體的設(shè)計結(jié)構(gòu)，版本一是好友收集整理的方法，基礎(chǔ)的寫法已經(jīng)成型，調(diào)用nativeAjax方放即可，方法內(nèi)部有三個參數(shù)，第一個為ajax的屬性，第二個為成功的函數(shù)，第三個為錯誤的函數(shù)，具體如下：

nativeAjax(postOption,function(data){
 // 3.1、請求成功回調(diào)
 console.log(data);
},function(error){
 // 3.2、請求失敗回調(diào),返回HTTP狀態(tài)碼
 console.log(error);
});

　　基于以上的設(shè)計模式，然后給他進行二次封裝，首先ajax的服務(wù)屬性固定不變，那么我們可以把所有的ajax properties綁定到對象上即可，如果直接綁定在指定的對象上，其實我們只管給參數(shù)和拿參數(shù)，省了很多事情，這個過程簡單了不少，那么靈活性就不會很高。如果我們想自己在內(nèi)部進行封裝，那么就要求高靈活性和可復(fù)用屬性，所以我把屬性放在了function函數(shù)里面，于是在內(nèi)部使用this指針綁定ajax屬性進行調(diào)用，同時可以在內(nèi)部進行插件的再次封裝，這是我所理解的這個版本的內(nèi)部結(jié)構(gòu)的設(shè)計模式。

　　版本二rewrap-ajax調(diào)用的外部結(jié)構(gòu)類似jq的JQ.fn屬性，是以鏈?zhǔn)浇Y(jié)構(gòu)的對象屬性方法來使用的，所以我們在<script>內(nèi)部使用wrap.service(`ajax`, foo)即可，然后foo函數(shù)內(nèi)部具有ajax的服務(wù)屬性，我們只要把ajax的屬性綁定到this指針上即可，ajax的get分別有URL，TYPE，SUCCESS，ERROR四個屬性，并且這4個屬性都支持大小寫的格式。然后this.success，this.error是二個方法，分別是調(diào)用成功的數(shù)據(jù)請求和調(diào)用錯誤狀態(tài)的捕獲，并且this.success和this.error都擁有一個參數(shù)。

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保持版本二的外部結(jié)構(gòu)和this寫法，this指針上多了二個功能，分別是props和methods方法，其中props方法內(nèi)部return返回的結(jié)構(gòu)為鍵值對的數(shù)據(jù)格式，具有多個state...狀態(tài)，比如：

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

　　其中每一個state狀態(tài)對應(yīng)的value值必須是使用數(shù)組[]保存，數(shù)組內(nèi)部必須是一個對象{}，對象的屬性以常規(guī)格式要求，對象對應(yīng)的value必須是一個dom節(jié)點能訪問的Element元素（或node節(jié)點，class類，id，tag標(biāo)簽等等）。

　　然而methods方法的內(nèi)部結(jié)構(gòu)為常規(guī)的對象調(diào)用函數(shù)的格式，其中return返回的對象key鍵為API的方法，注意它不支持自定義寫法，返回的對象的value為函數(shù)寫法，那么函數(shù)方法接收一個參數(shù)，此參數(shù)為props管道內(nèi)部的state狀態(tài)屬性。并且函數(shù)的方法內(nèi)部使用this指針寫法，如下：this.el().add()

完整結(jié)構(gòu)：

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

外部調(diào)用的方式，通過作用域$scope的形式獲得props屬性和methods方法，外部調(diào)用如下：

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('調(diào)用出錯 error')
 $scope.$props.$el($scope.$props.$scope.define.tip).remove('show')
 console.log(err)
}

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

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

總結(jié)

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

最新評論