javascript - 在具有公共(public) 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 或转译或 javascript 代码，使用汇总、webpack 或任何当前的 Js 框架，当你的 javascript 代码隐藏在 cshtml 文件中时，你将很难做到这一点。您的示例很小，但是随着时间的推移，项目的复杂性会增加，并且由于您的 js 已经混合了 Razor 语法，您也可以在那里添加新的要求吗？然后你最终会在 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>
}