svelte动作（Action）

1、use 指令

动作（Action），其本质是元素上的生命周期函数。它们可用于譬如以下几个方面：

• 与第三方库对接
• 延迟加载图片
• 工具提示（tooltips）
• 添加自定义事件处理程序

我们模拟先做一个第三方库，要使第三方库适配 Svelte 的 Action 十分简单，实际上，Action 只是一个普通的函数，它接收一个参数，就是当前元素的 DOM 节点对象。

我们自制的“第三方”库的功能假设是一个让任意元素支持移动的 JS 库，它的框架大概是这样：

movable.js

export function movable(node) {
  // ... 第三方库的代码

  return {
    destroy() {
      // ... destroy 函数会在元素被清除时调用，
      // 我们可以在此做一些清理工作
    }
  }
}

这个函数返回一个包含了 destroy 方法的对象，destroy 函数在元素被移除时自动被调用。

让任意元素支持移动，我们需要监听一些事件：

movable.js

export default function movable(node) {
  let moving = false
  let x, y, left, top
	
  function handleMove(e) {
    if (moving) {
      node.style.left = (e.clientX - x + left) + 'px'
      node.style.top = (e.clientY - y + top) + 'px'
    }
  }
	
  function startMove(e) {
    moving = true
		
    x = e.clientX
    y = e.clientY
    left = parseInt(node.style.left) || 0
    top = parseInt(node.style.top) || 0
  }
	
  function endMove() { moving = false }
	
  window.addEventListener('mousemove', handleMove)
  window.addEventListener('mouseup', endMove)
  node.addEventListener('mousedown', startMove)
	
  return {
    destroy() {