rewrap-ajax.js插件

　　很久没有动手写技术的文章，这个过程中间一直在写日记，生活点滴的记录替代了技术文章的编写，可以看出以往的内心是激情或烈火，现在是...

　　最近写了一个JS插件，用圈内的话说叫造了个轮子，造的好与不好都不是自己说了算，关键还是大家用的好与不好。
　　当然我自己也在使用，由于个人偏爱与喜好，所以未能借签其他Ajax框架的写法，目前的版本都是以版本一进行往上整合的成果，所以你想要全面了解内部的结构，可以先从版本一开始看起。

　　现在我们说说整体的设计结构，版本一是好友收集整理的方法，基础的写法已经成型，调用nativeAjax方放即可，方法内部有三个参数，第一个为ajax的属性，第二个为成功的函数，第三个为错误的函数，具体如下：

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

　　基于以上的设计模式，然后给他进行二次封装，首先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都拥有一个参数。

 1 wrap.service('ajax',function ajax() {
 2     // 支持大小写
 3     this.URL = "query.do"
 4     this.TYPE = "GET"
 5     this.SUCCESS = function(data) {
 6         var val = data;
 7         console.log(val)
 8     };
 9     this.ERROR = function(err) {
10         console.log(err)
11     };
12 });

　　版本三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()

完整结构：

 1 return {
 3     addClass: function (scope){
 5         this.el([scope.State_01.class,scope.State_01.static]).add()
 7     },
 9     removeClass: function (scope){
11         this.el([scope.State_01.class,scope.State_01.tip]).remove()
13     },
15     pushHtml: function (scope){
17         this.el([scope.State_01.static,scope.State_01.class]).push()
19     },
21     hasClass: function (scope){
23         this.el(scope.State_01..content).has()
25     }
27 }

　　其中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.State_01.static).add('error_message')
    $scope.$props.$el($scope.$props.$scope.State_01.static).push('调用出错 error')
    $scope.$props.$el($scope.$props.$scope.State_01.tip).remove('show')
    console.log(err)
}

　　目前$scope是作为方法的第一个参数流进来，那么元素的管道为$scope.$props.$scope，获得元素方法的管道为$scope.$props.$el()，元素调用API的方法为：$scope.$props.$el().add()，$scope.$props.$el().remove()，$scope.$props.$el().push()等等。

　　rewrap-ajax详细GIT地址：https://github.com/ZWLTZ/rewrap-ajax

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有