ASP.NET MVC Html Helper扩展和呈现它们所需的"包含"

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对"includes"进行排序,则每次使用此DatePicker时它将添加一个(通常页面上有两个)是否有人有办法确定用户是否已经在同一类型的控件上页面,因此当使用DatePicker的多个实例(例如)时,不会重新包含相同的jquery库？

Answer 1

直接回答

1)是的,每页上20个脚本请求会大大降低客户的性能 - 请参阅Yahoo/Google关于Web优化的文档以获取更多信息

浏览器缓存有所帮助,但它更容易做得更好.

2)为什么要将自己的解决方案推广到依赖项？

有很多优秀的图书馆已经做得很好 - 有优势吗？

深入:

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

考虑以下核心问题:

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

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

Brad Wilson的模板简介

即来自@admsteck的评论

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

=>将您的Javascript保存在.js文件中要好得多

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

=>对于一个简单的解决方案,为什么不使用静态助手类(不是HtmlHelper的扩展),请在此处查看此答案

但主要是:

4)如果您关注性能,为什么不缩小和组合所有脚本(和CSS一起使用时).

=>然后你可以为你的整个应用程序提供一个小的CSS文件和一个JS文件.

然而,4)然后导致一些进一步的问题:

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

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

c)重新关注原始的处理依赖关系的简洁方法请求,如何确保清楚哪些代码取决于代码,以及如何确保代码仅在需要时请求一次？

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

它还为您的UI组件提供了一种"注册"其依赖关系的绝佳方式,因此开发人员可以清楚地了解所需的内容,因此正确的js +正确的css可以下载到客户端(并且只需要一次请求)!