Svelte 中的 JavaScript 逻辑：组件内脚本编写技巧

Svelte 组件内脚本基础

在 Svelte 中，组件内的脚本是核心部分，它用于定义组件的行为、状态以及与 DOM 的交互逻辑。每个 Svelte 组件都可以包含一个 <script> 标签，这个标签内编写的 JavaScript 代码决定了组件如何工作。

变量声明与赋值

在 Svelte 组件的 <script> 标签内，可以像在普通 JavaScript 中一样声明变量。例如，我们创建一个简单的计数器组件：

<script>
    let count = 0;
</script>

<button on:click={() => count++}>
    Click me! {count}
</button>

这里我们声明了一个变量 count 并初始化为 0。然后在按钮的 click 事件处理函数中，每次点击都会使 count 增加 1。

函数定义

组件内的脚本也能定义函数，这些函数可以在组件的其他部分（如模板和事件处理程序）中调用。比如，我们扩展上面的计数器组件，添加一个重置函数：

<script>
    let count = 0;

    function resetCount() {
        count = 0;
    }
</script>

<button on:click={() => count++}>
    Click me! {count}
</button>
<button on:click={resetCount}>
    Reset
</button>

这里定义了 resetCount 函数，它将 count 重置为 0。第二个按钮绑定了这个函数，点击时会执行重置操作。

响应式声明

Svelte 的一个强大特性是响应式声明。当一个变量发生变化时，Svelte 会自动更新依赖于该变量的 DOM 部分。

基本响应式变量

假设我们有一个显示用户姓名的组件，并且提供一个输入框让用户修改姓名：

<script>
    let name = 'John';
</script>

<input type="text" bind:value={name}>
<p>Hello, {name}!</p>

这里 name 是一个响应式变量。当用户在输入框中输入内容时，name 的值会改变，同时 <p> 标签内显示的内容也会自动更新，因为它依赖于 name。

复杂响应式数据结构

Svelte 对复杂数据结构同样支持响应式。例如，我们有一个包含用户信息的对象：

<script>
    let user = {
        name: 'Jane',
        age: 25
    };
</script>

<p>{user.name} is {user.age} years old.</p>

如果我们想更新用户的年龄，可以这样做：

<script>
    let user = {
        name: 'Jane',
        age: 25
    };

    function incrementAge() {
        user.age++;
    }
</script>

<p>{user.name} is {user.age} years old.</p>
<button on:click={incrementAge}>Increment Age</button>

当点击按钮调用 incrementAge 函数时，user.age 增加，相关的 DOM 部分会自动更新。

响应式声明的原理

Svelte 利用 JavaScript 的代理（Proxy）来实现响应式。当一个变量被声明为响应式时，Svelte 会创建一个代理对象来包装这个变量。当变量的值发生变化时，代理对象会通知 Svelte 的响应式系统，从而触发依赖于该变量的 DOM 更新。例如：

<script>
    let num = 10;
    const numProxy = new Proxy({ value: num }, {
        set(target, property, value) {
            target[property] = value;
            // 模拟 Svelte 响应式系统通知更新
            console.log('Value has changed, update DOM');
            return true;
        }
    });

    function updateNum() {
        numProxy.value++;
    }
</script>

<p>The number is {numProxy.value}</p>
<button on:click={updateNum}>Increment</button>

虽然这是一个简化的示例，但它展示了 Svelte 响应式声明背后的基本原理。

条件判断与循环

在 Svelte 组件内的脚本中，条件判断和循环是常用的逻辑控制结构，它们在处理不同情况和重复渲染元素时非常有用。

条件判断

我们可以使用 if 语句来根据条件渲染不同的内容。比如，我们有一个根据用户登录状态显示不同按钮的组件：

<script>
    let isLoggedIn = false;
</script>

{#if isLoggedIn}
    <button>Logout</button>
{:else}
    <button>Login</button>
{/if}

这里通过 if 块判断 isLoggedIn 的值，如果为 true 则显示 “Logout” 按钮，否则显示 “Login” 按钮。

多重条件判断

对于更复杂的条件判断，我们可以使用 else if。假设我们有一个根据用户角色显示不同导航栏的组件：

<script>
    let role = 'guest';
</script>

{#if role === 'admin'}
    <nav>
        <a href="/admin/dashboard">Admin Dashboard</a>
    </nav>
{:else if role === 'user'}
    <nav>
        <a href="/user/profile">User Profile</a>
    </nav>
{:else}
    <nav>
        <a href="/login">Login</a>
    </nav>
{/if}

这里根据 role 的值，分别渲染不同的导航栏内容。

循环

Svelte 支持使用 each 块来循环渲染列表。例如，我们有一个显示用户列表的组件：

<script>
    let users = [
        { name: 'Alice', age: 22 },
        { name: 'Bob', age: 25 }
    ];
</script>

<ul>
    {#each users as user}
        <li>{user.name} is {user.age} years old.</li>
    {/each}
</ul>

这里通过 each 块遍历 users 数组，并为每个用户渲染一个列表项。

循环中的索引

有时候我们需要在循环中获取当前项的索引。可以在 each 块中传入第二个参数来获取索引：

<script>
    let numbers = [1, 2, 3];
</script>

<ul>
    {#each numbers as number, index}
        <li>{index}: {number}</li>
    {/each}
</ul>

这样每个列表项就会显示当前数字的索引和值。

组件间通信

在大型应用中，组件间通信是必不可少的。Svelte 提供了几种方式来实现组件间的通信，而这都与组件内的脚本编写紧密相关。

父组件向子组件传值

父组件可以通过属性（props）向子组件传递数据。首先，我们创建一个子组件 Child.svelte：

<script>
    export let message;
</script>

<p>{message}</p>

这里使用 export let 声明了一个名为 message 的属性。然后在父组件 Parent.svelte 中使用这个子组件并传递数据：

<script>
    import Child from './Child.svelte';
    let parentMessage = 'Hello from parent!';
</script>

<Child message={parentMessage} />

父组件将 parentMessage 的值传递给子组件的 message 属性，子组件就会显示这个值。

子组件向父组件传值

子组件可以通过自定义事件向父组件传递数据。我们修改 Child.svelte 来触发一个自定义事件：

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();

    function sendDataToParent() {
        dispatch('custom-event', { data: 'Hello from child!' });
    }
</script>

<button on:click={sendDataToParent}>Send Data to Parent</button>

这里使用 createEventDispatcher 创建了一个 dispatch 函数，用于触发自定义事件。在 sendDataToParent 函数中，触发了一个名为 custom - event 的自定义事件，并传递了数据。在父组件 Parent.svelte 中监听这个事件：

<script>
    import Child from './Child.svelte';

    function handleChildEvent(event) {
        console.log(event.detail.data);
    }
</script>

<Child on:custom - event={handleChildEvent} />

父组件通过 on:custom - event 监听子组件触发的事件，并在 handleChildEvent 函数中处理接收到的数据。

兄弟组件间通信

兄弟组件间通信可以通过一个共同的父组件作为中间人来实现。假设我们有 Brother1.svelte 和 Brother2.svelte 两个兄弟组件，以及一个父组件 Parent.svelte。 在 Brother1.svelte 中触发一个事件：

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();

    function sendDataToParent() {
        dispatch('brother1 - event', { data: 'Message from Brother1' });
    }
</script>

<button on:click={sendDataToParent}>Send Data to Parent</button>

在 Parent.svelte 中监听这个事件并将数据传递给 Brother2.svelte：

<script>
    import Brother1 from './Brother1.svelte';
    import Brother2 from './Brother2.svelte';
    let dataFromBrother1;

    function handleBrother1Event(event) {
        dataFromBrother1 = event.detail.data;
    }
</script>

<Brother1 on:brother1 - event={handleBrother1Event} />
<Brother2 dataFromBrother1={dataFromBrother1} />

在 Brother2.svelte 中接收并显示数据：

<script>
    export let dataFromBrother1;
</script>

{#if dataFromBrother1}
    <p>Received from Brother1: {dataFromBrother1}</p>
{/if}

这样就实现了兄弟组件间的通信。

生命周期函数

Svelte 组件提供了一些生命周期函数，这些函数在组件的不同阶段被调用，在组件内脚本中合理使用它们可以完成很多重要的操作。

onMount

onMount 函数在组件首次渲染到 DOM 后被调用。例如，我们有一个需要在组件挂载后获取 DOM 元素宽度的组件：

<script>
    import { onMount } from'svelte';
    let width;

    onMount(() => {
        const element = document.querySelector('div');
        if (element) {
            width = element.offsetWidth;
        }
    });
</script>

<div>
    This div has width: {width}
</div>

这里 onMount 回调函数在组件挂载后获取了 <div> 元素的宽度并赋值给 width 变量，然后在模板中显示。

beforeUpdate

beforeUpdate 函数在组件即将更新（例如响应式变量变化导致重新渲染）之前被调用。假设我们有一个计数器组件，在更新前记录当前计数：

<script>
    import { beforeUpdate } from'svelte';
    let count = 0;
    let previousCount;

    beforeUpdate(() => {
        previousCount = count;
    });

    function incrementCount() {
        count++;
    }
</script>

<p>Previous count: {previousCount}</p>
<p>Current count: {count}</p>
<button on:click={incrementCount}>Increment</button>

每次点击按钮使 count 增加时，beforeUpdate 会在更新前记录当前的 count 值到 previousCount。

afterUpdate

afterUpdate 函数在组件更新完成后被调用。例如，我们在组件更新后滚动到页面顶部：

<script>
    import { afterUpdate } from'svelte';

    afterUpdate(() => {
        window.scrollTo(0, 0);
    });
</script>

<!-- 组件内容 -->

这里每次组件更新完成后，都会将页面滚动到顶部。

onDestroy

onDestroy 函数在组件从 DOM 中移除时被调用。比如，我们有一个定时器组件，在组件销毁时清除定时器：

<script>
    import { onDestroy } from'svelte';
    let timer;

    timer = setInterval(() => {
        console.log('Timer is running');
    }, 1000);

    onDestroy(() => {
        clearInterval(timer);
    });
</script>

这样当组件被移除时，定时器会被清除，避免内存泄漏。

存储（Stores）

Svelte 的存储（Stores）是一种方便管理共享状态的机制，在组件内脚本中使用存储可以轻松实现跨组件状态共享。

可读存储（Readable Stores）

我们先创建一个简单的可读存储。首先，创建一个 countStore.js 文件：

import { readable } from'svelte/store';

const countStore = readable(0, set => {
    const interval = setInterval(() => {
        set(prev => prev + 1);
    }, 1000);

    return () => clearInterval(interval);
});

export default countStore;

这里使用 readable 函数创建了一个可读存储，初始值为 0。在创建过程中，启动了一个定时器每秒更新存储的值。返回的函数会在存储不再被使用时清除定时器。在组件中使用这个存储：

<script>
    import countStore from './countStore.js';
    let count;
    countStore.subscribe(value => {
        count = value;
    });
</script>

<p>The count is: {count}</p>

这里通过 subscribe 方法订阅了存储的变化，每当存储的值更新时，count 变量也会更新，从而在模板中显示最新的值。

可写存储（Writable Stores）

可写存储允许我们修改存储的值。创建一个 userStore.js 文件：

import { writable } from'svelte/store';

const userStore = writable({ name: 'John', age: 25 });

export default userStore;

在组件中使用这个可写存储并修改其值：

<script>
    import userStore from './userStore.js';
    let user;
    userStore.subscribe(value => {
        user = value;
    });

    function updateUser() {
        userStore.update(u => {
            u.age++;
            return u;
        });
    }
</script>

<p>{user.name} is {user.age} years old.</p>
<button on:click={updateUser}>Increment Age</button>

这里通过 update 方法修改了存储中的用户年龄，同时订阅会使组件中的 user 变量更新，从而更新模板显示。

派生存储（Derived Stores）

派生存储是基于其他存储创建的存储。假设我们有一个 countStore.js 和一个 doubleCountStore.js，doubleCountStore.js 基于 countStore.js 创建：

import { readable } from'svelte/store';
import countStore from './countStore.js';

const doubleCountStore = readable(0, set => {
    const unsubscribe = countStore.subscribe(count => {
        set(count * 2);
    });

    return () => unsubscribe();
});

export default doubleCountStore;

在组件中使用这个派生存储：

<script>
    import doubleCountStore from './doubleCountStore.js';
    let doubleCount;
    doubleCountStore.subscribe(value => {
        doubleCount = value;
    });
</script>

<p>The double count is: {doubleCount}</p>

这里 doubleCountStore 的值是 countStore 值的两倍，并且会随着 countStore 的变化而自动更新。

错误处理

在 Svelte 组件内脚本编写中，错误处理是确保应用健壮性的重要环节。

捕获同步错误

在组件的脚本中，我们可以使用传统的 try...catch 块来捕获同步错误。例如，我们有一个可能会发生除零错误的函数：

<script>
    function divideNumbers(a, b) {
        try {
            return a / b;
        } catch (error) {
            console.error('Error:', error.message);
            return null;
        }
    }

    let result = divideNumbers(10, 0);
</script>

{#if result === null}
    <p>An error occurred while dividing numbers.</p>
{:else}
    <p>The result of division is: {result}</p>
{/if}

这里 try...catch 块捕获了除零错误，并在 catch 块中进行了处理，返回 null 并在模板中显示错误提示。

捕获异步错误

对于异步操作，我们可以使用 async...await 结合 try...catch 来捕获错误。假设我们有一个异步获取数据的函数：

<script>
    async function fetchData() {
        try {
            const response = await fetch('nonexistent - url');
            const data = await response.json();
            return data;
        } catch (error) {
            console.error('Error:', error.message);
            return null;
        }
    }

    let fetchedData;
    fetchData().then(data => {
        fetchedData = data;
    });
</script>

{#if fetchedData === null}
    <p>An error occurred while fetching data.</p>
{:else}
    <p>Fetched data: {JSON.stringify(fetchedData)}</p>
{/if}

这里在 fetchData 函数中，使用 try...catch 捕获了可能在 fetch 操作和解析 JSON 数据时发生的错误，并进行了相应处理。

全局错误处理

Svelte 还提供了全局错误处理的机制。我们可以在应用的入口文件（通常是 main.js）中设置全局错误处理器：

import { setErrorHandler } from'svelte';

setErrorHandler(error => {
    console.error('Global Error:', error.message);
    // 可以在这里进行更多的全局错误处理逻辑，如报告错误到服务器等
});

这样，无论是在组件内的同步还是异步代码中抛出的未捕获错误，都会被这个全局错误处理器捕获并处理。

性能优化

在 Svelte 组件内脚本编写时，性能优化是一个重要的考量因素，以下是一些优化技巧。

减少不必要的响应式更新

Svelte 的响应式系统非常强大，但如果不注意，可能会导致不必要的更新。例如，我们有一个包含大量数据的数组，并且只想在特定条件下更新其中的一个元素：

<script>
    let largeArray = Array.from({ length: 1000 }, (_, i) => i);

    function updateElement(index, value) {
        // 错误做法，会导致整个数组响应式更新
        // largeArray[index] = value;

        // 正确做法，使用不可变数据更新
        const newArray = [...largeArray];
        newArray[index] = value;
        largeArray = newArray;
    }
</script>

{#each largeArray as item, index}
    <input type="text" value={item} on:input={(e) => updateElement(index, e.target.value)}>
{/each}

这里使用不可变数据更新的方式，只更新数组的一个元素，避免了整个数组的响应式更新，提高了性能。

节流与防抖

对于频繁触发的事件，如 scroll 或 input，可以使用节流（throttle）和防抖（debounce）技术。例如，我们有一个 input 框，当用户输入时触发搜索：

<script>
    import { throttle } from 'lodash';

    let searchTerm = '';

    const debouncedSearch = throttle(() => {
        console.log('Searching for:', searchTerm);
    }, 300);
</script>

<input type="text" bind:value={searchTerm} on:input={debouncedSearch}>

这里使用 lodash 的 throttle 函数，将搜索操作节流，每 300 毫秒执行一次，避免了过于频繁的搜索请求，提高了性能。

懒加载组件

对于一些不常用或较大的组件，可以使用懒加载。在 Svelte 中，可以通过动态导入实现。例如，我们有一个 BigComponent.svelte 组件，在需要时才加载：

<script>
    let showBigComponent = false;
    let BigComponent;

    const loadBigComponent = async () => {
        BigComponent = (await import('./BigComponent.svelte')).default;
        showBigComponent = true;
    };
</script>

<button on:click={loadBigComponent}>Load Big Component</button>

{#if showBigComponent && BigComponent}
    <BigComponent />
{/if}

这样只有在用户点击按钮时，才会加载 BigComponent.svelte 组件，提高了应用的初始加载性能。

通过以上在 Svelte 组件内脚本编写的各种技巧和优化方法，我们可以构建出功能强大、性能优良的前端应用。无论是简单的 UI 组件还是复杂的大型应用，合理运用这些技术都能让开发过程更加高效和顺畅。在实际开发中，需要根据具体的需求和场景，灵活选择和组合这些技巧，以达到最佳的开发效果。