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 相关文章推荐
javascipt基础内容--需要注意的细节
Apr 10 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
Javascript玩转继承(三)
May 08 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
详解Vue整合axios的实例代码
Jun 21 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
一个php作的文本留言本的例子(五)
2006/10/09 PHP
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
Python部署web开发程序的几种方法
2017/05/05 Python
Python set常用操作函数集锦
2017/11/15 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
python如何进入交互模式
2020/07/06 Python
Python pip 常用命令汇总
2020/10/19 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
2014年冬季防火方案
2014/05/21 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
复试通知单模板
2015/04/24 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL