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 相关文章推荐
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
JS中如何优雅的使用async await详解
Oct 05 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 Javascript
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的FTP学习(一)[转自奥索]
2006/10/09 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
深入理解NumPy简明教程---数组2
2016/12/17 Python
Python线程同步的实现代码
2018/10/03 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
Python实现图片添加文字
2019/11/26 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
大学生职业生涯规划方案
2014/01/03 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
和睦家庭事迹
2014/05/14 职场文书
2014年学校工作总结
2014/11/20 职场文书
运动会1000米加油稿
2015/07/21 职场文书
周一问候语大全
2015/11/10 职场文书