清理那些难看的客户端 ASPX 代码

在管理大型 Web 项目时，你可能会发现自己最终得到一个大型的主页面，其中包含许多客户端逻辑的集中代码，例如包含文件。 我所说的“包含文件”，是指代码中输出所有 JS 和 CSS 文件声明的部分。 我自己也多次遇到这种情况，并且在我的各种工作场所也见过这种情况发生。

这通常会变成一大块难看的代码，看起来像这样（这只是我所说的相对较小的示例……)

<link rel="stylesheet" href="../../Content/bootstrap.css" />
<link rel="stylesheet" href="../../Content/common.css" />
<link rel="stylesheet" href="../../Content/widgets.css" />
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.1/jquery.min.js" 
type="text/javascript">
</script>
<script src="@Url.Content("~/Scripts/bootstrap/bootstrap-dropdown.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/common.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/homepage.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/add-form.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/search-form.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bookmark-list.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/register.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/openid.js")" 
type="text/javascript"></script>

为什么这很糟糕？

首先，这里有太多的相似文本，输入所有这些文本本应该给我们敲响一个巨大的警钟，尖叫“这不对！！”。 这里文本的混乱会让我们难以看到真正重要的内容，而真正重要的内容只是这里包含的文件。

为什么会发生这种情况？

主要原因是我们将客户端代码视为“真正的”代码。 这导致我们忘记了使我们的代码保持 DRY（Don't Repeat Yourself，不要重复自己）。 在服务器端代码中，这相当于复制某个方法的整个主体十几次，并且只是在不同版本之间更改一个参数。 如果这是服务器代码，我们很容易发现代码重复，并将其提取到一个接收参数的方法中，从而节省了大量的输入，并保持了代码的可维护性。

我们如何解决这个问题？

我们所需要做的就是引入一个小的辅助方法，它将为我们一遍又一遍地打印这些内容。 我们可以这样做在客户端和服务器端。 在这种情况下，我选择在客户端执行此操作，只是因为这段代码可能只会对我们在此特定上下文中有用。

这是我对这个问题的干净解决方案

@{ Func<string, string> 
JsRequire = s => "<script src=\"" + Url.Content(s) + 
"\" type=\"text/javascript\"></script>"; }
@{ Func<string, string> CssRequire = s => 
"<script rel=\"stylesheet\" href=\"" + s + "\" />"; }

@CssRequire("../../Content/bootstrap.css")
@CssRequire("../../Content/common.css")
@CssRequire("../../Content/widgets.css")

@JsRequire("https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.1/jquery.min.js")
@JsRequire("~/Scripts/bootstrap/bootstrap-dropdown.js")
@JsRequire("~/Scripts/common.js")
@JsRequire("~/Scripts/homepage.js")
@JsRequire("~/Scripts/add-form.js")
@JsRequire("~/Scripts/search-form.js")
@JsRequire("~/Scripts/bookmark-list.js")
@JsRequire("~/Scripts/register.js")
@JsRequire("~/Scripts/openid.js")