很久没有动手写技术的文章,这个过程中间一直在写日记,生活点滴的记录替代了技术文章的编写,可以看出以往的内心是激情或烈火,现在是...

  最近写了一个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插件的更多相关文章

  1. ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

    先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

  2. ajax请求执行完成后再执行其他操作(jQuery.page.js插件使用为例)

    就我们做知,ajax强大之处在于它的异步请求,但是有时候我们需要ajax执行彻底完成之后再执行其他函数或操作 这个时候往往我们用到ajax的回调函数,但是假如你不想或者不能把接下来的操作写在回调函数中 ...

  3. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

  4. Intense Images – 全屏浏览图像的 JS 插件

    Intense Images 是一个独立的 JavaScript 库,用于查看全屏图像.使用触摸/鼠标来实现图片位置的平移.图像元素的所有样式都是可以自定义的,Intense.js 只处理图像浏览器和 ...

  5. [转]jQuery Pagination Ajax分页插件中文详解

    在做项目时需要用到在前端页面中需要实现分页显示的功能,类似于博客园下面的分页导航.从网上找了几个,觉得下面这个使用起来非常简单,也很方便.特在这里记录一下. 以下为文章原文. 中文项目地址:http: ...

  6. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  7. jQuery Pagination Ajax分页插件中文详解(转)

    一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面 二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此 ...

  8. 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  9. jQuery Pagination Ajax分页插件中文详解(摘)

    jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...

  10. 表单验证的validate.js插件---jQuery Validation Plugin

    早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...

随机推荐

  1. 201521123088《java程序设计》第四次总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.11.2 使用常规方法总结其他上课内容 1.多态:同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果,这就是多态性. ...

  2. 201521123122 Java 第二周学习总结

    1. 本周学习总结 1.进一步了解了对码云的使用,学会了将本地代码上传到码云以及将码云上的代码克隆到eclipse上. 2.感觉本章学的基本语法和c的基本上差不多啊 3.string的对象创建后无法修 ...

  3. 201521123063 《Java程序设计》 第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. (1)多线程的冲突 当我们不想一种资源被同时使用,导致最后结果不一致,解决方法: 使用synchronized标记 ...

  4. 201521123057 《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...

  5. Fabric 1.0的多机部署

    Fabric1.0已经正式发布一段时间了,官方给出的单机部署的脚本也很完备,基本上傻瓜式的一键部署,直接运行官方的network_setup.sh up即可.但是在实际生产环境,我们不可能把所有的节点 ...

  6. Thinkphp3.2结合phpqrcode生成二维码(含Logo的二维码),附案例

    首先,下载phpqrcode,将其解压到项目ThinkPHP\Library\Vendor目录下.Index_index.html(模板可自行配置) <form action="{:U ...

  7. centOS 6启动流程

      centOS6启动流程 centOS6启动流程 linux内核组成 centos6启动大致流程 1.post加电自检 2.Boot Sequence 3.MBR引导 4.Grub启动 制作init ...

  8. 二分求最长上升子序列 二分LIS

    #include <iostream> #include <cstring> #define N 50010 using namespace std; int n; int n ...

  9. birt IE8 IE9 兼容问题

    我自己的应用,birt展示报表的时候,在firefox和IE下显示的样式: IE8下的: Firefox下的: 我的项目,应用birt部分的结构如下: 1, prototype.js ,查找下面这段代 ...

  10. Linux Ubuntu从零开始部署web环境及项目 -----tomcat+jdk+mysql (二)

    上一篇介绍如何在linux系统下搭建ssh环境 这篇开始将如何搭建web服务器 1,下载文件 在官网下载好 tomcat.jdk.mysql的linux压缩包 后缀名为.tar.gz 并通过xftp上 ...