Svelte中chessboard.js加载失败问题及onDrop等事件实现咨询

• 补全依赖：chessboard.js 1.x版本强依赖jQuery，需要在引入chessboard.js之前先引入jQuery资源，缺失依赖会导致内部方法执行报错，棋盘无法正常渲染。
• 确保DOM容器就绪：在组件模板中提前声明棋盘挂载的DOM节点，同时保证初始化逻辑执行时该节点已经完成渲染，推荐将初始化逻辑放在Svelte的onMount生命周期中执行，避免DOM未就绪导致的渲染失败。

参考代码示例：

<svelte:head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.css"/>
  <!-- 必须先引入jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.js" on:load={() => libLoaded = true}></script>
</svelte:head>

<script>
  import { onMount, onDestroy } from 'svelte'
  let libLoaded = false
  let board = null

  function initBoard() {
    // 确认依赖加载完成、挂载容器存在再执行初始化
    if (!libLoaded || !document.getElementById('myBoard')) return
    // 挂载到提前声明的DOM节点上，传入初始配置
    board = ChessBoard('myBoard', {
      position: 'start'
    })
  }

  onMount(() => {
    // 轮询检测依赖加载状态，加载完成后执行初始化
    const checkTimer = setInterval(() => {
      if (libLoaded) {
        initBoard()
        clearInterval(checkTimer)
      }
    }, 50)
    // 组件销毁时清理资源
    return () => {
      clearInterval(checkTimer)
      board?.destroy()
    }
  })
</script>

<!-- 棋盘挂载容器必须设置宽度 -->
<div id="myBoard" style="width: 400px"></div>

直接在棋盘初始化的配置对象中声明onDrop等事件回调即可，回调函数可以直接访问组件内定义的响应式变量和方法，无需额外的this绑定或者特殊处理，是Svelte中对接第三方库事件的最优实现方式。如果回调逻辑复杂，可以单独封装为组件内的方法再赋值给对应的事件配置项。

参考代码示例：

function initBoard() {
  if (!libLoaded || !document.getElementById('myBoard')) return
  const boardConfig = {
    position: 'start',
    // 直接声明onDrop回调
    onDrop: (source, target, piece, newPos, oldPos, orientation) => {
      // 可直接操作组件内的响应式变量
      console.log(`棋子移动：${piece} 从 ${source} 到 ${target}`)
      // 需要阻止本次落子直接返回'snapback'即可
      if (target === 'invalid') return 'snapback'
    },
    // 其他事件同理直接声明即可
    onMoveEnd: () => {
      console.log('当前棋盘FEN：', board.fen())
    }
  }
  board = ChessBoard('myBoard', boardConfig)
}

内容的提问来源于stack exchange，提问作者mr_js