Question

我已经看到/阅读了大量提倡单独文件中包含的“不显眼”的JavaScript。我准备把我从三个部分视图中的所有JavaScript合并到一个文件中，然后我会在我的主文件中引用它。

我的问题是：在HTML中是否应该保留任何类型的JavaScript？在我看来可能会出现问题的一个例子是：

<script type="text/javascript">
    $(document).ready(function () {
        $('#newQuoteLink').click(function () {
            $('#newQuoteLink').hide();
            $('#newQuoteDiv').load('/Quote/Create/<%:Model.Book.BookID%>');
            return false;
        });
    });
</script>

- 特别是

<%:Model.Book.BookID%>

我是否正确假设如果从单独的文件加载此脚本将无效？

在将所有内容合并到这个单独的单独文件中之前，我主要想检查是否有任何警告或其他注意事项。

提前致谢。

Answer 1

不，承诺永远不会硬编码路由依赖的地址，就像在javascript文件中一样。这是坏事，坏事，坏事。我说它不好吗？

视图中的javascript太多了（这是带宽浪费）。您可以尝试使用全局javascript变量声明您的视图：

<script type="text/javascript">
    var quoteUrl = '<%: Url.Action("create", "quote", new { id = Model.Book.BookID }) %>';
</script>

并在您的javascript文件中：

$(function () {
    $('#newQuoteLink').click(function () {
        $('#newQuoteLink').hide();
        $('#newQuoteDiv').load(quoteUrl);
        return false;
    });
});

这是我个人不会接受的道路。仍然是script标记，在您的视图中包含全局javascript变量声明。仍然是一种浪费。

事情变得更加漂亮（就在那一刻，你意识到了不引人注目的javascript的真正力量）：

<%: Html.ActionLink("Foo Bar Beer Link Text", "create", "quote", 
    new { id = Model.Book.BookID }, new { id = "newQuoteLink" }) %>

并在您的外部 javascript：

中

$(function () {
    $('#newQuoteLink').click(function () {
        $('#newQuoteLink').hide();
        $('#newQuoteDiv').load(this.href);
        return false;
    });
});

Answer 2

是的，您是正确的，因为<%:Model.Book.BookID%>对脚本文件不可见。这些是服务器端脚本的一部分，用于生成发送到浏览器的HTML。

您可以将脚本中的大部分工作放在一个接受id作为参数的函数中，然后在您的html中，从.ready(..)调用doStuff("<%:Model.Book.BookID%>")等函数。

Javascript专家：其他警告？ 当我想到一些

时，我会更新

来自视图模型数据的JavaScript参数

2 个答案: