在 Blazor 中使用 JS
Using JS in Blazor
目前，我正在为我们的项目评估 Blazor 的可行性，我想更好地了解 JavaScript 在 Blazor 项目中的作用。
Microsoft documentation 声明如下：
Only mutate the Document Object Model (DOM) with JavaScript (JS) when
the object doesn't interact with Blazor.
如果我理解正确的话，JS 应该只在 Blazor 项目中作为绝对的最后手段使用。
我们经常使用经过精心设计和专业设计的 templates，它们具有大量使用 JS 构建的出色功能。一些示例包括日期选择器、旋转木马、toast 通知等。这种方法不仅为我们节省了大量时间，而且这些模板中的大多数都提供了我们需要的一切，消除了对可能匹配或不匹配的零散组件的需要设计或行为对我们来说是非常重要的用户体验因素。
如果我正确理解了 Microsoft 的声明，我们不应再使用这些模板并尝试找到此类功能的 Blazor 等效项。这是我的正确假设吗？如果是这样，这将是我们使用 Blazor 的一个主要缺点。
P.S。不确定这是否重要，但我们的选择是 Blazor 的 Web Assembly 选项。
Is this a correct assumption on my part?
不，这是您的错误假设...
您可能会使用您拥有的许多模板，但您应该知道如何使用。
主要要理解的是，如果元素的状态已被 JS 代码改变，Blazor 可能会忽略它；也就是说，从 Blazor 的角度来看，一切都没有改变。让我试着给你一个例子来阐明我的意思：
假设您有一个包含用于收集用户姓名和年龄的表单的页面...为此，我将使用一个表单元素，在该元素中嵌入了两个输入类型的文本元素。两个文本元素都绑定到 class 命名用户中定义的属性。通常，我们应用 two-way 数据绑定；即数据流是从变量到元素和从元素到变量：
Public string Name {get; set;}
现在假设您 运行 您的 Blazor 表单页面，您在名称文本框中键入“Steve Sanderson”，然后导航到年龄文本框并输入一个值。现在，在您单击 submit 按钮提交表单数据之前，您单击另一个执行 JS 代码的按钮，该代码执行搜索具有 id="name" 的元素，并在找到时分配值“Blazor”到它的值 属性。现在您可以看到名称文本框的值为“Blazor”而不是“Steve Sanderson”。您现在可以单击“提交”按钮。通常您会期望 Name 属性 包含值“Blazor”，因为这是最后一个值（由 JS 设置）。但是 Blazor 忽略了你的诱惑，名称 属性 实际上包含值“Steve Sanderson”。这是因为 Blazor 处理绑定，它创建一个虚拟 Dom，它有一个复杂的渲染过程等。简而言之，它忽略了从 JS 对元素状态所做的突变。或者换句话说，JS代码所做的更改不参与Blazor所做的绑定过程。
当我开始学习 Blazor 时，我创建了一个轮播，100% Blazor。我这样做是为了学习 Blazor。我检查了 Bootstrap 轮播的代码，并模仿了它的工作方式和外观。通常你可以使用 JS 创建的小部件，并在 Blazor 中实现它。然而，市场上充斥着 Blazor 中的实现。
除了教育目的，我永远不会实现用 JS 创建的小部件，当我可以使用它时 as is. 为什么用 Blazor 创建一个仅用于显示图像的轮播，一个没有交互的小部件与 Blazor。在这种情况下，将其用作 JS 小部件会更明智，更合适。 Blazor 不在乎。但是，如果您需要触发事件、发送数据等的复杂轮播，您可能需要使用 Blazor 来实现它，但更常见的是将 JS Interop 与您的 JS 小部件一起使用，如下所述...
这是一个 link 示例，它使用 JSInterop 解释了 Blazor SPA 上的 映射。这就是你平时的工作方式。
像往常一样，这取决于您知道什么，以及您具体想要做什么。
如果 Javascript 正在更改在 Blazor 标记中定义的对象，特别是如果它曾经在 DOM 树周围移动它们、删除或复制它们，那么您有一个明显的问题——Blazor 将页面模型不正确，结果可能不一致。
然而，可能所有 JS 所做的只是 eye-candy：动画滚动、闪烁图标、在图像列表中旋转等。none 完全有可能与您在 Blazor 中所做的任何事情发生冲突。
如果你有简单的入口点（比如 'toast' 只是一个带有字符串变量输入的 Javascript 函数），那么 JS Interop 将是微不足道的。
如果您有更复杂的东西，例如您想要排序和分页的大量 table 数据，那么除非您确切知道它们是如何工作的，否则您会得到意想不到的结果。
目前，我正在为我们的项目评估 Blazor 的可行性，我想更好地了解 JavaScript 在 Blazor 项目中的作用。
Microsoft documentation 声明如下：
Only mutate the Document Object Model (DOM) with JavaScript (JS) when the object doesn't interact with Blazor.
如果我理解正确的话，JS 应该只在 Blazor 项目中作为绝对的最后手段使用。
我们经常使用经过精心设计和专业设计的 templates，它们具有大量使用 JS 构建的出色功能。一些示例包括日期选择器、旋转木马、toast 通知等。这种方法不仅为我们节省了大量时间，而且这些模板中的大多数都提供了我们需要的一切，消除了对可能匹配或不匹配的零散组件的需要设计或行为对我们来说是非常重要的用户体验因素。
如果我正确理解了 Microsoft 的声明，我们不应再使用这些模板并尝试找到此类功能的 Blazor 等效项。这是我的正确假设吗？如果是这样，这将是我们使用 Blazor 的一个主要缺点。
P.S。不确定这是否重要，但我们的选择是 Blazor 的 Web Assembly 选项。
Is this a correct assumption on my part?
不，这是您的错误假设...
您可能会使用您拥有的许多模板，但您应该知道如何使用。
主要要理解的是，如果元素的状态已被 JS 代码改变，Blazor 可能会忽略它；也就是说，从 Blazor 的角度来看，一切都没有改变。让我试着给你一个例子来阐明我的意思：
假设您有一个包含用于收集用户姓名和年龄的表单的页面...为此，我将使用一个表单元素，在该元素中嵌入了两个输入类型的文本元素。两个文本元素都绑定到 class 命名用户中定义的属性。通常，我们应用 two-way 数据绑定；即数据流是从变量到元素和从元素到变量：
Public string Name {get; set;}
现在假设您 运行 您的 Blazor 表单页面，您在名称文本框中键入“Steve Sanderson”，然后导航到年龄文本框并输入一个值。现在，在您单击 submit 按钮提交表单数据之前，您单击另一个执行 JS 代码的按钮，该代码执行搜索具有 id="name" 的元素，并在找到时分配值“Blazor”到它的值 属性。现在您可以看到名称文本框的值为“Blazor”而不是“Steve Sanderson”。您现在可以单击“提交”按钮。通常您会期望 Name 属性 包含值“Blazor”，因为这是最后一个值（由 JS 设置）。但是 Blazor 忽略了你的诱惑，名称 属性 实际上包含值“Steve Sanderson”。这是因为 Blazor 处理绑定，它创建一个虚拟 Dom，它有一个复杂的渲染过程等。简而言之，它忽略了从 JS 对元素状态所做的突变。或者换句话说，JS代码所做的更改不参与Blazor所做的绑定过程。
当我开始学习 Blazor 时，我创建了一个轮播，100% Blazor。我这样做是为了学习 Blazor。我检查了 Bootstrap 轮播的代码，并模仿了它的工作方式和外观。通常你可以使用 JS 创建的小部件，并在 Blazor 中实现它。然而，市场上充斥着 Blazor 中的实现。
除了教育目的，我永远不会实现用 JS 创建的小部件，当我可以使用它时 as is. 为什么用 Blazor 创建一个仅用于显示图像的轮播，一个没有交互的小部件与 Blazor。在这种情况下，将其用作 JS 小部件会更明智，更合适。 Blazor 不在乎。但是，如果您需要触发事件、发送数据等的复杂轮播，您可能需要使用 Blazor 来实现它，但更常见的是将 JS Interop 与您的 JS 小部件一起使用，如下所述...
这是一个 link 示例，它使用 JSInterop 解释了 Blazor SPA 上的
像往常一样，这取决于您知道什么，以及您具体想要做什么。
如果 Javascript 正在更改在 Blazor 标记中定义的对象，特别是如果它曾经在 DOM 树周围移动它们、删除或复制它们，那么您有一个明显的问题——Blazor 将页面模型不正确，结果可能不一致。
然而，可能所有 JS 所做的只是 eye-candy：动画滚动、闪烁图标、在图像列表中旋转等。none 完全有可能与您在 Blazor 中所做的任何事情发生冲突。
如果你有简单的入口点（比如 'toast' 只是一个带有字符串变量输入的 Javascript 函数），那么 JS Interop 将是微不足道的。
如果您有更复杂的东西，例如您想要排序和分页的大量 table 数据，那么除非您确切知道它们是如何工作的，否则您会得到意想不到的结果。