1 事件库的复习及最终版封装
- 依赖的库：不依赖任何库；
- 使用方法：
- 为全局函数调用；
- 系统行为事件绑定：on(ele,type,fn);解除绑定：off(ele,type,fn)
- 绑定及执行结果：所有浏览器兼容，但事件触发时，fn中this为ele，即元素，默认传入一个事件对象实参
- 自定义行为事件绑定：on(ele,type,fn);执行：fire.call(ele,type,e);解绑：off(ele,type,fn)；
- 绑定时on中的ele为元素，fire函数在调用时必须保证里面的this为元素；type自定义行为的开头必须以my开头；
- 绑定及执行结果：fire作为接口放在函数中执行，如果未用on绑定方法，里面无执行函数；当用on绑定方法后，就会在预留接口处执行方法；用于订阅发布；执行的函数中的this为当前元素；
- 改变函数的this执行：processThis(fn,thisArg)即：将fn中的this指向改变为thisArg
- 执行结果：将fn中的this指向改变为thisArg，并给fn传一个实参e,一般跟事件配合，返回一个匿名函数；
- 注意：
- 绑定自定义行为事件时，on里面的参数ele可以是元素也可以是实例对象，但事件库主要用于给元素绑定系统行为或自定义行为，所以参数ele为元素；一般不设置实例对象；
- 代码：
- 执行代码：
事件库最终版封装 111- 事件库终极版封装
function on(ele,type,fn) { if(/^my/gi.test(type)){//绑定的是自定义行为，必须以my开头 //事件库中ele均为元素 if(!ele[type]){ ele[type]=[]; } var b=ele[type]; if(b.length){ for(var i=0; i
2 运动库的复习及最终版封装
- 依赖的库：依赖utils库，用于接口使用时，依赖Event事件库；
- 使用方法：
- 代码：
animate(opt);为全局函数调用； - 参数：对象opt
- 必须传的参数：1）ele:元素，指需要运动的元素；2）target：属性值为对象，对象中的键值对为目标值；
- 可传可不传的参数：1）duration:运动总时间，默认为2000ms；2）effect:运动方式，可以是字符串，也可以是数字，默认为Linear线性运动；3）callback：不传不执行，传了之后执行函数，函数中this被设置为元素；
- 代码：
- 注意点：在运动结束后，设置一个fire接口，接口的类型为myAnimate，若需要执行操作，可用on在元素身上绑定该行为的方法；fire接口中设置的this为该元素，即绑定的方法执行时，函数中的this为该元素；
- 执行结果：
- 目的：一个元素从开始位置(ele)在规定时间(duration)内，以什么样的运动形式(effect)，到达指定目的地(target)，执行什么动作(callback或fire接口执行)；
- 代码：
- 执行代码：
运动库验证 物体- 封装代码：
(function () { //运动形式对象 var gbEffect= { Linear: function (t, b, c, d){ //匀速 return c*t/d + b; }, EaseIn: function(t, b, c, d){ //加速曲线 return c*(t/=d)*t + b; }, EaseOut: function(t, b, c, d){ //减速曲线 return -c *(t/=d)*(t-2) + b; }, EaseBoth: function(t, b, c, d){ //加速减速曲线 if ((t/=d/2) < 1) { return c/2*t*t + b; } return -c/2 * ((--t)*(t-2) - 1) + b; }, EaseInStrong: function(t, b, c, d){ //加加速曲线 return c*(t/=d)*t*t*t + b; }, EaseOutStrong: function(t, b, c, d){ //减减速曲线 return -c * ((t=t/d-1)*t*t*t - 1) + b; }, EaseBothStrong: function(t, b, c, d){ //加加速减减速曲线 if ((t/=d/2) < 1) { return c/2*t*t*t*t + b; } return -c/2 * ((t-=2)*t*t*t - 2) + b; }, Elastic:{ In: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入） if (t === 0) { return b; } if ( (t /= d) == 1 ) { return b+c; } if (!p) { p=d*0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p/4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, Out: function(t, b, c, d, a, p){ //正弦增强曲线（弹动渐出） if (t === 0) { return b; } if ( (t /= d) == 1 ) { return b+c; } if (!p) { p=d*0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }, Both: function(t, b, c, d, a, p){ if (t === 0) { return b; } if ( (t /= d/2) == 2 ) { return b+c; } if (!p) { p = d*(0.3*1.5); } if ( !a || a < Math.abs(c) ) { a = c; var s = p/4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } if (t < 1) { return - 0.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; } return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b; } }, Back:{ In: function(t, b, c, d, s){ //回退加速（回退渐入） if (typeof s == 'undefined') { s = 1.70158; } return c*(t/=d)*t*((s+1)*t - s) + b; }, Out: function(t, b, c, d, s){ if (typeof s == 'undefined') { s = 3.70158; //回缩的距离 } return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, Both: function(t, b, c, d, s){ if (typeof s == 'undefined') { s = 1.70158; } if ((t /= d/2 ) < 1) { return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; } return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; } }, Bounce:{ In: function(t, b, c, d){ //弹球减振（弹球渐出） return c - gbEffect.Bounce.Out(d-t, 0, c, d) + b; }, Out: function(t, b, c, d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b; } return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b; }, Both: function(t, b, c, d){ if (t < d/2) { return gbEffect.Bounce.In(t*2, 0, c, d) * 0.5 + b; } return gbEffect.Bounce.Out(t*2-d, 0, c, d) * 0.5 + c*0.5 + b; } } }; var gbEffectAry=["Linear","EaseIn","EaseOut","EaseBoth","EaseInStrong","EaseOutStrong","EaseBothStrong","Elastic-In","Elastic-Out","Elastic-Both","Back-In","Back-Out","Back-Both","Bounce-In","Bounce-Out","Bounce-Both"]; //运动库封装 function animate(opt) { //0 对传入的实参值进行判断； opt=opt || {}; if(!opt.ele) return;//如果传参错误，代码阻断不执行； //1 新建一个对象，里面添加默认样式 var defaultOpt={ duration: 2000, effect: "Linear" }; //2 将传入的实参opt，所有属性赋值给defaultOpt，如果存在，则重新赋值，如果不存在，使用默认值； for(var attr in opt){ defaultOpt[attr]=opt[attr]; } //总结：defaultOpt的作用是设置默认的属性，如果传入的实参里面设置了defaultOpt里面的属性，就重新赋值，如果没有设置，就用默认值； //下面所有代码不再使用opt，而使用defaultOpt; //3 获取defaultOpt里面的参数 var ele=defaultOpt.ele; var target=defaultOpt.target; var duration=defaultOpt.duration; var callback=defaultOpt.callback; var effect=defaultOpt.effect; var tempEffect=null; //4 获取运动形式，计算参数 //4.1 获取运动形式：判断effect的数据类型，满足下面两种情况，就执行各自的代码，如果不满足，就使用默认值； var ary=gbEffectAry; if(typeof effect==="number"){ ary=ary[effect%ary.length].split("-"); tempEffect=ary.length>=2?gbEffect[ary[0]][ary[1]]:gbEffect[ary[0]]; }else if(typeof effect==="object"){ tempEffect=effect.length>=2?gbEffect[effect[0]][effect[1]]:gbEffect[effect[0]]; }else if(typeof effect==="string"){ tempEffect=gbEffect[effect];//此时tempEffect设置一个函数定义地址，不是函数名； } //4.2 计算传入运动形式中的参数 var begin={},change={}; for(var attr in target){ begin[attr]=utils.css(ele,attr); change[attr]=target[attr]-begin[attr]; } var time=0; //5 添加定时器 var timer=setInterval(function () { //5.1 变量累加 time+=30; //5.2 边界值判断 if(time>=duration){ //5.2.1 设置边界值 utils.css(ele,target); //5.2.2 停止定时器 clearInterval(timer); //5.2.3 执行回调函数，进行下一步操作 callback && callback.call(ele);//当callback存在的时候，执行回调函数，改变其中的this指向为元素； //增加接口，用于绑定多个操作，执行函数，如果不绑定就不会执行方法； fire.call(ele,"myAnimate"); //5.2.4 阻断程序执行 return; } //5.3 获取最新位置及设置最新位置 for(var attr in change){ //5.3.1 运动方式获取最新位置； var cur=tempEffect(time,begin[attr],change[attr],duration); //5.3.2 分别设置最新位置 utils.css(ele,attr,cur); } },30) } window.animate=animate;//将私有函数设置为全局变量； })();
3 ajax库的复习及最终版封装
- 依赖的库：不依赖任何库；
- 使用方法：
- 代码：
03myAjax(opt);为全局函数调用； - 参数：对象opt
- data：对象，里面的键值对为搜索参数；
- type：get/post/jsonp；
- get、post用于本地数据获取，不能跨域获取；
- jsonp用于跨域获取，需注意的是在百度服务器中必须设置jsonp参数为cb才能获取数据；
- 代码：
- 代码：
- 执行代码：
封装的ajax - JS库封装代码：
//参数：ajax({url:xxx,data:xxx,type:xxx,dataType:xxx,jsonp:xxx,fnLoading:xxx,complete:xxx,success:xxx,error:xxx,timeout}) //将对象中的属性名和属性值转化为key=val&key=val的形式 function json2url(obj) { //参数：对象，返回值：字符串 //思路：对象-数组-字符串 obj.t=Math.random();//避免缓存 var ary=[]; //遍历对象 for(var attr in obj){ ary.push(attr+"="+obj[attr]); } return ary.join("&"); } function jsonParse(strJson) { return "JSON" in window?JSON.parse(strJson):eval("("+strJson+")"); } function 03myAjax(json) { json=json||{}; //如果json中请求地址url不存在 if(!json.url) return; //参数获取 var url=json.url; //data属性值为一个对象，对象中为参数 var data=json.data||{}; var type=json.type||"get"; var jsonp=json.jsonp||"callback"; var timeout=json.timeout||3000; var timer=null; //四步： //1 创建一个xml对象 //每个类函数都是window的一个属性； if(window.XMLHttpRequest){ var xml=new XMLHttpRequest(); }else{//IE6兼容处理 var xml=new ActiveXObject("Microsoft.XMLHTTP"); } //2 打开地址；3 发送请求 //get请求：参数在地址中，在url?的后面，以键值对的形式连接； //post请求：参数在请求体中，地址url后面不跟参数； switch(type.toLowerCase()){ case "get": xml.open("get",url+"?"+json2url(data),true); xml.send(null); break; case "post": xml.open("post",url,true); xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xml.send(json2url(data)); break; case "jsonp": //新建一个全局函数 var kbfd="jsonp_"+Math.random(); kbfd=kbfd.replace(".","");//函数名中不能存在小数点，所以需要替换 window[kbfd]=function (data) { json.success && json.success(data); //卸磨杀驴，干掉script document.body.removeChild(oS); oS=null; }; data[jsonp]=kbfd; //创建script标签，设置其src，通过script发送请求 var oS=document.createElement("script"); //script中src包含url?参数&cb=kbfd oS.src=url+"?"+json2url(data); //script必须插入到页面的底部 document.body.appendChild(oS); break; } //响应请求之前的准备 json.fnLoading && json.fnLoading(); //4 响应请求 xml.onreadystatechange=function () { if(xml.readyState===4){ //请求成功 json.complete && json.complete(); clearTimeout(timer); //判断后台响应成功还是失败； if(/^2\d{2}$/.test(xml.status)){//响应成功 if(json.dataType==="json"){ json.success && json.success(jsonParse(xml.responseText)); }else{ json.success && json.success(xml.responseText); } }else{//响应失败 json.error && json.error(xml.status); } } }; if(type==="jsonp") return; //5 等待超时 timer=setTimeout(function () { alert("您的网络不行啊"); xml.onreadystatechange=null; },timeout); }
4 拖拽库复习及最终版封装
- 依赖的库：Event事件库
- 使用方法：
- 代码：
var res=new Drag(opt);为实例创建调用； - 参数：对象opt;
- ele:必须穿，为拖拽元素；
- 执行结果：元素纯净版拖拽，无边界值判断，可拖拽到任何地方；
- 代码：
- 扩展功能：
- 预留接口：给实例对象绑定了三个自定义行为：myDragDown myDragMove myDragUp
- 在鼠标按下事件中，添加自定义行为myDragDown
- 在鼠标移动事件中，添加自定义行为myDragMove
- 在鼠标抬起事件中，添加自定义行为myDragUp
- 绑定代码：
res.on("myDragDown",fn1).on("myDragMove",fn2).on("myDragUp",fn3).off("myDragUp",fn3)，链式操作绑定； - 执行结果：绑定的方法函数fn1,fn2等，函数中的this为实例对象，并传入事件对象e;
- 预留接口：给实例对象绑定了三个自定义行为：myDragDown myDragMove myDragUp
- 代码：
- 执行代码：
拖拽Drag库封装验证 111- JS封装代码：
//EventEmitter类：给实例对象的自定义行为绑定多个方法，订阅发布执行 function EventEmitter() {} EventEmitter.prototype.on=function (type,fn) { if(!this[type]){ this[type]=[]; } var a=this[type]; if(a.length){ for(var i=0; i
5 myBind函数封装
- 依赖的库：不依赖任何库
- 使用方法：
- 代码：
fn1.myBind(oDiv,2,3)； - 调用：函数名调用，myBind为函数类原型上的方法，所有函数均能调用；
- 参数：
- 第一个参数：thisArg，必须传，用于改变函数的this指向，不改变赋值null;
- 第二个参数：实参，可传可不传，如果需要实参则传，不需要则不传；
- 默认传入一个事件对象实参；多与事件配合；
- 返回值为一个匿名函数，即函数的预处理；
- 执行结果：改变fn1函数中的this指向为thisArg，给fn1传实参，与事件对象配合默认传入一个事件对象实参；返回一个匿名函数；
- 代码：
- 代码：
- 执行代码：
myBind函数封装验证 1111- JS封装代码：
(function () { Function.prototype.myBind=function (thisArg) { var outArg=[].slice.call(arguments,1); if("bind" in Function.prototype){ return this.bind.apply(this,[thisArg].concat(outArg)); } var _this=this; return function (e) { e=arguments.length===0?window.event:e; //IE浏览器下的兼容处理 e.target=e.srcElement; e.pageX=(document.documentElement.scrollLeft ||document.body.scrollLeft)+e.clientX; e.pageY=(document.documentElement.scrollTop || document.body.scrollTop)+e.clientY; //阻止默认事件 e.preventDefault=function () { e.returnValue=false; }; //阻止冒泡 e.stopPropagation=function () { e.cancelBubble=true; }; return _this.apply(thisArg,outArg.concat(e)); } }; })();