主页 / user-376947

Alex's questions

Martin Hope
Alex
Asked: 2025-03-09 03:50:19 +0800 CST
  • 5

我正在尝试使用 SvelteMap：https://svelte.dev/docs/svelte/svelte-reactivity#SvelteMap

但由于某种原因，它没有反应。

我正在从 .svelte 文件导出它：

export const items = new SvelteMap<number, Item>();

Item是一个对象。

然后在函数内部我改变内容，例如：

const item = items.get(num);
item.someProp = newValue;

地图已更新，但组件中的反应性不起作用。

我也尝试重新分配该功能中的项目

const item = items.get(num);
item.someProp = newValue;
items.set(num, item);

还是不行..

javascript
Martin Hope
Alex
Asked: 2025-03-08 03:18:12 +0800 CST
  • 4

json web token 似乎是保护服务器 api 免受未经授权访问的好方法，但 jwt 需要密钥。通常向服务器发出请求的人是浏览器。浏览器无法存储密钥，因为它会在 HTML 中可见。

因此，剩下的唯一选择是使用用户输入的密码，将其存储在变量中，并将其用作后续请求的密钥。问题是服务器上的密钥必须匹配，所以我必须：

  • 以明文形式存储密码。显然，这不是一个好办法。
  • 将 pw 存储为哈希，并在客户端上对其进行哈希处理，然后将其作为密钥传递以创建令牌。这也不太好，因为现在任何人都知道哈希方法

或者我遗漏了什么？ 有没有更好的方法可以做到这一点？

javascript
Martin Hope
Alex
Asked: 2025-03-08 01:36:37 +0800 CST
  • 5

如何使section下面的元素可滚动并占据其父元素高度的 100％？

*{ margin: 0 }
main{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: black;
}

header, footer{
  flex: 0 0 auto;
  background: red;
}

content{
  flex: 1 1 auto;
  display: flex:
  flex-direction: column;
}

content nav{
  background: green;
  flex: 0 0 auto;
}

content section{
  flex: 1 1 auto;
  background: blue;
  overflow-y: auto;
  max-height: 100%; /* <- problem */
  
  p{
    flex: 0 0 auto;
  }
}

ul{
  flex: 1 1 auto;
  
  li{
     height: 200px;
  }
}
<main>
  <header>header</header>
  <content>
    <nav>nav</nav>
    <section>
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
      <p>after list</p>
    </section>
  </content>
  <footer>footer</footer>
</main>

如果我在其上放置一个固定的像素高度，max-height: 200px它就会按预期工作（它会滚动），但是如何使该高度变量/填充父级的剩余高度？

css
Martin Hope
Alex
Asked: 2025-03-04 01:24:09 +0800 CST
  • 5

我在 Deno 中写入文件时遇到了一些问题

生成的文件被损坏

代码非常简单，它只是从一个文件中读取并写入另一个文件：

  let bytesRead: number | null = -1;
  while(bytesRead !== null){
    const buf = new Uint8Array(5 * 1_000_000);
    bytesRead = await infh.read(buf)
    if(bytesRead !== null){
      await outfh.write(buf);
    }
  }
javascript
Martin Hope
Alex
Asked: 2025-02-25 19:31:40 +0800 CST
  • 5

svelte 4 中的组件：

<script>
  let x = 1
  let y = "less than 10"

  function check(){
    if(x > 10){
      y = "more than 10"
    }
  }

  $: {
    check()
  }
</script>

<div>
not runes
<button onclick={() => x++ }>{x}</button>
{y}
</div>

注意反应语句如何调用检查函数，因此反应语句永远不会被触发，因为“x”没有被直接调用。

但在符文模式下，$effect即使“x”没有直接出现在效果体中，也会触发：

<script>
  let x = $state(1);
  let y = $state("less than 10");

  function check(){
    if(x > 10){
      y = "more than 10"
    }
  }

  $effect(() => {
    check()
  })
</script>
<div>
runes
<button onclick={() => x++ }>{x}</button>
{y}
</div>

我猜这是 svelte 效果从 4 到 5 的工作方式的变化，但我想知道 svelte 如何知道在符文模式下何时运行效果？它会查看函数代码并检查反应变量吗？如果我有一个深层嵌套的函数调用，最深层函数中有一个反应变量，效果是否仍会检测到它？

javascript
Martin Hope
Alex
Asked: 2025-02-15 01:50:24 +0800 CST
  • 5

有没有办法让回调参数有类型，而不是any？

type Listener = {
  callback: (...data: any[]) => void,
  once: boolean;
}

class EventEmitter{

  eventMap: Map<string, Listener[]> = new Map();


  on(event: string, callback: Listener["callback"], once: boolean = false) {
    const listeners = this.eventMap.get(event) ?? [];
    listeners.push({ callback, once });
    this.eventMap.set(event, listeners);
    return this;
  }

  once(event: string, callback: Listener['callback']): this {
    this.on(event, callback, true);
    return this;
  }

  emit(event: string, ...data: any[]) {
    const listeners = this.eventMap.get(event) ?? [];

    for (let i = 0; i < listeners.length; i++) {
      const { callback, once } = listeners[i];

      callback(...data);
      if (once) {
        listeners.splice(i, 1);
        this.eventMap.set(event, listeners);
      }
    }
  }
}

Emit 必须接受任何内容，因为它是入口点。假设我这样调用：

events.emit("x", 1, true); 
events.emit("y", "test");

我想要回调来x查看实际的类型，例如：

events.on("x", (arg1, arg2) => { // <= args should have types number and bool

和

events.on("y", (arg1) => { // <= args should have type string
javascript
Martin Hope
Alex
Asked: 2025-02-13 18:54:53 +0800 CST
  • 7

我有一个应该只允许特定数字的属性：

{
   ...
   x: 1 | -1
}

如何在输入验证模式中定义这一点？

如果输入是 JSON，则很简单：

x: z.union([z.literal(-1), z.literal(1)])

但是如果输入来自搜索查询，那么值就是字符串，所以我需要能够强制转换为数字，但仍然限制为 -1 和 1，以使从模式​​推断的类型与 TypeScript 类型兼容。

typescript
Martin Hope
Alex
Asked: 2025-02-13 00:47:24 +0800 CST
  • 6

我正在尝试使用 Web Workers，我注意到为了提高性能，你可以在postMessage

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

在 Deno 中，可传输对象指的是 ArrayBuffer，但是如何将数组变量转换为 ArrayBuffer 呢？

我的用例是向 Web 工作进程发送大约 10k 个元素的数组，因此如果可能的话我不想复制它。

javascript
Martin Hope
Alex
Asked: 2025-02-11 23:47:25 +0800 CST
  • 5

父组件：

<script>
    import Child from "./Child.svelte"
    import { onMount } from "svelte";
    import apireq from "./api.js";
    
    let items = $state.raw([]);

    let splitItems = $derived(items.splice(0, 5));

    onMount(() => {
        apireq().then(v => items = v)
    })
</script>
<h1>item count in parent {items.length}</h1>
<Child items={splitItems} />

子组件

<script>
  let props = $props();
  let { items} = props;
</script>

item count in child:
<div>{items.length}</div>

api 请求后子组件不会更新..仍然显示 0 计数父级确实更新。

我尝试了和$state。$state.raw但我不希望完全反应，因为它是一个很大的数组，而分配时的反应应该足够了

这在 svelte 4 中曾经非常简单，但在 5 中没有任何效果如预期 :(

javascript
Martin Hope
Alex
Asked: 2025-02-09 08:36:06 +0800 CST
  • 7

如何循环遍历一个非常大的数组，并且仍然能够将元素移动到数组末尾而不中断循环？

在循环中，我正在消耗元素，但其中一些元素依赖于其他元素，而这些元素我最终想要移动。最终所有元素都将被消耗，因此循环不会无限。

我知道简单的方法是只使用辅助数组而不在循环中改变原始数组，但是数据非常大而且速度会非常慢

javascript