请建议一个服务包含服务器端代码的JavaScript的策略

Question

我认为这是一个常见的场景 - 我有一个视图,我使用HtmlHelper生成一些HTML元素,我还有一个帮助扩展,让我获得生成的元素的ID,以便我可以在JavaScript中使用它(例如,jQuery) :

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

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

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

那部分很容易.我知道如何做到这一点,我知道我可以将此代码部分放在部分视图中,并在部分视图中显示我希望代码显示的位置.这不是我想问的问题.

页面标记中包含的代码不会被缓存,这是一回事.另一件事是,有时我需要在几个视图上使用相同的代码,我想将它保存在一个地方进行维护.单个地方可能是部分视图 - 但我想要缓存此代码,理想情况下它将落在.js文件中.但是我们不能在.js文件中使用服务器端代码.关键字是缓存和单个文件.

我也知道我可以有一个JSController来提供JavaScript,例如:

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

此控制器操作可以作为视图呈现的结果返回JavaScript.

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

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

Answer 1

警告：我对 ASP.Net 的了解不多。但问题并不是 ASP.Net 特有的，对于所有同时具有服务器端和客户端代码的应用程序来说都是同样的问题。

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

<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 和更早版本的对象文字末尾的尾随逗号会导致阻塞（更多）。