elm - 什么 * 是 * Elm 中的 Browser.Navigation.Key？

Question

我开始使用 Elm 的 Browser.application这很有趣，但(据我所知)从未真正解释过的一件事是 Browser.Navigation.Key类型。
The elm docs说

A navigation Key is needed to create navigation commands that change the URL. That includes pushUrl, replaceUrl, back, and forward.

我认为在这一点上，我认为我几乎可以从 elm 指南中的以下示例中了解如何使用它，但我很好奇，只是在学术上:

这种类型包含什么样的信息？

elm 的导航在内部如何使用这些信息？

Answer 1

我有一段时间没有使用 Elm，但我自己对此很好奇。
乍一看， key 机制解决了此处概述的问题:https://github.com/elm/browser/blob/1.0.2/notes/navigation-in-elements.md ——或者至少与那个争论有关。
直接的结论是，除非您使用 Browser.application 创建您的应用程序，否则他们希望禁止您访问更改 URL 的 API。 ，所以一种方法是需要一个虚拟类型，如 Key作为只有使用 Browser.application 才能获得的输入.但关键还不止于此。
Browser.application ，不像 Browser.document和 Browser.element , 为您提供额外的处理程序:onUrlRequest和 onUrlChange .
那么，当 URL 更改时，它是如何传达给您的应用程序的呢？它是如何实现的？
这里的源代码解释了很多:https://github.com/elm/browser/blob/53e3caa265fd9da3ec9880d47bb95eed6fe24ee6/src/Elm/Kernel/Browser.js#L142
特别是，这是Key 中的内容。不透明类型:

var key = function() { key.__sendToApp(onUrlChange(_Browser_getUrl())); };

当您使用 Browser.application ，初始化代码将 url-change 监听器连接到调用 key() :

_Browser_window.addEventListener('popstate', key);
_Browser_window.addEventListener('hashchange', key);

并且 URL 更改函数也调用 key() :

var _Browser_pushUrl = F2(function(key, url)
{
    return A2(__Task_perform, __Basics_never, __Scheduler_binding(function() {
        history.pushState({}, '', url);
        key();
    }));
});

关键机制是 API 知道将 URL 更改更新路由到何处的简单方法:简单，代码要求您给它 key将调用 app.onUrlChange(...) 的函数在创建它的应用程序上。
这似乎仍然没有完全回答我问题的一个技术部分:为什么你需要将键传递给 Navigation.{go,push,replace}？上面的代码( _Browser_window.addEventListener('popstate', key) )不是已经调用了 key()当 URL 更改时？
原来是 popstate事件仅针对 UI 交互触发，例如单击后退按钮。使用 history.{push,replace}State(..., url) 时不会调用该事件直接这当然是这个库正在做什么: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
换句话说，对于 go， key 机制似乎是作为一种简单的无状态方式存在的。 , pushUrl , replaceUrl函数( https://github.com/elm/browser/blob/53e3caa265fd9da3ec9880d47bb95eed6fe24ee6/src/Elm/Kernel/Browser.js#L190-L212 )有一种方法可以调用当前运行的应用程序的 onUrlChange .否则，API 可能只需要 _Browser_window.addEventListener('popstate', key) 就可以逃脱。线在 Browser.application初始化。但是当 URL 从 Javascript 更改时永远不会发出该事件，因此他们需要一种方法来调用 app.onUrlChange()直接在这些函数内部，也就是 key() .
而且，当然，它还有额外的返回，将 URL API 范围限定为仅使用 Browser.application 创建的应用程序。 .有点乱七八糟的答案，但我没有时间写一个更短的答案。 ;)