在 MVC3 视图中使用嵌入式 javascript 或单独的 .js 文件更好吗？

Posted 2023-02-22

【中文标题】在 MVC3 视图中使用嵌入式 javascript 或单独的 .js 文件更好吗？

【英文标题】：Is it better to use embedded javascript or a separate .js file in an MVC3 view?

【发布时间】：2012-04-19 16:23:33

【问题描述】：

有人告诉我，最好将 javascript 代码放在单独的文件中以保持关注点分开，虽然这个想法引起了我的共鸣，但我觉得它并不实用。

这可能只是我的经验不足，因此提出了这个问题。

这是一个明确的例子，我发现将代码放在视图中比放在单独的 javascript 文件中更好。

在我的视图中，我需要调用一个 JQueryUI 对话框，并使用我的模型名称动态设置标题。

$("#thumbs img").click(function () 
    var url = $(this).attr("src");
    $(".image-popup").attr("src", url);

    return $("#image-popup").dialog(
        modal: true,
        closeOnEscape: true,
        minHeight: 384,
        minWidth: 596,
        resizable: false,
        show: 
            effect: 'slide',
            duration: 500,
            direction: 'up'
        ,
        hide: 
            effect: 'slide',
            duration: 250,
            direction: 'up'
        ,
        title: '@Model.Product.Name'
    );
);

注意：

title: '@Model.Product.Name'

如您所见，如果我在视图中使用 Javascript，我可以 访问 强类型模型。如果我使用单独的 Javascript 文件，情况并非如此。

我做错了吗，有什么我没有看到吗？

如果我要使用单独的文件，由于我无法从 Javascript 文件中访问模型属性，它会是什么样子？

【问题讨论】：

外部 js 文件不仅有利于“关注点分离”，我们还获得了其他主要优势，如浏览器缓存、缩小等。所以答案是直接将它们放在外部文件中。

【参考方案1】：

单独的js文件：

<div id="thumbs">
    <img data-dialog-title="@Model.Product.Name" src="[whatever url]" />
</div?

$("#thumbs img").click(function () 
    var title = $(this).data('dialog-title');
    var url = $(this).attr("src");
    $(".image-popup").attr("src", url);

    return $("#image-popup").dialog(
        modal: true,
        closeOnEscape: true,
        minHeight: 384,
        minWidth: 596,
        resizable: false,
        show: 
            effect: 'slide',
            duration: 500,
            direction: 'up'
        ,
        hide: 
            effect: 'slide',
            duration: 250,
            direction: 'up'
        ,
        title: title
    );
);

使用 html5 data-* 属性通过 dom 不显眼地访问模型属性。上面的 javascript 作为外部文件可以很好地工作。

【参考方案2】：

如果您不能使用上述 HTML5 数据属性，那么http://nuget.org/packages/RazorJS 可能会解决问题，似乎可以解决您的问题。