Svelte 中 Action 的基础概念与 DOM 操作
Svelte 中 Action 的基础概念
在 Svelte 的世界里，Action（动作）是一种非常强大且独特的特性。它提供了一种直接与 DOM 元素进行交互的方式，让开发者能够以一种声明式的风格为 DOM 元素添加自定义行为。
从本质上讲，Action 是一个函数，这个函数接收一个 DOM 元素作为参数，并且可以选择性地接收一个可选参数。当一个 Action 被应用到一个 DOM 元素上时，Svelte 会在元素被插入到 DOM 中时调用这个 Action 函数，并将该 DOM 元素作为第一个参数传递进去。如果 Action 定义时接受额外参数，开发者也可以在使用 Action 时传递这些参数。
Action 的作用
- 增强 DOM 元素功能：通过 Action，我们可以为 DOM 元素添加原本没有的交互或行为。比如，为一个按钮添加点击防抖功能，为输入框添加自动聚焦功能等。
- 封装可复用逻辑：将与 DOM 操作相关的逻辑封装成 Action，可以在多个组件中复用。这样不仅提高了代码的可维护性，也遵循了 DRY（Don't Repeat Yourself）原则。
- 分离关注点：在 Svelte 组件中，通常数据逻辑和 DOM 操作是分开处理的。Action 使得 DOM 相关的操作可以独立于组件的主要逻辑，保持组件代码的清晰和简洁。
Svelte 中 Action 的创建与使用
创建简单 Action
下面我们通过一个简单的示例来创建和使用 Action。假设我们要创建一个 Action 来为按钮添加点击防抖功能。防抖意味着在一定时间内，如果按钮被多次点击，只有最后一次点击会触发实际的操作。
<script>
function debounceClick(node, delay) {
let timer;
const handleClick = () => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
console.log('Button clicked after debounce');
}, delay);
};
node.addEventListener('click', handleClick);
return {
destroy() {
node.removeEventListener('click', handleClick);
}
};
}
</script>
<button use:debounceClick={300}>Click me</button>
在上述代码中，我们定义了一个 debounceClick Action。它接收两个参数，node 即 DOM 元素，delay 是防抖的时间间隔。在函数内部，我们使用 setTimeout 来实现防抖逻辑。同时，为了防止内存泄漏，我们返回一个对象，对象中有一个 destroy 方法，在组件销毁时会调用这个方法，移除事件监听器。
使用 Action 进行 DOM 样式操作
Action 也常用于对 DOM 元素的样式进行操作。比如，我们可以创建一个 Action 来根据元素的宽度自动调整字体大小。
<script>
function autoFontSize(node) {
const updateFontSize = () => {
const width = node.offsetWidth;
node.style.fontSize = `${width * 0.05}px`;
};
updateFontSize();
window.addEventListener('resize', updateFontSize);
return {
destroy() {
window.removeEventListener('resize', updateFontSize);
}
};
}
</script>
<p use:autoFontSize>
This text will have its font size adjusted based on the width of the paragraph.
</p>
在这个例子中，autoFontSize Action 首先在元素插入 DOM 时计算并设置字体大小。然后，通过监听 resize 事件，在窗口大小改变时更新字体大小。同样，为了清理事件监听器，我们在返回的对象中提供了 destroy 方法。
Action 与组件生命周期的关系
插入阶段
当一个组件中的 DOM 元素被插入到页面的 DOM 中时，与之关联的 Action 函数会被调用。这意味着 Action 可以在元素刚进入页面时就对其进行初始化操作，比如设置初始样式、绑定事件等。
更新阶段
Svelte 的响应式系统会在组件数据发生变化时更新 DOM。然而，Action 本身并不会因为组件数据的常规变化而重新调用。只有当 Action 所依赖的特定数据作为参数传递给 Action 且发生变化时，才会触发一些自定义的更新逻辑。例如，如果我们有一个 Action 接收一个颜色参数来设置元素的背景色，当这个颜色参数变化时，我们可以在 Action 中添加逻辑来更新背景色。
<script>
function changeBackgroundColor(node, color) {
node.style.backgroundColor = color;
return {
update(newColor) {
node.style.backgroundColor = newColor;
}
};
}
let bgColor = 'lightblue';
</script>
<button use:changeBackgroundColor={bgColor} on:click={() => bgColor = bgColor === 'lightblue'? 'lightgreen' : 'lightblue'}>
Change background color
</button>
在上述代码中，changeBackgroundColor Action 接收一个颜色参数 color 并设置元素的背景色。通过返回的 update 方法，当 bgColor 数据发生变化时，背景色会相应更新。
销毁阶段
当组件从 DOM 中移除时，Action 返回的对象中的 destroy 方法会被调用。这是清理资源的好时机，比如移除事件监听器，取消定时器等，以避免内存泄漏。前面的防抖和自动调整字体大小的例子中，我们都利用了 destroy 方法来移除事件监听器。
Action 的参数传递与动态更新
静态参数传递
在前面的例子中，我们已经看到了如何向 Action 传递静态参数。比如在 debounceClick Action 中，我们传递了一个固定的 delay 参数。这种方式适用于参数值在组件初始化后不会改变的情况。
<script>
function fadeIn(node, duration) {
node.style.opacity = 0;
const fade = () => {
const start = performance.now();
const step = (timestamp) => {
const elapsed = timestamp - start;
const progress = Math.min(elapsed / duration, 1);
node.style.opacity = progress;
if (progress < 1) {
requestAnimationFrame(step);
}
};
requestAnimationFrame(step);
};
fade();
return {
destroy() {
// 这里没有需要清理的资源
}
};
}
</script>
<div use:fadeIn={1000}>This div will fade in over 1 second</div>
在 fadeIn Action 中，duration 参数决定了淡入效果的持续时间，它在组件渲染时就固定下来了。
动态参数传递与更新
有时候，我们需要根据组件状态的变化动态更新 Action 的参数。Svelte 提供了一种优雅的方式来处理这种情况。
<script>
function highlight(node, color) {
node.style.outline = `2px solid ${color}`;
return {
update(newColor) {
node.style.outline = `2px solid ${newColor}`;
}
};
}
let highlightColor = 'blue';
</script>
<input type="text" bind:value={highlightColor} />
<button use:highlight={highlightColor}>Highlight me</button>
在这个例子中，highlight Action 接收一个 color 参数来设置按钮的外边框颜色。通过双向绑定，highlightColor 的值可以随着输入框的内容变化而变化。当 highlightColor 变化时，highlight Action 的 update 方法会被调用，从而更新按钮的外边框颜色。
Action 的复用与模块化
跨组件复用 Action
由于 Action 本质上是一个函数，它非常适合在多个组件之间复用。我们可以将常用的 Action 定义在单独的文件中，然后在不同的组件中导入使用。
假设我们有一个 actions.js 文件，定义了一个 focusOnMount Action 来使输入框在组件挂载时自动聚焦。
// actions.js
export function focusOnMount(node) {
node.focus();
return {
destroy() {
// 这里没有需要清理的资源
}
};
}
然后在组件中使用这个 Action：
<script>
import { focusOnMount } from './actions.js';
</script>
<input type="text" use:focusOnMount />
这样，我们就可以在多个组件中轻松复用 focusOnMount Action，而无需在每个组件中重复编写聚焦逻辑。
模块化 Action 逻辑
对于复杂的 Action，将其逻辑进行模块化可以提高代码的可读性和可维护性。比如，我们可以将防抖逻辑封装成一个单独的函数，然后在 debounceClick Action 中调用它。
// debounce.js
function debounce(func, delay) {
let timer;
return function() {
const context = this;
const args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
export { debounce };
然后在 debounceClick Action 中使用这个 debounce 函数：
<script>
import { debounce } from './debounce.js';
function debounceClick(node, delay) {
const handleClick = () => {
console.log('Button clicked after debounce');
};
const debouncedClick = debounce(handleClick, delay);
node.addEventListener('click', debouncedClick);
return {
destroy() {
node.removeEventListener('click', debouncedClick);
}
};
}
</script>
<button use:debounceClick={300}>Click me</button>
通过这种方式，我们将防抖的核心逻辑分离出来，使得 debounceClick Action 的代码更加简洁，同时也便于对防抖逻辑进行复用和维护。
高级 Action 技巧
Action 链式调用
在 Svelte 中，一个 DOM 元素可以应用多个 Action，并且这些 Action 会按照它们在元素上声明的顺序依次执行。这就形成了 Action 的链式调用。
<script>
function addBorder(node) {
node.style.border = '1px solid black';
return {
destroy() {
node.style.border = 'none';
}
};
}
function addPadding(node) {
node.style.padding = '10px';
return {
destroy() {
node.style.padding = '0';
}
};
}
</script>
<button use:addBorder use:addPadding>Styled Button</button>
在这个例子中，addBorder Action 先为按钮添加边框，然后 addPadding Action 为按钮添加内边距。当组件销毁时，两个 Action 的 destroy 方法也会按照相反的顺序依次执行，先移除内边距，再移除边框。
Action 与动画
Action 与 Svelte 的动画系统可以很好地结合。我们可以利用 Action 来触发动画，或者根据 DOM 元素的状态来控制动画的播放。
<script>
import { fade } from'svelte/animate';
function triggerFade(node) {
const handleClick = () => {
fade(node, {
duration: 500,
easing: 'cubic-bezier(0.1, 0.7, 1.0, 0.1)'
});
};
node.addEventListener('click', handleClick);
return {
destroy() {
node.removeEventListener('click', handleClick);
}
};
}
</script>
<button use:triggerFade>Fade on click</button>
在上述代码中，triggerFade Action 为按钮添加了点击事件监听器。当按钮被点击时，会触发 fade 动画，使按钮淡入或淡出。这种结合方式为创建交互性强的动画效果提供了很大的灵活性。
Action 与第三方库
Action 还可以与第三方库进行集成，以扩展 Svelte 应用的功能。例如，我们可以使用 tinymce 富文本编辑器库，通过 Action 将其集成到 Svelte 组件中。
<script>
import tinymce from 'tinymce/tinymce';
function initTinyMCE(node) {
tinymce.init({
selector: node,
plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
return {
destroy() {
tinymce.remove(node);
}
};
}
</script>
<textarea use:initTinyMCE></textarea>
在这个例子中，initTinyMCE Action 使用 tinymce.init 方法将 <textarea> 元素初始化为富文本编辑器。当组件销毁时，通过 tinymce.remove 方法移除编辑器实例，避免内存泄漏。通过这种方式，我们可以借助第三方库的强大功能，同时保持 Svelte 组件的声明式风格。
总结 Action 在 Svelte 开发中的重要性
Action 作为 Svelte 框架的重要特性之一，为开发者提供了一种简洁而强大的方式来操作 DOM 元素。通过 Action，我们可以实现各种复杂的交互效果、复用 DOM 操作逻辑、分离组件的关注点。从简单的按钮防抖到复杂的第三方库集成，Action 在不同场景下都发挥着关键作用。
在实际开发中，合理运用 Action 可以显著提升代码的质量和开发效率。通过将 DOM 相关的逻辑封装成 Action，我们可以使组件的代码更加清晰，易于维护和扩展。同时，Action 的复用性也使得我们可以在不同的组件中快速应用相同的 DOM 行为，避免重复代码。
在与 Svelte 的其他特性如响应式系统、组件生命周期等结合使用时，Action 展现出了更高的灵活性和强大功能。无论是在小型项目还是大型应用中，掌握 Action 的使用方法都是 Svelte 开发者必备的技能之一。
希望通过本文的介绍和示例，读者能够深入理解 Svelte 中 Action 的基础概念与 DOM 操作技巧，并在自己的项目中充分发挥 Action 的优势，打造出更加优秀的前端应用。