Svelte/Sapper实现Handlebars.js with-helper功能的最优方案

嘿，我来帮你捋捋Svelte/Sapper里怎么实现类似Handlebars with 助手的功能～

先给你明确说：Svelte并没有原生提供和Handlebars一模一样的with助手，但咱们有好几种更安全、更符合Svelte风格的替代方案——毕竟JS原生的with语句（Handlebars的with本质基于它）早就因为作用域混乱、容易引发意外bug的问题被诟病了，Svelte的方案反而更清晰可控。

1. 解构赋值（首推！清晰又安全） #

不管是在组件脚本里提前解构，还是在模板中临时解构，都能达到“把对象属性变成局部变量”的效果，完全替代with的作用：

脚本里提前解构 #

<script>
  const user = {
    name: 'Alice',
    contact: {
      email: 'alice@example.com',
      phone: '123-4567'
    }
  };
  // 直接把contact的属性解构出来
  const { email, phone } = user.contact;
</script>

<!-- 模板里直接用变量，不用写user.contact.email啦 -->
<p>Email: {email}</p>
<p>Phone: {phone}</p>

模板中临时解构（适合局部场景） #

如果只是某一小段模板需要用到对象的多个属性，用{#let}语法临时解构更灵活：

<script>
  const order = {
    id: 'ORD-123',
    details: {
      item: 'Wireless Headphones',
      quantity: 2,
      total: 199.98
    }
  };
</script>

{#if order.details}
  {#let { item, quantity, total } = order.details}
    <div class="order-item">
      <p>Item: {item}</p>
      <p>Qty: {quantity}</p>
      <p>Total: ${total}</p>
    </div>
  {/let}
{/if}

2. 用{#each}创建临时上下文（小技巧） #

Svelte的{#each}不仅能遍历数组，还能通过遍历包含单个对象的数组，快速创建一个局部作用域，变相实现with的效果：

<script>
  const product = { name: 'Mechanical Keyboard', price: 129.99 };
</script>

{#each [product] as p}
  <!-- 这里p就是product的局部引用，不用重复写product.xxx -->
  <div class="product-card">
    <h3>{p.name}</h3>
    <p>Price: ${p.price}</p>
  </div>
{/each}

这个方法适合简单场景，缺点是可读性稍弱，别人第一次看可能会疑惑为啥要遍历单元素数组，所以如果是复杂场景还是优先用解构。

3. 自定义组件封装（适合复用场景） #

如果你的项目里很多地方都需要这种“切换上下文”的功能，可以封装一个简单的通用组件，类似Handlebars的with助手：

先写一个With.svelte组件 #

<script>
  // 接收要作为上下文的对象
  export let context;
</script>

<!-- 只有当上下文存在时，才渲染插槽，并把上下文传递给插槽 -->
{#if context}
  <slot {context} />
{/if}

使用这个组件 #

<script>
  import With from './With.svelte';
  const blogPost = {
    title: 'Svelte vs Handlebars: Context Handling',
    author: {
      name: 'Jane Doe',
      bio: 'Frontend dev who loves clean code'
    }
  };
</script>

<With context={blogPost.author}>
  {#snippet slot({ name, bio })}
    <div class="author-bio">
      <h4>Written by {name}</h4>
      <p>{bio}</p>
    </div>
  {/snippet}
</With>

这样封装后，就能像Handlebars的with一样，在插槽里直接使用上下文对象的属性了，还能复用在多个地方。

总的来说，解构赋值是Svelte官方推荐的方式，既清晰又避免了原生with的坑，是实现类似功能的最佳选择。

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