JS插件rewrap-ajax.js设计与链式调用实现详解

插件背景与版本演进概述

近期开发了一款名为rewrap-ajax的JavaScript插件，俗称“造轮子”。插件的质量优劣最终由使用者的反馈决定，而非开发者自述。目前该插件已在实际项目中应用，因个人偏好未直接借鉴主流Ajax框架的写法，当前版本是在初始版本基础上逐步整合而成的。若需深入理解内部结构，建议从版本一开始阅读。

版本一：基础nativeAjax封装

接下来介绍整体设计架构。版本一采用了整理后的基础写法，核心调用方式为nativeAjax方法。该方法接收三个参数：第一个是Ajax配置属性，第二个是成功回调函数，第三个是错误回调函数。具体实现如下：

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

基于上述设计，对插件进行二次封装。由于Ajax服务属性固定，可将所有Ajax属性绑定到对象上，从而简化参数传递过程。但这种直接绑定方式灵活性较低。若追求高灵活性和可复用性，可将属性封装在函数内部，通过this指针绑定Ajax属性进行调用，并支持内部再次封装。这是本版本内部结构的设计模式。

版本二：链式调用与属性绑定

版本二的rewrap-ajax调用结构类似jQuery的JQ.fn属性，采用链式对象属性方法。在<script>标签内使用wrap.service(`ajax`, foo)即可调用，其中foo函数内部包含Ajax服务属性。只需将Ajax属性绑定到this指针上即可。Ajax的GET请求包含URL、TYPE、SUCCESS、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)
 };
});

版本三：props与methods管道设计

版本三保持版本二的外部结构和this写法，但在this指针上增加了props和methods方法。其中props方法返回键值对数据格式，包含多个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方法的内部结构为常规对象调用函数格式。返回对象的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()
 }
}

API方法调用与外部交互

其中.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插件的实例代码，希望对大家有所帮助。如有任何疑问，请留言，小编会及时回复。感谢大家对本站网站的支持！