Question

我已经使用ASP.NET MVC大约六个月了，并且已经查看了那些微软人员创建的Nerd Dinner示例。我注意到他们在启用AJAX到RSVP进行晚宴时所做的一件事就是将用户控件中的JavaScript引用用于RSVP。（文件：RSVPStatus.ascx）

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NerdDinner.Models.Dinner>" %>

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

这对我来说似乎不对，因为我很有可能在其他地方使用这些相同的库，例如登录身份验证。另外，如果我更改脚本版本，我需要搜索所有对库的引用。

所以我问我的想法是否正确，这些引用实际上应该在主页的中心位置？

请告诉我这方面的最佳做法以及职业和缺点（如果有的话）。

Answer 1

我肯定会建议你不要把它们放在局部内，这正是你提到的原因。一个视图很可能会引入两个部分，这两个部分都引用了相同的js文件。在加载其余的html之前，你还获得了加载js的性能。

我不了解最佳做法，但我选择在母版页中包含任何常见的js文件，然后为特定或少量视图的其他一些js文件定义单独的ContentPlaceHolder。

这是一个示例母版页 - 它非常自我解释。

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<head runat="server">
    ... BLAH ...
    <asp:ContentPlaceHolder ID="AdditionalHead" runat="server" />
    ... BLAH ...
    <%= Html.CSSBlock("/styles/site.css") %>
    <%= Html.CSSBlock("/styles/ie6.css", 6) %>
    <%= Html.CSSBlock("/styles/ie7.css", 7) %>
    <asp:ContentPlaceHolder ID="AdditionalCSS" runat="server" />
</head>
<body>
    ... BLAH ...
    <%= Html.JSBlock("/scripts/jquery-1.3.2.js", "/scripts/jquery-1.3.2.min.js") %>
    <%= Html.JSBlock("/scripts/global.js", "/scripts/global.min.js") %>
    <asp:ContentPlaceHolder ID="AdditionalJS" runat="server" />
</body>

Html.CSSBlock＆amp; Html.JSBlock显然是我自己的扩展，但同样，它们在他们的工作中是自我解释的。

然后说一个SignUp.aspx视图我会

<asp:Content ID="signUpContent" ContentPlaceHolderID="AdditionalJS" runat="server">
    <%= Html.JSBlock("/scripts/pages/account.signup.js", "/scripts/pages/account.signup.min.js") %>
</asp:Content>

HTHS，查尔斯

聚苯乙烯。我同意Andrew的观点，即直接在母版页中定义的任何常见JS应该连接和缩小。

编辑：我按要求实施.JSBlock（a，b）

public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName)
{
    return html.JSBlock(fileName, string.Empty);
}

public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName, string releaseFileName)
{
    if (string.IsNullOrEmpty(fileName))
        throw new ArgumentNullException("fileName");

    string jsTag = string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>",
                                 html.MEDebugReleaseString(fileName, releaseFileName));

    return MvcHtmlString.Create(jsTag);
}

然后神奇发生的地方......

    public static MvcHtmlString MEDebugReleaseString(this HtmlHelper html, string debugString, string releaseString)
    {
        string toReturn = debugString;
#if DEBUG
#else
        if (!string.IsNullOrEmpty(releaseString))
            toReturn = releaseString;
#endif
        return MvcHtmlString.Create(toReturn);
    }

Answer 2

在我的网站www.trailbehind.com中，我们有一组属于所有页面的javascript文件。然后一些页面包含其他库。

对于所有页面使用的JS文件（有几十个文件），我们将它们连接起来并在构建时缩小它们。

我们的设置文件中有一个标志，指示是否在构建时使用连接的javascript或单独的文件。这很关键，所以你可以在dev上调试javascript，但在生产时使用小的单文件javascript。

这是我们要组合和缩小的python代码：

import os
import thetrailbehind.lib.jsmin as jsmin

JS_FILES = [  'lib/json2.js',
              'lib/markermanager.js',
              'lib/labeledmarker.js',
              'lib/rsh/rsh.js', 
              'lib/showdown.js',
              'lib/yui.js',
              'lib/dragzoom.js',
              'gen/attribute_data.js', 
              'gen/national-parks.js', 
              'Widgets/CommentsWidget.js', 
              'Widgets/Search.js', 
              'Widgets/MenuWidget.js', 
              'Widgets/PhotoWidget.js', 
              'Widgets/ReportList.js', 
              'Widgets/help.js', 
              'attributes.js', 
              'rsh.js', 
              'map.js', 
              'mapcontrols.js',
              'markers.js',
              'amazon.js',
              'plan_trip.js', 
              'init.js',]


def concat(files, base_path, all_file, all_file_min):
  if os.path.exists(base_path + all_file):
    lasttime = os.path.getmtime(base_path + all_file)
  else:
    lasttime = 0
  out_of_date = False
  for file in files:
    if os.path.getmtime(base_path + file) > lasttime:
      out_of_date = True
      break
  if out_of_date:
    outfile = open(base_path + all_file, 'w')
    for file in files:
      outfile.write(open(base_path + file).read())
      outfile.write("\n")
    outfile.close()

    alljs = open(base_path + all_file)
    allminjs = open(base_path + all_file_min, "w+")
    jsmin.JavascriptMinify().minify(alljs, allminjs)
    alljs.close()
    allminjs.close()



def main():
  concat(JS_FILES, '/home/wibge/thetrailbehind/media/javascript/', 'gen/all.js', 'gen/all.min.js')


if __name__ == "__main__":
  main()

这是我们切换的Django / HTML模板：

{% if use_all_js %}
  script type=text/javascript src=/site_media/javascript/gen/all.min.js> 
{% else %}
  script type="text/javascript" src="/site_media/javascript/rsh.js">
  script type="text/javascript" src="/site_media/javascript/amazon.js">
  script type="text/javascript" src="/site_media/javascript/map.js">  
  A BUNCH OF SEPARATE INCLUDES...etc
{% endif %}

在用户控件中链接JavaScript库

2 个答案: