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是当做艺术的第一个参数Ajax流进入,那么元素的管道也$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

 

相关文章