红宝书第22章整理——高级技巧（绑定+拖拽）

最新推荐文章于 2024-03-28 07:57:34 发布

原创最新推荐文章于 2024-03-28 07:57:34 发布 · 493 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Java Script 同时被 2 个专栏收录

26 篇文章

订阅专栏

JavaScript语言基础

24 篇文章

订阅专栏

本文介绍了JavaScript中函数绑定的方法及其实现拖拽效果的基本原理。通过bind()函数确保回调函数能在正确的this上下文中执行，并详细讲解了如何利用鼠标事件实现元素的拖拽功能。

本章讲了几个高级函数，还有如何防止篡改，如何实现拖拽等等，在此只讲函数绑定+拖拽

1、函数绑定（bind（））

目的：

创建一个函数，可以在特定的this环境中调用另一个函数。常常与回调函数一起用，将函数作为变量传递，保留代码的执行环境。

如果不绑定函数，看下面代码：

var handler = {
   message:"aaaa",
   handle: function(event){
      alert(this.message);
   }
};

var btn = document.getElementById("button");
btn.onclick = function(){
   handler.handle();
}

运行时不会提示aaaa，而是undefined。因为没有保存handler.handle();的环境，this会指向DOM按键，而不是handler。

我们可以用闭包来解决这个问题。

var handler = {
   message:"aaaa",
   handle: function(event){
      alert(this.message);
   }
};

var btn = document.getElementById("button");
btn.onclick = function(){
  var eve = function(event){   
      handler.handle(event);
   }
}

闭包使用太多不好，所以大多数的库都自己封装好了一个bind函数，接受一个函数和一个环境

function bind(fn, context){
  return function(){
    return  fn.apply(context, arguments);
 }
}

在bind中创建了一个闭包，并使用apply调用传入的函数，并给了context对象和参数。

这样我们就可以直接调用bind函数了

var handler = {
   message:"aaaa",
   handle: function(event){
      alert(this.message);
   }
};

var btn = document.getElementById("button");
btn.onclick = function(){
   bind(handler.handle , handler)
}

2、拖放

在js中，实现鼠标点击按下，拖拽，图片也跟着运动，鼠标抬起。

其实是获取鼠标onmousedown事件，获取鼠标onmousemove，计算鼠标移动的距离，并实时更新图片的位置，设置left与top距离，伪造出图片被拖拽了的现象。

最简单的版本（有bug）：

document.onmousemove = function(event){
   var img = document.getElementById("image");
   img.style.left = event.clientX +"px";
   img.style.top = event.clientY +"px";
 }

百度IFE中有一个任务做了这个，在GitHub中参考