在具有常见js文件的不同cshtml文件中定义javascript变量的正确方法是什么？

Question

有一个cshtml文件，我们将模型值存储在这样的javascript变量中。

@model sampleVM;
<script>
var x = "@Model.x";
var y = "@Model.y";
</script>
<script src="sample.js"></script>

在sample.js和document.ready中，代码如下所示。

docready
{
var z = 5;
alert(x+y+z);
}

它是否会影响脚本解析时间，因为我们已经在上面的多个cshtml文件中定义了变量？ 有没有更好的方法呢？

Answer 1

“更好的方式”并不是真正的客观，但这是我的看法：我完全摆脱了cshtml中的内联脚本。 为什么？ 如果你想解析，lint或者transile或javascript代码，使用汇总，webpack或当前的Js框架，那么当你的javascript代码隐藏在cshtml文件中时，你将很难做到这一点。 您的示例相当小，但项目随着时间的推移变得越来越复杂，因为您的js已经混合了剃刀语法，您还可以在那里添加新的需求吗？ 然后你最终会在js和cshtml文件中的整个项目中分散javascript代码。 所以：对我来说这是一种代码味道。

我要做的是以下内容：在标记中使用您的模型：

<input type="hidden" name="xValue" id="xValue" value="@Model.x" />
<input type="hidden" name="yValue" id="yValue" value="@Model.y" />

并从您的sample.js文件中调用它：

$('document').ready(function(){
   var x = $('#xValue').val();
   var y = $('#yValue').val();
   //... do stuff with it
});

然后，您的cshtml文件将简单地引用该文件：

@section scripts {
    <script src="~/sample.js"></script>
}

Answer 2

您可以将x，y设置为窗口变量，您可以在sample.js文件中使用

@model sampleVM;
<script>
window.x = "@Model.x";
window.y = "@Model.y";
</script>