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

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

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

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

　　版本二rewrap-ajax調(diào)用的外部結(jié)構(gòu)類似jq的JQ.fn屬性，是以鏈?zhǔn)浇Y(jié)構(gòu)的對(duì)象屬性方法來(lái)使用的，所以我們?cè)?lt;script>內(nèi)部使用wrap.service(`ajax`, foo)即可，然后foo函數(shù)內(nèi)部具有ajax的服務(wù)屬性，我們只要把a(bǔ)jax的屬性綁定到this指針上即可，ajax的get分別有URL，TYPE，SUCCESS，ERROR四個(gè)屬性，并且這4個(gè)屬性都支持大小寫的格式。然后this.success，this.error是二個(gè)方法，分別是調(diào)用成功的數(shù)據(jù)請(qǐng)求和調(diào)用錯(cuò)誤狀態(tài)的捕獲，并且this.success和this.error都擁有一個(gè)參數(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指針上多了二個(gè)功能，分別是props和methods方法，其中props方法內(nèi)部return返回的結(jié)構(gòu)為鍵值對(duì)的數(shù)據(jù)格式，具有多個(gè)state...狀態(tài)，比如：

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

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

　　然而methods方法的內(nèi)部結(jié)構(gòu)為常規(guī)的對(duì)象調(diào)用函數(shù)的格式，其中return返回的對(duì)象key鍵為API的方法，注意它不支持自定義寫法，返回的對(duì)象的value為函數(shù)寫法，那么函數(shù)方法接收一個(gè)參數(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ù)通過(guò)props管道流出狀態(tài)屬性，此屬性的$scope作用域?yàn)閟tate屬性，參數(shù)接收的結(jié)果為字符串，必須是從props獲得的字符串，多個(gè)字符串的結(jié)果可以使用數(shù)組的[]形式儲(chǔ)存，那么這些屬性都具有這個(gè)API方法。el()后面的add方法的作用為當(dāng)前的元素調(diào)用的add方法，然而add綁定的方法是API方法，比如addClass就是rewrap-ajax內(nèi)部的API方法，但是你在外部調(diào)用的時(shí)候，可以使用你自定義的add方法去實(shí)現(xiàn)addClass方法，方法內(nèi)部不需要參數(shù)，但是外部管道調(diào)用add是否需要參數(shù)取決與rewrap-ajax內(nèi)部的API方法。所以之后會(huì)公開API方法。

外部調(diào)用的方式，通過(guò)作用域$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)用出錯(cuò) error')
 $scope.$props.$el($scope.$props.$scope.define.tip).remove('show')
 console.log(err)
}

　　目前$scope是作為方法的第一個(gè)參數(shù)流進(jìn)來(lái)，那么元素的管道為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插件實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論