【学】jQuery的源码思路6——增加each,animaion,ajax以及插件机制
- each()
- 插件机制
- animation
- ajax
//each()
//这里第一个参数指定将this指向每次循环到的那个元素身上,而第三个参数element其实就是this本身所以和第一个参数是一样的,而第二个参数是每次循环的下标
zQuery.prototype.each=function(fn){
for(var i=0;i<this.elements.length;i++){
fn.call(this.elements[i],i,this.elements[i]);
}
};
//插件机制
$.fn=zQuery.prototype; //引用,如果只绑定一个插件,就直接写$.fn.toRed = function(){}...,相当于直接将toRed函数挂到zQuery.prototype上,可以进行zQuery对象调用
//如果是挂多个插件,将函数参数中的json循环,挂在到zQuery.prototype中
$.fn.extend=function(json){
for(var key in json){
//key == tored/toYellow
//json[key] == fn
zQuery.prototype[key]=json[key];
}
};
$.ajax = ajax; //将ajax函数挂在到$.ajax上
//animation
zQuery.prototype.animate=function(json,options){
for(var i=0;i<this.elements.length;i++){
move(this.elements[i],json,options);
}
};
//ajax封装
function ajax(options){
//-1.整理options
options=options||{};
options.data=options.data||{};
options.type=options.type||'get';
options.timeout=options.timeout||0;
//0.整理data json --> string
options.data.t=Math.random();
var arr=[];
for(var key in options.data){
arr.push(key+'='+encodeURIComponent(options.data[key]));
}
var str = arr.join('&');
//1.创建ajax
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
if(options.type=='get'){//get
//2.建立连接
oAjax.open('get',options.url+'?'+str,true);
//3.发送
oAjax.send();
}else {//post
//2.建立连接
oAjax.open('post',options.url,true);
//设置请求头
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
oAjax.send(str);
}
//4.接收
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
clearTimeout(timer);
if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
options.success && options.success(oAjax.responseText);
}else{
options.error && options.error(oAjax.status);
}
}
}
//5.超时
if(options.timeout){
var timer=setTimeout(function(){
//数据不要了 ,你别加载
oAjax.abort();//中断ajax请求,也会触发readyState==4
},options.timeout);
}
}
//运动函数的封装
function move(obj,json,options){
//整理可选参数
options = options || {};
options.duration = options.duration || 300;
options.complete = options.complete || null;
options.easing = options.easing || 'ease-out';
var start={};
var dis={};
for(var key in json){
start[key]=parseFloat(getStyle(obj,key));
if(isNaN(start[key])){
switch(key){
case 'width':
start[key]=obj.offsetWidth;
break;
case 'height':
start[key]=obj.offsetHeight;
break;
case 'opacity':
start[key]=1;
break;
case 'left':
start[key]=0;
break;
case 'top':
start[key]=0;
break;
//marginLeft/top... padding
}
}
dis[key]=json[key]-start[key];
}
var count=Math.round(options.duration/30);
var n=0;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
n++;
for(var key in json){//办事部分包起来
switch(options.easing){
case 'linear':
var a=n/count;// 匀速运动
var cur=start[key]+dis[key]*a;
break;
case 'ease-in':
var a=n/count;// 加速运动
var cur=start[key]+dis[key]*(a*a*a);
break;
case 'ease-out':
var a=1-n/count;// 减速运动
var cur=start[key]+dis[key]*(1-a*a*a);
break;
}
if(key=='opacity'){
obj.style.opacity=cur;
obj.style.filter='alpha(opacity='+cur*100+')';
}else{
obj.style[key]=cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
options.complete && options.complete();
}
},30);
}
【学】jQuery的源码思路6——增加each,animaion,ajax以及插件机制的更多相关文章
- 【学】jQuery的源码思路4——增加一些功能
本文说一些简单的jQuery实现原理 eq() get() hide() show() index() find() //返回找到的一组元素中的第n个 zQuery.prototype.eq=func ...
- 【学】jQuery的源码思路5——增加class的操作
hasClass, addClass, removeClass, toggleClass //addClass,加入class会对元素,利用正则,将class中多余的空格去掉 zQuery.proto ...
- 【学】jQuery的源码思路1——后代选择器
jQuery的源码思路1--后代选择器 这里探讨一下jQuery中后代选择器的封装原理,并自己写一下 getEle('#div1 ul li .box');接受的参数就是个后代选择器,类似于这样: # ...
- 【学】jQuery的源码思路2——$符号是如何封装的
jQuery中的$符号功能很强大,原因在于对函数参数的个数以及种类的控制,还有对于面向对象思想的运用 function jQuery(args){ //接受参数,并对其判断 this.elements ...
- 【学】jQuery的源码思路3——添加事件及其他
这段添加的方法有: 各类事件函数 css() addEvent() toggle() //添加各种事件,将常用的事件名称放入数组,然后循环着加入到zQuery对象的原型上 var eventArr = ...
- 【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- jQuery.Callbacks 源码解读二
一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...
- jQuery.attributes源码分析(attr/prop/val/class)
回顾 有了之前的几篇对于jQuery.attributes相关的研究,是时候分析jQuery.attr的源码了 Javascript中的attribute和property分析 attribute和p ...
- 【深入浅出jQuery】源码浅析2--奇技淫巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
随机推荐
- myeclipse和eclipse哪个好?
eclipse是开发java的一款专业IDE,myeclipse本身是eclipse的插件(用于开发 javaee的平台),后来myeclipse干脆把eclipse集成进去了,所以现在你下载一个my ...
- 实现PageProcessor
4.1 实现PageProcessor 这部分我们直接通过GithubRepoPageProcessor这个例子来介绍PageProcessor的编写方式.我将PageProcessor的定制分为三个 ...
- Network Assistant (Alpha)版使用说明
Network Assistant (网络助手)使用说明 本软件是一款帮助同学方便Ip更改,小蝴蝶断线重连,一键wifi,定时关机的软件.它集成 ...
- 十分钟了解分布式计算:Google Dataflow
介绍 Google Cloud Dataflow是一种构建.管理和优化复杂数据处理流水线的方法,集成了许多内部技术,如用于数据高效并行化处理的Flume和具有良好容错机制流处理的MillWheel.D ...
- 行列式计算(C#)
最近几天学习高等代数老师说要写个程序算行列式的结果,闲来无事就简单写了一下. 不多说了,上代码 using System; using System.Collections.Generic; usin ...
- 【php学习】PHP 入门经典第一章笔记
第一章: php在线手册:http://php.net/manual/zh/index.php 在开始学习PHP之前,先来看一个合格的PHP程序员今后应具备哪些知识,这里只是笔者的一些总结,希望对读者 ...
- git 版本控制
用gitbash进入类似命令行的窗口 用命令 cd e:/learngit 进入该目录,然后在此目录下初始化$ git init, 于是该文件夹就成为了一个工作区,里面的.git文件就是版本库(rep ...
- C的文件操作2
[转] C语言文件操作 概述 所谓文件(file)一般指存储在外部介质上数据的集合,比如我们经常使用的mp3.mp4.txt.bmp.jpg.exe.rmvb等等.这些文件各有各的用途,我们通常将它 ...
- 每天的代码review和解决技术难题
在此结构中,一个 PPC 处理器作为监管处理器,与大量的 SPE流处理器相连通,组成了一个工作流水线. 对于一个图形处理过程来说,某个 SPE 可负责提取数据,另一个 SPE 负责变换,再另一个负责存 ...
- C# Redis Server分布式缓存编程 --网络转载
这篇文章我将介绍如果用最简洁的方式配置Redis Server, 以及如何使用C#和它交互编程 一. 背景介绍 Redis是最快的key-value分布式缓存之一 缺点: 没有本地数据缓冲, 目前还没 ...