js 中rewrap-ajax.js插件实例代码


Posted in Javascript onOctober 20, 2017

最近写了一个JS插件,用圈内的话说叫造了个轮子,造的好与不好都不是自己说了算,关键还是大家用的好与不好。

当然我自己也在使用,由于个人偏爱与喜好,所以未能借签其他Ajax框架的写法,目前的版本都是以版本一进行往上整合的成果,所以你想要全面了解内部的结构,可以先从版本一开始看起。

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

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

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

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保持版本二的外部结构和this写法,this指针上多了二个功能,分别是props和methods方法,其中props方法内部return返回的结构为键值对的数据格式,具有多个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方法的内部结构为常规的对象调用函数的格式,其中return返回的对象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()
 }
}

其中.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插件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
Vue中使用vux配置代码详解
Sep 16 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 #jQuery
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 #Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 #Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 #Javascript
phantomjs导出html到pdf的方法总结
Oct 19 #Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 #Javascript
vue resource post请求时遇到的坑
Oct 19 #Javascript
You might like
PHP数字格式化
2006/12/06 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP入门学习笔记之一
2010/10/12 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
JavaScript 调试器简介
2009/02/21 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
js select option对象小结
2013/12/20 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
vue mounted组件的使用
2018/06/18 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
中英文自我评价常用句型
2013/12/19 职场文书
党校学习思想汇报
2014/01/06 职场文书
单位委托书范本
2014/04/04 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书