rewrap-ajax.js插件
很久没有动手写技术的文章,这个过程中间一直在写日记,生活点滴的记录替代了技术文章的编写,可以看出以往的内心是激情或烈火,现在是...
最近写了一个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状态对应的值必须是使用数组[]保存,数组内部必须是一个对象{},对象的属性以常规格式要求,对象的属性对应的值必须是一个dom节点能访问的Element元素(或node节点,class类,id,tag标签等等)。
然而methods方法的内部结构为常规的对象调用函数的格式,其中return返回的对象键为API的方法,注意它不支持自定义写法,返回的对象的值为函数写法,那么函数方法接收一个参数(此参数为props管道内部的state状态属性),方法的内部使用this指针写法,如下:this.el(param).add()
完整结构:
return {
addClass: function (scope){
this.el([scope.State_01.class,scope.State_01.static]).add()
},
removeClass: function (scope){
this.el([scope.State_01.class,scope.State_01.tip]).remove()
},
pushHtml: function (scope){
this.el([scope.State_01.static,scope.State_01.class]).push()
},
hasClass: function (scope){
this.el(scope.State_01..content).has()
}
}
其中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是作为方法的第一个参数流进来,那么元素的管道为$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
rewrap-ajax.js插件的更多相关文章
- ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...
- ajax请求执行完成后再执行其他操作(jQuery.page.js插件使用为例)
就我们做知,ajax强大之处在于它的异步请求,但是有时候我们需要ajax执行彻底完成之后再执行其他函数或操作 这个时候往往我们用到ajax的回调函数,但是假如你不想或者不能把接下来的操作写在回调函数中 ...
- javascript表单的Ajax 提交插件的使用
Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...
- Intense Images – 全屏浏览图像的 JS 插件
Intense Images 是一个独立的 JavaScript 库,用于查看全屏图像.使用触摸/鼠标来实现图片位置的平移.图像元素的所有样式都是可以自定义的,Intense.js 只处理图像浏览器和 ...
- [转]jQuery Pagination Ajax分页插件中文详解
在做项目时需要用到在前端页面中需要实现分页显示的功能,类似于博客园下面的分页导航.从网上找了几个,觉得下面这个使用起来非常简单,也很方便.特在这里记录一下. 以下为文章原文. 中文项目地址:http: ...
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- jQuery Pagination Ajax分页插件中文详解(转)
一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面 二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此 ...
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
- jQuery Pagination Ajax分页插件中文详解(摘)
jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...
- 表单验证的validate.js插件---jQuery Validation Plugin
早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...
随机推荐
- 团队作业4——第一次项目冲刺(Alpha版本)4.22
团队作业4--第一次项目冲刺(Alpha版本) Day one: 会议照片 由于团队中的组员今天不在学校,所以我们的站立会议提前一天展开. 项目进展 由于今天是Alpha版本项目冲刺的第一天,所以没有 ...
- 201521123007《Java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自 ...
- java课程设计---团体
课设题目:学生信息管理系统 一.团队成员介绍 周汉麟(组长):网络1511 201521123030 吴敏烽(组员):网络1512 201521123044 二.项目git地址 [课设] 吴敏烽 ht ...
- javascript中slice() splice() concat()操作数组的方法
这三个操作数组,哪个返回一个新数组呢.上代码 splice()方法,用于插入,删除和替换. var arr=[1,2,3,4,5]; var arr1=arr.splice(1,3); console ...
- Ansible系列(六):循环和条件判断
本文目录:1. 循环 1.1 with_items迭代列表 1.2 with_dict迭代字典项 1.3 with_fileglob迭代文件 1.4 with_lines迭代行 1.5 with_ne ...
- bootstrap 表单样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular学习笔记04 理论加实践
scope: 布尔型或对象(默认为false) ,为true时继承父作用域并创建一个新的作用域隔离作用域具有隔离作用域的指令最主要的使用场景是创建可复用的组件, 组件可以在未知上下文中使用,并且可以避 ...
- Spring框架(二)
Spring反射机制: 1, 通过spring来获取一个对象的实例 <bean id="user" class="com.model.User"> ...
- BZOJ-1012-[JSOI2008]最大数maxnumber(线段树)
Description 现在请求你维护一个数列,要求提供以下两种操作:1. 查询操作.语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度.2. 插 ...
- 1.Bootstrap-简介
1.介绍 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 2.HTML 模板 一个使用了 Boots ...