ASP.NET MVC Html Helper Extensions 和呈现它们所需的“包含”

Question

我已经构建了一个自定义的 Html Helper 扩展，如下所示：

public static string DatePicker(this HtmlHelper helper, string name, string value)
{
        return string.Format(@"<script type='text/javascript'>
$(document).ready(function(){{
    $('#{0}').datepicker({{ 
        changeMonth: true, 
        changeYear:true, 
        dateFormat: 'd-M-yy', 
        firstDay: 1, showButtonPanel: 
        true, 
        showWeek: true 
    }});
}});
</script>
<input type='text' name='{0}' id='{0}' value='{1}'>", name, value);
}

问题是现在这需要页面“包含”以下内容：

<script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.ui.datepicker.min.js" type="text/javascript"></script>

还有其他一些项目。问题如下：

1. 是否有严重处理 如果我要包括这些开销 每个页面中的项目（如 Site.Master 例如）因此 否定对 HtmlHelper 的需要 组织“包括” - 考虑到最终会有 大约 20 包括所有 不同类型的 jQuery UI 小部件 在整个网站中使用。

2. 如果 HtmlHelper 整理出 “包括”，它会每增加一个 使用此 DatePicker 的时间（通常 一页上有两个）有人吗 有办法确定是否 不是用户已经呈现 同类型的控制 页面，因此不会重新包含相同的 多个时的jquery库 DatePicker 的实例（对于 例如）被使用？

Answer 1

关于：

1：完全没有处理开销，也没有显着的大小开销（如：文件通常只由浏览器第一次加载）。我通常会采用这种方法。

2：不知道，抱歉 ;) 我想其他人会接手的。

Answer 2

要回答第 2 个问题，您可以执行以下操作

<script type='text/javascript'>
    if (typeof jQuery == 'undefined') // test to see if the jQuery function is defined
        document.write("<script type='text/javascript' src='jquery.js'></script>");
</script>

Answer 3

也许这些代码片段会帮助您对此有所了解：

private static readonly SortedList<int, string> _registeredScriptIncludes = new SortedList<int, string>();

    public static void RegisterScriptInclude(this HtmlHelper htmlhelper, string script)
    {
        if (!_registeredScriptIncludes.ContainsValue(script))
        {
            _registeredScriptIncludes.Add(_registeredScriptIncludes.Count, script);
        }
    }

    public static string RenderScript(this HtmlHelper htmlhelper, string script)
    {
        var scripts = new StringBuilder();
        scripts.AppendLine("<script src='" + script + "' type='text/javascript'></script>");
        return scripts.ToString();
    }

    public static string RenderScripts(this HtmlHelper htmlhelper)
    {
        var scripts = new StringBuilder();
        scripts.AppendLine("<!-- Rendering registered script includes -->");
        foreach (string script in _registeredScriptIncludes.Values)
        {
            scripts.AppendLine("<script src='" + script + "' type='text/javascript'></script>");
        }
        return scripts.ToString();
    }

Answer 4

直接回答

1) 是的，每个页面上的 20 个脚本请求将大大降低客户的性能 - 请参阅 Yahoo / Google 的网络优化文档了解更多信息

浏览器缓存有帮助，但它很容易做得更好。

2) 为什么要推出自己的依赖解决方案？

有许多优秀的库已经很好地做到了这一点 - 有优势吗？

深入：

类似于@Mare 的建议，但我认为有一些不错的优势 - 我建议稍微改变你的方法。重构！

考虑这些核心问题：

1) 为什么要在 .cs 文件中编写 HTML？

=> 将 HTML 保存在 aspx / ascx（或其他视图引擎）文件中会更好 检查编辑器和显示模板，例如

Brad Wilson's Intro to templates

即来自上述@admsteck 的评论

2) 为什么要在 .cs 文件中编写 Javascript？

=> 最好将 Javascript 保存在 .js 文件中

3) 另请注意 - 当您不使用 HtmlHelper 类中的任何状态信息时，为什么要使用 HtmlHelper 扩展方法？

=> 对于一个简单的解决方案，为什么不直接使用静态帮助器类（不是 HtmlHelper 的扩展）请参阅 this answer here

但主要是：

4) 如果您关心性能，为什么不压缩和合并所有脚本（以及 CSS）。

=>然后，您可以为整个应用创建一个小 CSS 文件和一个 JS 文件。

但是，4) 会导致一些进一步的问题：

a) 你如何调试组合 + 缩小的 JS

b) 你如何有效地使用组合+“缩小”的 CSS？

c) 为了重新关注您最初的请求，以干净的方式处理依赖关系，您如何确保其清楚哪些代码取决于哪些代码，以及如何确保仅在需要时请求代码一次？

我发现这个开源库Client Dependency Framework 是我的 MVC 工具箱的一个很好的补充，当你调试时你会得到单个文件，当你运行时你会得到组合文件（在生产中获得巨大的性能提升）。

它还为您的 UI 组件“注册”它们的依赖项提供了一种出色的方式，因此开发人员可以清楚地知道在哪里需要什么，因此正确的 js + 正确的 css 可以归结为客户（并且只被请求一次）！