第十一周第一天笔记

2018-10-07 本文已影响0人果木山

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为元素；一般不设置实例对象；

代码：

执行代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>事件库最终版封装</title>
     <style>
         body{
             height: 1000px;
         }
         div{
             width: 200px;
             height: 200px;
             background-color: red;
         }
     </style>
 </head>
 <body>
 <div id="div1">111</div>
 <script src="复习JS库/01Event.js"></script>
 <script>
     var oDiv=document.getElementById("div1");
     on(oDiv,"mymeinv",fn1);
     on(oDiv,"mymeinv",fn2);
     on(oDiv,"mymeinv",fn3);
     //off(oDiv,"mymeinv",fn3);
     function fn1(e) {
         console.log(this.innerHTML);
         console.log(e.pageY);
     }
     function fn2() {
         console.log(2);
     }
     function fn3() {
         console.log(3);
     }
     on(oDiv,"click",fn4);
     function fn4(e){
         fire.call(this,"mymeinv",e);
     }
     //processThis函数验证
     function add(e) {
         console.log(this);
         console.log(e.type);
     }
     on(oDiv,"click",processThis(add,oDiv));
 </script>
 </body>
 </html>

事件库终极版封装

 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<b.length; i++){
                 if(b[i]===fn) return;
             }
         }
         b.push(fn);
     }else{//绑定的是系统行为，如click,mousemove等
         //浏览器的兼容
         if(ele.addEventListener){
             ele.addEventListener(type,fn,false);
         }else{//IE浏览器
             if(!ele["on"+type]){
                 ele["on"+type]=[];
                 //将run方法绑定到系统事件池中
                 ele.attachEvent("on"+type,function (e) {
                     run.call(ele,e);//保证run中的this指向为当前元素；在IE浏览器下事件触发，不会给匿名函数传事件对象实参；
                 })
             }
             var a=ele["on"+type];
             //去重处理，避免重复绑定
             if(a.length){
                 for(var i=0; i<a.length; i++){
                     if(a[i]===fn) return;
                 }
             }
             a.push(fn);
         }
     }
 }
 //fire函数相当于一个接口，在某个位置执行on绑定的type行为上的所有方法；
 function fire(type,e) {
     //fire中的this可以指元素，也可以指实例对象，与on中相对应；
     var b=this[type] || [];
     if(b.length){
         for(var i=0; i<b.length; i++){
             if(typeof b[i]==="function"){
                 b[i].call(this,e);//保证函数执行时，里面的this为当前this，即为元素，并传入实参e;
             }else{
                 b.splice(i,1);
                 i--;
             }
         }
     }
 }
 function run(e) {
     e= e || window.event;
     //e的兼容处理
     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;
     };
     //遍历run执行函数，保证函数中的this为当前元素，而且给其传实参e
     var a=this["on"+e.type];//this为当前元素
     if(a.length){
         for(var i=0; i<a.length; i++){
             if(typeof a[i]==="function"){
                 a[i].call(this,e);
             }else{
                 a.splice(i,1);
                 i--;//防止数组塌陷
             }
         }
     }
 }
 function off(ele,type,fn) {
     if(/^my/gi.test(type)){
         var b=ele[type];
         if(b.length){
             for(var i=0; i<b.length; i++){
                 if(b[i]===fn){
                     b[i]=null;
                     break;
                 }
             }
         }
     }else{
         if(ele.removeEventListener){
             ele.removeEventListener(type,fn,false);
         }else{
             var a=ele["on"+type];
             if(a.length){
                 for(var i=0; i<a.length; i++){
                     if(a[i]===fn){
                         a[i]=null;
                         break;//性能优化；
                     }
                 }
             }
         }
     }
 }
 //改变函数的this执行
 function processThis(fn,thisArg) {
     return function (e) {
         fn.call(thisArg,e);
     }
 }

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接口执行)；

代码：

执行代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>运动库验证</title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         #div1{
             width: 80px;
             height: 80px;
             background-color: red;
             line-height: 80px;
             text-align: center;
             position: absolute;
             top: 10px;
             left:200px;
             opacity: 0.1;
             filter: alpha(opacity=10);
         }
         #div2{
             width: 1px;
             height: 500px;
             margin-top: 10px;
             background-color: blue;
             position: absolute;
             top: 10px;
             left: 1100px;
         }
     </style>
 </head>
 <body>
 <div id="div1">物体</div>
 <div id="div2"></div>
 <script src="复习JS库/00utils.js"></script>
 <script src="复习JS库/01Event.js"></script>
 <script src="复习JS库/02Animate.js"></script>
 <script>
     var oDiv1=document.getElementById("div1");
     function fn1(){
         //此时函数中的this为元素；
         console.log(this.innerHTML);
         this.style.border="5px solid pink";
         this.innerHTML="我成功了，祝贺我吧！";
         this.style.fontSize="10px";
         this.style.lineHeight="10px";
     }
     //绑定myAnimate行为，执行方法
     on(oDiv1,"myAnimate",fn1);
     animate({
         ele:oDiv1,
         target:{
             left:1000,
             top:400,
             opacity: 0.8
         },
         effect:6,
         duration: 2000
         //此时callback可以不用，可以用预留的接口，然后进行绑定执行；
         /*callback:function () {
             //默认情况下回调函数执行时，this指向window;
             //在调用时，用call改变this指向为ele；
             this.style.backgroundColor="yellow";
         }*/
     })
 </script>
 </body>
 </html>

封装代码：

 (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才能获取数据；

代码：

执行代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>封装的ajax</title>
 </head>
 <body>
 <script src="JS库终极版/03myAjax.jsjs"></script>
 <script>
     03myAjax({
         url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
         data:{wd:"zhouxingchi"},
         type:"jsonp",
         dataType:"json",
         jsonp:"cb",//此处必须设置jsonp为cb，才能使用
         success:function (data) {
             console.log(data);
         }
     });
 </script>
 </body>
 </html>

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;

代码：

执行代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>拖拽Drag库封装验证</title>
     <style>
         div{
             width: 200px;
             height: 200px;
             background-color: red;
             position: absolute;
             left: 0;
             top: 0;
         }
     </style>
 </head>
 <body>
 <div id="div">111</div>
 <script src="JS库终极版/01Event.js"></script>
 <script src="JS库终极版/04Drag.js"></script>
 <script>
     var oDiv=document.getElementById("div");
     var res=new Drag({
         ele:oDiv
     });
     res.on("myDragDown",fn1).on("myDragMove",fn2).on("myDragUp",fn3).off("myDragUp",fn3);//链式操作
     function fn1() {
         console.log(this);//this为实例
         console.log(1)
     }
     function fn2() {
         console.log(2)
     }
     function fn3() {
         console.log(3)
     }
 </script>
 </body>
 </html>

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<a.length; i++){
             if(a[i]===fn) return;
         }
     }
     a.push(fn);
     return this;//进行链式操作
 };
 EventEmitter.prototype.fire=function(type,e){
     //保证fire函数执行时，里面的this为实例对象；
     var a=this[type] || [];
     if(a.length){
         for(var i=0; i<a.length; i++){
             if(typeof a[i]==="function"){
                 a[i].call(this,e);//保证函数执行时，里面的this为实例对象，并传事件对象实参；
             }else{
                 a.splice(i,1);
                 i--;
             }
         }
     }
 };
 EventEmitter.prototype.off=function (type,fn) {
     var a=this[type];
     if(a.length){
         for(var i=0; i<a.length; i++){
             if(a[i]===fn){
                 a[i]=null;
                 break;
             }
         }
     }
 };
 //Drag类：拖拽
 function Drag(opt) {
     opt=opt||{};
     if(!opt.ele) return;
     this.ele=opt.ele;
     this.disX=null;
     this.disY=null;
     this.DOWN=null;
     this.MOVE=null;
     this.UP=null;
     this.init();
 }
 //原型链继承
 Drag.prototype=new EventEmitter();
 //原型链继承后，原型上没有自己类的constructor属性，需要重新设置
 Drag.prototype.constructor=Drag;
 //原型上公共方法
 Drag.prototype.init=function () {
     //绑定down事件；
     this.DOWN=processThis(this.down,this);
     on(this.ele,"mousedown",this.DOWN);
 };
 Drag.prototype.down=function (e) {
     //获取鼠标相对于元素的位置disX,disY
     this.disX=e.clientX-this.ele.offsetLeft;
     this.disY=e.clientY-this.ele.offsetTop;
     //绑定move,up事件
     this.MOVE=processThis(this.move,this);
     this.UP=processThis(this.up,this);
     if(this.ele.setCapture){//IE浏览器
         this.ele.setCapture();//焦点捕获
         on(this.ele,"mousemove",this.MOVE);
         on(this.ele,"mouseup",this.UP);
     }else{//标准浏览器
         //将事件绑定到document上，阻止默认事件发生；
         on(document,"mousemove",this.MOVE);
         on(document,"mouseup",this.UP);
         e.preventDefault();
     }
     this.fire("myDragDown",e);//添加接口，实例对象调用fire公共方法，自定义行为是myDragDown
 };
 Drag.prototype.move=function (e) {
     //获取新位置，无边界值判断
     var l=e.clientX-this.disX;
     var t=e.clientY-this.disY;
     //设置新位置
     this.ele.style.left=l+"px";
     this.ele.style.top=t+"px";
     this.fire("myDragMove",e);//添加接口，实例对象调用fire公共方法，自定义行为是myDragMove
 };
 Drag.prototype.up=function (e) {
     if(this.ele.releaseCapture){
         this.ele.releaseCapture();//释放焦点捕获；
         off(this.ele,"mousemove",this.MOVE);
         off(this.ele,"mouseup",this.UP);
     }else{
         off(document,"mousemove",this.MOVE);
         off(document,"mouseup",this.UP);
     }
     this.fire("myDragUp",e);//添加接口，实例对象调用fire公共方法，自定义行为是myDragUp
 };

5 myBind函数封装

依赖的库：不依赖任何库
使用方法：
- 代码：fn1.myBind(oDiv,2,3)；
- 调用：函数名调用，myBind为函数类原型上的方法，所有函数均能调用；
- 参数：
  - 第一个参数：thisArg，必须传，用于改变函数的this指向，不改变赋值null;
  - 第二个参数：实参，可传可不传，如果需要实参则传，不需要则不传；
  - 默认传入一个事件对象实参；多与事件配合；
- 返回值为一个匿名函数，即函数的预处理；
- 执行结果：改变fn1函数中的this指向为thisArg，给fn1传实参，与事件对象配合默认传入一个事件对象实参；返回一个匿名函数；

代码：

执行代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>myBind函数封装验证</title>
     <style>
         div{
             width: 200px;
             height: 200px;
             background-color: red;
         }
     </style>
 </head>
 <body>
 <div id="div1">1111</div>
 <script src="JS库终极版/05myBind.js"></script>
 <script>
     var oDiv=document.getElementById("div1");
     function fn1(n,m,e){
         console.log(this.innerHTML);
         console.log(n+m);
         console.log(e.pageX);
     }
     oDiv.onclick=fn1.myBind(oDiv,2,3);
 </script>
 </body>
 </html>

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));
         }
     };
 })();

第十一周第一天笔记

1 事件库的复习及最终版封装

2 运动库的复习及最终版封装

3 ajax库的复习及最终版封装

4 拖拽库复习及最终版封装

5 myBind函数封装

猜你喜欢

热点阅读