MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Svelte 模块上下文与 Action 的协同应用

2022-03-207.6k 阅读

Svelte 模块上下文

在 Svelte 中，模块上下文提供了一种在组件及其子组件之间共享状态和功能的便捷方式。模块上下文允许你创建一个全局可访问的空间，使得不同组件能够相互通信和共享数据，而无需通过繁琐的 props 传递。

创建模块上下文

Svelte 提供了 setContext 和 getContext 函数来管理模块上下文。setContext 用于在父组件中设置上下文数据，而 getContext 则用于在子组件中获取该上下文数据。

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

  const myContextValue = {
    message: 'Hello from context!',
    someFunction: () => {
      console.log('Function from context');
    }
  };

  setContext('myContextKey', myContextValue);
</script>

{#if false}
  <!-- 此处添加代码以避免空组件警告 -->
  <div></div>
{/if}

在上述代码中，我们使用 setContext 函数，第一个参数 'myContextKey' 是上下文的唯一标识符，第二个参数是要共享的数据对象 myContextValue。

获取模块上下文

子组件可以通过 getContext 函数来获取父组件设置的上下文数据。

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

  const myContext = getContext('myContextKey');
  console.log(myContext.message);
  myContext.someFunction();
</script>

{#if false}
  <!-- 此处添加代码以避免空组件警告 -->
  <div></div>
{/if}

这里，子组件通过 getContext('myContextKey') 获取了父组件设置的上下文数据，并可以访问其中的属性和函数。

Svelte 中的 Action

Svelte 的 Action 是一种为 DOM 元素添加自定义行为的强大方式。Actions 允许你在组件初始化、更新和销毁时执行自定义逻辑，直接操作 DOM 元素。

创建 Action

定义一个 Action 很简单，只需创建一个返回对象的函数，该对象包含 create、update 和 destroy 等钩子函数（这些钩子函数可选，根据需求定义）。

function myAction(node) {
  // create 钩子函数，在元素插入到 DOM 时调用
  const handleClick = () => {
    console.log('Element clicked!');
  };
  node.addEventListener('click', handleClick);

  return {
    // update 钩子函数，在组件更新且 Action 传入的参数变化时调用
    update(newValue) {
      console.log('Action updated with new value:', newValue);
    },
    // destroy 钩子函数，在元素从 DOM 移除时调用
    destroy() {
      node.removeEventListener('click', handleClick);
    }
  };
}

使用 Action

在 Svelte 组件中使用 Action 非常直观，只需在 DOM 元素上通过指令方式调用。

<script>
  import { myAction } from './myAction.js';
</script>

<button use:myAction>Click me</button>

在上述代码中，use:myAction 指令将 myAction 应用到 <button> 元素上，当按钮被点击时，会触发 myAction 中定义的点击事件处理逻辑。

模块上下文与 Action 的协同应用

将模块上下文与 Action 结合使用，可以实现一些非常强大且灵活的功能。例如，我们可以在模块上下文中定义一些通用的行为或数据，然后在 Action 中获取并利用这些上下文信息。

示例场景：动态主题切换

假设我们有一个应用，需要实现动态主题切换功能。我们可以使用模块上下文来存储当前主题信息，然后通过 Action 来应用主题样式到特定的 DOM 元素。

首先，在父组件中设置主题上下文。

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

  const currentTheme = {
    name: 'light',
    styles: {
      backgroundColor: 'white',
      color: 'black'
    }
  };

  setContext('themeContext', currentTheme);
</script>

{#if false}
  <!-- 此处添加代码以避免空组件警告 -->
  <div></div>
{/if}

然后，创建一个 Action 来应用主题样式。

import { getContext } from'svelte';

function applyTheme(node) {
  const theme = getContext('themeContext');
  const styleElement = document.createElement('style');
  styleElement.textContent = `
    ${node.tagName.toLowerCase()} {
      background-color: ${theme.styles.backgroundColor};
      color: ${theme.styles.color};
    }
  `;
  document.head.appendChild(styleElement);

  return {
    destroy() {
      document.head.removeChild(styleElement);
    }
  };
}

最后，在子组件中使用这个 Action。

<script>
  import { applyTheme } from './applyTheme.js';
</script>

<button use:applyTheme>Styled Button</button>

在这个例子中，applyTheme Action 通过 getContext('themeContext') 获取了模块上下文中的主题信息，并根据主题样式为按钮应用了相应的样式。当主题在模块上下文中发生变化时，由于 Action 的 update 钩子函数未定义，我们可以通过重新创建 Action 实例来重新应用样式。例如，我们可以在主题切换时，通过某种方式触发组件的重新渲染，从而重新应用 Action。

示例场景：基于上下文的输入验证

假设我们有一个表单组件，不同的输入字段需要根据模块上下文中定义的验证规则进行验证。

首先，在父组件中设置验证规则上下文。

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

  const validationRules = {
    email: {
      pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
      message: 'Please enter a valid email'
    },
    password: {
      minLength: 8,
      message: 'Password must be at least 8 characters long'
    }
  };

  setContext('validationContext', validationRules);
</script>

{#if false}
  <!-- 此处添加代码以避免空组件警告 -->
  <div></div>
{/if}

然后，创建一个 Action 来进行输入验证。

import { getContext } from'svelte';

function validateInput(node, fieldType) {
  const rules = getContext('validationContext')[fieldType];
  const handleInput = () => {
    const value = node.value;
    if (fieldType === 'email') {
      if (!rules.pattern.test(value)) {
        node.classList.add('error');
        node.setAttribute('aria-invalid', 'true');
        node.setAttribute('title', rules.message);
      } else {
        node.classList.remove('error');
        node.setAttribute('aria-invalid', 'false');
        node.removeAttribute('title');
      }
    } else if (fieldType === 'password') {
      if (value.length < rules.minLength) {
        node.classList.add('error');
        node.setAttribute('aria-invalid', 'true');
        node.setAttribute('title', rules.message);
      } else {
        node.classList.remove('error');
        node.setAttribute('aria-invalid', 'false');
        node.removeAttribute('title');
      }
    }
  };

  node.addEventListener('input', handleInput);

  return {
    destroy() {
      node.removeEventListener('input', handleInput);
    }
  };
}

最后，在子组件中使用这个 Action。

<script>
  import { validateInput } from './validateInput.js';
</script>

<label>Email:
  <input type="email" use:validateInput={'email'}>
</label>
<label>Password:
  <input type="password" use:validateInput={'password'}>
</label>

在这个示例中，validateInput Action 根据传入的 fieldType 从模块上下文中获取相应的验证规则，并在输入字段的 input 事件中进行验证。如果输入不符合规则，会为输入字段添加错误样式和提示信息。

处理上下文变化对 Action 的影响

当模块上下文中的数据发生变化时，Action 可能需要相应地更新其行为。一种常见的做法是在 Action 的 update 钩子函数中处理上下文变化。

示例：动态更新主题 Action

假设主题上下文发生变化，我们希望 applyTheme Action 能够更新应用的主题样式。

import { getContext } from'svelte';

function applyTheme(node) {
  const theme = getContext('themeContext');
  const styleElement = document.createElement('style');
  updateStyle();

  function updateStyle() {
    const newTheme = getContext('themeContext');
    styleElement.textContent = `
      ${node.tagName.toLowerCase()} {
        background-color: ${newTheme.styles.backgroundColor};
        color: ${newTheme.styles.color};
      }
    `;
  }

  document.head.appendChild(styleElement);

  return {
    update() {
      updateStyle();
    },
    destroy() {
      document.head.removeChild(styleElement);
    }
  };
}

在上述代码中，我们在 applyTheme Action 中添加了 update 钩子函数，当主题上下文发生变化时，update 钩子函数会调用 updateStyle 函数，重新应用新的主题样式。

示例：动态更新验证规则 Action

对于 validateInput Action，当验证规则上下文发生变化时，我们也需要更新验证逻辑。

import { getContext } from'svelte';

function validateInput(node, fieldType) {
  let rules = getContext('validationContext')[fieldType];
  const handleInput = () => {
    const value = node.value;
    if (fieldType === 'email') {
      if (!rules.pattern.test(value)) {
        node.classList.add('error');
        node.setAttribute('aria-invalid', 'true');
        node.setAttribute('title', rules.message);
      } else {
        node.classList.remove('error');
        node.setAttribute('aria-invalid', 'false');
        node.removeAttribute('title');
      }
    } else if (fieldType === 'password') {
      if (value.length < rules.minLength) {
        node.classList.add('error');
        node.setAttribute('aria-invalid', 'true');
        node.setAttribute('title', rules.message);
      } else {
        node.classList.remove('error');
        node.setAttribute('aria-invalid', 'false');
        node.removeAttribute('title');
      }
    }
  };

  node.addEventListener('input', handleInput);

  return {
    update(newFieldType) {
      fieldType = newFieldType;
      rules = getContext('validationContext')[fieldType];
    },
    destroy() {
      node.removeEventListener('input', handleInput);
    }
  };
}

在这个例子中，validateInput Action 的 update 钩子函数在验证规则上下文变化时，会更新 fieldType 和对应的 rules，从而确保验证逻辑始终基于最新的规则。

嵌套组件中的上下文与 Action 协同

在嵌套组件结构中，模块上下文和 Action 的协同应用需要特别注意上下文的传递和 Action 的作用范围。

多层嵌套中的上下文传递

假设我们有一个组件树，顶层组件设置了模块上下文，中间层组件可能只是传递上下文，而底层组件使用上下文和 Action。

顶层组件：

<script>
  import { setContext } from'svelte';
  import MiddleComponent from './MiddleComponent.svelte';

  const sharedData = {
    someValue: 42
  };

  setContext('sharedContext', sharedData);
</script>

<MiddleComponent />

中间层组件：

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

<BottomComponent />

底层组件：

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

  const data = getContext('sharedContext');
  console.log('Data from context:', data.someValue);
</script>

{#if false}
  <!-- 此处添加代码以避免空组件警告 -->
  <div></div>
{/if}

在这个组件树中，顶层组件设置的 sharedContext 上下文通过中间层组件传递到底层组件，底层组件可以获取并使用该上下文数据。

嵌套组件中 Action 与上下文的结合

假设底层组件有一个按钮，需要根据模块上下文中的某些条件来改变按钮的行为。

顶层组件：

<script>
  import { setContext } from'svelte';
  import MiddleComponent from './MiddleComponent.svelte';

  const buttonConfig = {
    disabled: false
  };

  setContext('buttonContext', buttonConfig);
</script>

<MiddleComponent />

中间层组件：

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

<BottomComponent />

底层组件：

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

  const config = getContext('buttonContext');

  function myButtonAction(node) {
    if (config.disabled) {
      node.disabled = true;
    }

    return {
      update() {
        if (config.disabled) {
          node.disabled = true;
        } else {
          node.disabled = false;
        }
      }
    };
  }
</script>

<button use:myButtonAction>Click me</button>

在这个例子中，底层组件的 myButtonAction Action 根据模块上下文中的 buttonConfig 来决定按钮是否禁用。并且在上下文数据变化时，update 钩子函数会更新按钮的禁用状态。

优化与注意事项

在使用 Svelte 模块上下文与 Action 的协同应用时，有一些优化和注意事项需要牢记。

性能优化

  1. 减少不必要的更新：在 Action 的 update 钩子函数中，仔细检查上下文数据的变化，避免进行不必要的 DOM 操作。例如，可以使用深度比较工具来判断上下文对象是否真的发生了变化，只有在真正变化时才更新 Action 的行为。
  2. 批量操作：如果 Action 需要进行多次 DOM 操作，尽量将这些操作批量进行，以减少重排和重绘的次数。例如，可以先创建一个文档片段（document.createDocumentFragment），在片段上进行所有操作，然后再将片段插入到 DOM 中。

注意事项

  1. 上下文命名冲突：由于模块上下文是全局共享的，不同部分的代码可能会使用相同的上下文键。为了避免命名冲突，建议使用命名空间或唯一标识符作为上下文键。例如，可以将上下文键命名为 namespace__contextKey。
  2. Action 的作用范围：确保 Action 应用到正确的 DOM 元素上，并且其行为符合预期。特别是在嵌套组件中，要注意 Action 可能会受到父组件上下文的影响，需要仔细设计 Action 的逻辑，以避免意外的行为。
  3. 上下文数据的可变性：如果模块上下文中的数据是可变的，要小心处理数据变化对 Action 和其他依赖该上下文的组件的影响。可以考虑使用不可变数据结构，或者在数据变化时触发组件的强制更新，以确保所有相关部分都能及时反映最新状态。

通过合理地利用 Svelte 的模块上下文与 Action 的协同应用，开发者可以构建出更加灵活、可维护且功能强大的前端应用程序。无论是主题切换、表单验证还是其他复杂的交互逻辑，这种协同方式都能提供有效的解决方案。在实际开发中，根据具体需求精心设计上下文结构和 Action 逻辑，同时注意优化和避免常见问题，将有助于提升应用的性能和用户体验。