javascript - 请建议一种服务于包含服务器端代码的 JavaScript 的策略

Question

我认为这是一个常见的场景——我有一个 View ，我在其中使用 HtmlHelper 来生成一些 HTML 元素，我还有一个辅助扩展，可以让我获取生成的元素的 ID，以便我可以在 JavaScript 中使用它(例如, jQuery):

$('#@Html.FieldIdFor(model => model.Name)').autocomplete({

或者在执行 Ajax 时，我从 UrlHelper 构建 URL 字符串，再次使用服务器端代码将一些客户端内容放在页面上:

$.get('@Url.Action("States", "Location")', { country: $(this).val() }, function (json) {

那部分很简单。我知道如何做到这一点，我知道我可以将这段代码放在局部 View 中，并在我希望代码显示的位置呈现局部 View 。这不是我想问的。

页面标记中包含的代码未被缓存，这是一回事。另一件事是，有时我需要在多个 View 上使用相同的代码，我想将它放在一个地方进行维护。单个位置可能是局部 View - 但我希望缓存此代码，理想情况下它会放在 .js 文件中。但是我们不能在 .js 文件中使用服务器端代码。关键字是可缓存和单个文件。

我也知道我可以有一个 JSController 来服务于 JavaScript，例如:

<script src="@Url.Action("Script", "JS", { script = "location" })
        type="text/javascript"></script>

此 Controller 操作可以作为 View 呈现的结果返回 JavaScript。

或者也许我应该停止偏执，只使用普通的 .js 文件并将元素 ID 和 URL 放在那里，如果我更新我的 View 模型或 View ，我会去更新 .js 文件。我想知道这是否是 .NET 的过度工程问题 - 我很想知道人们如何在 Rails 或 Django 中做到这一点。

所以我真正需要的是一些“最佳实践”策略。你最常做什么？你是如何解决这个问题的？

Answer 1

警告:我对 ASP.Net 的处理不多。但这个问题不是 ASP.Net 特有的，对于同时具有服务器端和客户端代码的所有应用程序来说都是同样的事情。

我可能会让主 JavaScript 文件使用 ID 等它从变量中获取，并让您的每个 View /每个页面代码为其生成变量。例如:

<script type='text/javascript'>
    if (!window.Stuff) {
        window.Stuff = {};
    }
    window.Stuff.MODEL_FIELD_SELECTOR = '#@Html.FieldIdFor(model => model.Name)';
</script>
<script type='text/javascript' src='commonstuff.js'></script>

在你的 commonstuff.js 中:

$(Stuff.MODEL_FIELD_SELECTOR).autocomplete({...
// (Or `window.Stuff.MODEL_FIELD_SELECTOR`, but unless you redefine `Stuff`
// locally, there's no need to prefix it.)

请注意，我只使用一个全局符号 Stuff 来包含这些内容，因此您不会不必要地污染全局命名空间。

这里的想法是将代码放在一个可缓存的、集中的、可重用的地方；但是，只使用动态生成的代码来设置您需要使用的事物的 ID。

---

更新:如果您有多个(或什至很多)这样的符号，我希望您可能会有，并且您使用的是您知道的符号您是 一个定义，你可以使用对象文字符号来使事情更紧凑:

<script type='text/javascript'>
    window.Stuff = {
        MODEL_FIELD_SELECTOR:  '#@Html.FieldIdFor(model => model.Name)',
        SOME_OTHER_SELECTOR:   '#@SomeOtherThing',
        SOMETHING_ELSE:        '#@SomethingElse',
        // ...
        LAST_ONE:              '#@TheLastOne'
        //                                   ^
        // Important: No trailing comma here |
    };
</script>
<script type='text/javascript' src='commonstuff.js'></script>

注意最后一点； IE7 和更早版本的对象字面量 (more) 尾随逗号会阻塞。