网上有两张著名的图片，分别以2D和3D的形式描述css盒模型：

通过这两张图，一般来说对于margin、border、background-color、background-image、padding以及width和height有较直观的了解了。

更为重要的是要了解以下几点：

1. 对于所有以“块(block)”方式呈现的元素都具备这个模型的特性，而不只是div；
2. margin是以所指定元素的父级元素（常称为“容器”）为基准的；
3. 一个元素（通常为块元素）在页面中所占的位置尺寸为：宽度= width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right；高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom；（部分浏览器有差异，以后再具体讨论）；
4. background-color将填满border内部的全部范围；background-image默认以图片左上角对齐border内部左上角点，然后完整显示整个图片（超出部分不予显示），如果图片尺寸不足铺满整个范围，图片默认重复自己直至铺满或超出范围；
5. background-image将叠加到background-color之上；通过指定图片的对齐方式，可以改变background-image的位置；

通过以上这些规则的组合，就能在有限的元素组合下，实现各种修饰性效果。一个简单的例子如下：

将一个15像素高，颜色为#c00的纯色图片 放入一个高度为30像素，背景色为#f00的块元素，设定图片在Y轴方向不平铺，在x轴方向平铺。结果得到一个类似下图的效果：

这是简单的由背景色与背景图组合实现的效果。根据这样的原理，当我们的文档结构有两层时，例如：<a href=”#"><span>文字</span></a>，我们可以通过由a元素的背景颜色图片和span元素的背景颜色图片组合，从而得到较为复杂的效果，例如：

这个按钮效果，用纯图片很容易实现，但是用图片实现就会面临一个问题：不通用。如果要通用，应该把文字和背景图片分离开来，同时，由于文字有多有少，因此按钮的宽度要是可变的，但是按钮并不是从左到右完全一致的背景，于是不能使用一张图片进行横向平铺，按照以前的做法，可能会使用一个一行三列的表格，第一个单元格放入左侧的图片，中间的单元格放文字和平铺的背景，右边的单元格放右侧的图片。这种思维传递到了“div+css”布局思维模式下，于是就出现了这样的结构：

<div class=”button”><div class=”left”></div><div class=”center”></div><div class=”right”></div>

这个结构的出现，就是为了实现自适应宽度的按钮，今天依然存在。实际上，使用上面的a+span的基本结构，就能实现这个效果。将中间平铺部分和左侧或右侧的边缘图片组合在一起，重复部分做得宽一些，作为a的背景图片，把另一侧的图片作为span的背景图片覆盖到a的背景图片上。组合起来看上去就成为一个整体。代码如下：

效果如下：

a {display:block;width:200px;height:36px;background:url(button.gif) no-repeat right bottom;}
a span {display:block;line-height:36px;background:url(button.gif) no-repeat left top;color:#fff;text-decoration:none;text-align:center;}

用到的背景图片如下：

这个例子很简单，但是需要对“背景组合”有足够的理解，能够想到应用。而要想到如此应用，首先是对于盒模型中的“background”足够的理解。否则，就只会想到三个div（或者其它元素组合方式），但是由于左右两个结构完全一样，为了区分它们，只好使用class或者id来标记。这就是我在上一篇中所提到的不必要的class和id。

除了利用display:block让行内元素改变为块元素从而使用盒模型特征外，在浮动的时候，也经常会用到盒模型的一些特征。再举个例子：

使用浮动布局的时候，并列呈现的浮动元素中的第一个如果设置与浮动方向相同的margin，则IE 6下会出现margin加倍的bug（这就是著名的IE6浮动边距加倍bug）。为了解决这个问题，很多人喜欢给一组浮动元素的第一个加上class=”first”，从而可以对这个元素单独应用样式。或者对这一组浮动元素加上display:inline的属性以解决这个bug。

上述两种方式都是没有使用hack选择符或者类似“_margin”这样的非标准属性的很好的hack方式。但是，如果不是非用margin不可，只要使用padding来代替margin，就能解决这个问题。或者采用与浮动方向相反的margin也可以。不需要任何额外的hack。这也是在充分理解盒模型的基础上，由于对这个bug的了解，从而在实现样式的时候直接避开，而不是出现了之后再用额外手段去hack。

对盒模型的理解，除了margin、border、padding、width、height五大属性以及两种背景的应用之外，还要了解父级元素与子元素之间的关系。比如父元素没有设置尺寸，而对子元素设置margin-top属性，在某些浏览器下，本来是想针对父元素的边缘设置margin，结果margin被设置到了父元素之外，造成父元素与外部元素的margin。这种情况，将子元素的margin改成父元素的padding，也可以在不改变表现的情况下实现相同的效果。

要想通过对盒模型特征的充分应用来减少css中的hack使用，或者以更简洁的代码实现更复杂的效果，需要对盒模型不断地尝试和总结。这是《css权威指南》之类的经典巨著也没法教给你的。

只有越理解盒模型，才能越好地利用浮动和定位来实现复杂、精确的布局。关于浮动的问题，下一次我们再一起来了解一下。

相关日志

• 2009-12-16 -- 前台开发从头说起：谈谈CSS选择符
• 2009-12-15 -- 前台开发从头说起：关于web标准化
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2009-04-16 -- 来自微软站点的纯CSS下拉菜单
• 2009-04-13 -- 简单、通用的JQuery Tab实现
• 2006-04-04 -- 动态实现指定图片半透明及鼠标事件
• 2006-03-28 -- CSS:模拟Windows窗口及DIV居中
• 2005-12-12 -- 实践：用Div+CSS重构网页
• 2005-11-29 -- CSS学习之综合运用
• 2009-04-09 -- [翻译]ASP.NET MVC动手实验1-2：创建ASP.NET MVC应用

一般稍微接触过css的网页设计人员，都会很快地学会三种css选择符：

• 元素选择符（例如：body 、a 、li ）
• ID选择符（例如：#head、#body、#foot）
• 类选择符（例如：.red、.item、.content）

更进一步之后，开始了解到一些进阶的选择符：

• 后代选择符（例如 #head .menu、#foot #copyright）
• 伪类选择符（例如 a:hover、a:link）

以及由这些选择符组合起来形成的综合选择符。实际上css还支持一些更丰富的选择符。但是能够被浏览器广泛支持的其实主要就是上面这几种，其它的选择符在css中往往用来区别处理不同的浏览器，或者用在jQuery一类的框架中。本文就不提了。有兴趣的可以自己在网上查一下，像属性选择符（input[type=’password’]、input[type=’radio’]）、直接后代选择符（body > div、 #head > ul）等。

实际上，有了上面列出的五种主要的选择符，通过对它们的组合，已经能够满足我们绝大部分时候的要求了，这也就意味着，相同结构下的元素，父级元素或者祖先元素只要有一点点区别，我们就能够在不借助id或者class的情况下直接访问到。例如：

<ul>
  <li><a href="#">菜单1</a>
    <ul>
      <li><a href="#">菜单1-1</a></li>
      <li><a href="#">菜单1-2</a></li>
      <li><a href="#">菜单1-3</a></li>
    </ul>
  </li>
  <li><a href="#">菜单2</a>
    <ul>
      <li><a href="#">菜单2-1</a></li>
      <li><a href="#">菜单2-2</a></li>
      <li><a href="#">菜单2-3</a></li>
    </ul>
  </li>
</ul>

这个结构是我在《来自微软的纯css下拉菜单》一文中用到的下拉菜单结构。在那个示例中，没有使用任何的class或者id，但是我们通过不同优先级的元素+后台选择符，对结构中的不同层次的ul、li、a实现了精确定位。如下面的代码：

ul {}
li {}
ul ul {}
ul ul li {}
li a {}
ul li a {}
ul li:hover ul {}

那么，在实际开发中，为什么很多网页设计人员还是离不开多如牛毛的ID和class呢（我要声明一下，我从来没有说完全抛弃id和class，我的观点是他们应该尽量少，并且由文档结构决定而不是由css需要决定）？我觉得有三方面的原因：

第一、xhtml文档结构不合理，通过元素不能体现文档的层次结构。满篇都是div。没有有效利用Hx系列标签和ul、ol、dl等不同含义的列表标签、没有有效利用p、quote、pre等标签。xhtml为我们提供了丰富的标签元素，但是如果我们只会用div，那还不如人家用table来布局的。至少他的table在一定程度上也是文档结构的体现，而满篇嵌套的div，文档结构完全没体现。

第二、css选择符掌握得不够，不善于借助文档结构层次上的细微区别，用不同的组合选择符来区别相似但其实不同的元素。例如上面的下拉菜单结构，有的人就非要用“menu”和“submenu”来区别。

第三、css选择符的优先级不清楚。css是支持继承和覆盖的，什么时候继承，什么时候覆盖。两条规则都对相同元素做出了样式规定而且样式规定重复的情况下，哪一条规则会被应用呢？这些问题不清楚，就没办法充分利用优先级实现规则的覆盖。于是只好每个要应用样式的元素都加上id或者class。关于css选择符的优先级，网上也有很多文章，我就不赘述了。

所以说，如果感觉离不了class，离不了id，那只能说明两个问题——xhtml结构不合理或者css掌握得还不够。我上一篇博文发了以后，有位朋友评论说我没做过前台开发。因为没有class和id，就不能实现css和javascript的分离。实际上，只要是长期深入学习css和javascript的朋友应该都清楚：在结构有差异的情况下，用css选择符就能精确定位某个元素；在结构完全相同的情况下，借助javascript和DOM，同样可以精确定位某个元素。

仍然以上面的下拉菜单列表为例。首先使用 ul a 对父级菜单的链接应用样式，然后用ul ul a就可以精确定位到次级菜单的链接，应用新的样式，对ul a的定义进行覆盖。那么，如果是要精确定位到第二级菜单的第二个元素呢？由于css3的选择符目前还没被广泛支持，而结构又没有差异，不借助javascript有困难了。但是借助于javascript，非常轻松，比如在jQuery中，我们可以用 $("ul ul:nth(2) li:nth(2)”) 或者 $("ul ul”).eq(1).find(“li”).eq(1) 都能得到第二个子菜单的第二个菜单元素。

css和javascript能够自己精确找到网页中的任何一个元素，那么网页自然就不用自己标识自己的每个元素。少了这层负担，我们在设计网页文档结构的时候，自然就可以抛弃一切后顾之忧，那么，xhtml中和结构无关的id和class，还有什么必要存在呢？

去除了不必要的表现元素和属性（font、center、align、height）之后，又去除了不必要的id、class、onclick、onmouseover之类的样式和行为属性，我们的网页源代码尺寸越来越小，抓一个页面下来，少量必要的结构元素之外，剩下的全是链接和内容，这样的网站，搜索引擎能不喜欢吗？

没有了后顾之忧，认清了努力方向，那么下一次我们就来谈谈css的盒模型。

相关日志

• 2009-12-21 -- web开发从头说起：理解css盒模型
• 2009-12-15 -- 前台开发从头说起：关于web标准化
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2009-04-16 -- 来自微软站点的纯CSS下拉菜单
• 2009-04-13 -- 简单、通用的JQuery Tab实现
• 2006-04-04 -- 动态实现指定图片半透明及鼠标事件
• 2006-03-28 -- CSS:模拟Windows窗口及DIV居中
• 2005-12-12 -- 实践：用Div+CSS重构网页
• 2005-11-29 -- CSS学习之综合运用
• 2009-04-09 -- [翻译]ASP.NET MVC动手实验1-2：创建ASP.NET MVC应用

很多人对于web标准化的理解就是“DIV+CSS”，或者“IE、FF、Chrome、Opera、Safari测试无错”，或者就是“通过w3c校验”。实际上，这些都只是web标准化以后附带的一些好处或者说一些表现。web标准化的精髓并不是为了抛弃表格，或者浏览器兼容，或者通过w3c校验。有时候，标准化了的网页未必一定能达到上述这些特征。

web标准化的精髓或者说本质到底是什么呢？其实很简单，就是“结构、表现、行为分离”。这句话看起来简单，但是真的实现起来，就不那么容易了。分离，分离到什么程度算是标准？分离的目的是什么？举例来说吧。

既然要分离，那么耦合度当然是越低越好。

以样式为例。我们可以把所有的样式都放到外部CSS文件中，那么，CSS规则如何影响你的页面元素呢？有时候用到ID，有时候用到class。如果你的页面充满了ID和class，那么实际上分离得就不怎么彻底，因为你的页面上仍然有大量的ID或者class实际上是为了样式表现而存在的，他们并不是文档结构本身的要求。所以现在有“class hell”的说法。就是为了完全由外部css对页面实现精确控制，而在页面文档中加入大量，甚至过多的class。

再以行为为例。很多时候我们需要和用户交互，于是要给页面上的元素添加“onclick”，“onchange”，“onmouseover”等属性，这些属性编写在页面文档中，依赖于外部javascript。一旦外部的javascript被拿走，页面就出现执行脚本错误，甚至完全不能正常阅读。在这种情况下，javascript实际上和xhtml就没有能够解除耦合。

实际上，由于只有xhtml、css、javascript三者存在，我们不可能在网页开发中引入“面向接口编程”之类的设计模式。那么，我们所谓的彻底分离，其实从三者分离的最根本目的来说，就是要实现xhtml对另外两者不依赖。即使去除了所有的css和javascript，xhtml本身也能很好地完成自己的职责——文档结构。而css和javascript呢？依赖于xhtml是必然的。

如此一来，如何解除耦合呢？其实答案就呼之欲出了。那就是尽量避免和文档结构无关的元素嵌套，尽量去除class和事件属性。比如：

<ul>
    <li><a href="#">国内新闻</a></li>
    <li><a href="#">国际新闻</a></li>
    <li><a href="#">财经新闻</a></li>
    <li><a href="#">体育新闻</a></li>
</ul>

这样一段源代码，从文档结构的角度来理解，它就是一组彼此关联，没有先后和主次之分的列表，可以理解为列表，也可以理解为目录。

但是在css的作用下，它可以变成菜单、导航条等各种形式，如果css和javascript相结合起来，它还可以变成滑动门、三态菜单等。在这种情况下，css负责表现，javascript负责行为，而xhtml并没有因为css想实现什么样式或者javascript想实现什么交互行为而改变自己。不管css和javascript想做什么，都跟它没关系。那么实际上就真正达到了我们“彻底分离”的目的。保证了文档结构的纯粹性。这就是web标准的思维模式。

随之而来的好处，那就是页面的兼容性，不管在什么样的浏览器里，这段xhtml都是合法有效的。w3c校验也不会有任何问题。并且SEO也会非常好。因为搜索引擎想要的并不是class或者onmouseover，搜索引擎想要的只不过是链接地址和链接文字。

那么，没有class，怎么实现样式呢？没有onmouseover或者onclick，怎么实现javascript事件呢？这就需要网页开发人员的css功力和javascript功力了。

所以，越是标准化，对css和javascript的技术要求越高。反过来，css的能力达不到，或者javascript的能力达不到，那就需要借助于class（id和文档结构有关，不算在这里，后面我们再谈）、借助于onmouseover或者onclick这些与结构无关的属性来帮助实现样式或者行为。

在博客园上，暴牙齿提出“独立于根”的想法。我个人认为从文档结构的角度，并没有“独立于根”的要求。但是如果能够达到“独立于根”的开发能力，那么实现起标准化来就绝对会非常得心应手。因为连“独立于根”都能实现自己的设计样式和行为的话，有了结构的文档就更不在话下了。

理解了标准化的本质和终极目标，如何通过css和javascript来达到这个目标呢？这个问题，留到本系列以后的文章再谈。

相关日志

• 2009-12-21 -- web开发从头说起：理解css盒模型
• 2009-12-16 -- 前台开发从头说起：谈谈CSS选择符
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2009-04-16 -- 来自微软站点的纯CSS下拉菜单
• 2009-04-13 -- 简单、通用的JQuery Tab实现
• 2006-04-04 -- 动态实现指定图片半透明及鼠标事件
• 2006-03-28 -- CSS:模拟Windows窗口及DIV居中
• 2005-12-12 -- 实践：用Div+CSS重构网页
• 2005-11-29 -- CSS学习之综合运用
• 2009-04-09 -- [翻译]ASP.NET MVC动手实验1-2：创建ASP.NET MVC应用

18. HtmlHelper 扩展

首先，参考一下 Rob Conery 的这篇文章，我完全同意他的观点，你应该为每种情况创建 Helper 方法，此外我还建议你像 ASP.NET MVC 团队那样为可重用的 UI 元素创建 Helper 方法，但是对于在哪里放置我们正在实践的这些方法，我有不同的建议。

应用程序开发者

只为你需要在多个视图中重复使用的HtmlHealper创建单独的扩展方法。对于只在一个视图中使用的帮助方法，你可以为整个视图创建一个Helper类，然后创建一个HtmlHelper来返回这个视图Helper类，而把只在这个视图中使用的扩展方法作为类内部的方法。（这部分未按原文翻译，请自行参照原文）例如：

public class DashboardHtmlHelper {
    private readonly HtmlHelper _htmlHelper;

    public DashboardHtmlHelper(HtmlHelper htmlHelper) {
        _htmlHelper = htmlHelper;
    }

    public string DoThis() {
        //Your Code
    }

    public string DoThat() {
        //Your Code
    }
}

public static class HtmlHelperExtension {
    public static DashboardHtmlHelper Dashboard(this HtmlHelper htmlHelper) {
        return new DashboardHtmlHelper(htmlHelper);
    }
}

然后在视图中这样调用：

<%= Html.Dashboard().DoThis() %>

UI 组件开发人员

如果你在开发的是可以在多个 ASP.NET MVC 应用程序中重用的 UI 组件系列，你可以像上面那样为你的整个系列组件创建一个单一名字的Helper。假如你开发的是商业组件，那你可以用你的公司名字来为这个单一的Helper命名，然后在这个Helper中添加方法。否则很容易出现方法的命名冲突。

要是你正在学习 MVCContrib.org 的做法，为 IViewDataContainer 做扩展的话，道理也是一样的。

19. Html编码

在从用户端获取信息的任何情况下，总是使用 Html.Encode(“User Input”) 来编码文本节点，用 Html.AttributeEncode(“User Input”) 来编码Html 元素属性。

20. 不要把Javascript脚本放在你的视图中

不要把你的javascript脚本和html混杂在一起，创建一个单独的 js 文件，把脚本代码放在里面。有时候你可能需要在你的 javascript 代码中传递视图数据，这种特殊的情况下，也只把初始化代码放在视图中。例如，你正在开发 web 2.0 风格的应用，你需要在这个应用中传递 ajax 方法的url，并且需要在 javascript 脚本中传递一些其它的模型数据，这种情况下，你可以参考下面的方式：

视图：

<div id="sideBar" class="column"></div>
        <script type="text/javascript">
            $(document).ready(function(){
                Story.init('<%= Model.UrlFormat %>', '<%= Url.NoIcon() %>', <%= Model.PageCount %>, <%= Model.StoryPerPage %>, <%= Model.CurrentPage %>, '<%= Model.SelectedTab %>', '<%= Model.SelectedOrderBy %>');
            });
        </script>
    </div>
</asp:Content>

Javascript：

var Story = {
    _urlFormat: '',
    _noIconUrl: '',
    _pageCount: 0,
    _storyPerPage: 0,
    _currentPage: 0,
    _currentTab: '',
    _currentOrderBy: '',

    init: function(urlFormat, noIconUrl, pageCount, storyPerPage, currentPage, currentTab, currentOrderBy) {
        Story._urlFormat = urlFormat;
        Story._noIconUrl = noIconUrl;
        Story._pageCount = pageCount;
        Story._storyPerPage = storyPerPage;
        Story._currentPage = currentPage;
        Story._currentTab = currentTab;
        Story._currentOrderBy = currentOrderBy;

        //More Codes
    }
}

这里要为不太熟悉上面的 javascript 的同学解释一下，这是一个在javascript中创建静态类的示例代码。对了，我还差点忘了提一点，永远不要在你的javascript文件中硬编码 ajax 方法的url，虽然 Rob Conery 和 Phil Haack 在他们的教程中是这样干的。这是一个很不好的方式，它破坏了 ASP.NET 路径重写的优雅性。

21. 使用 jQuery 和 jQuery UI

使用 jQuery 和 jQuery UI，它是最好的js库，并且可以使用 Google CDN 托管服务来加载这些库（对于国内用户，如果使用 google 托管的库一定要有承担风险的准备，具体原因嘛，看看国内6月24日左右的IT新闻就知道了）。

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/{YOUR Prefered Theme}/jquery-ui.css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.js"></script>

还有一种更好的方式：

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/{YOUR Prefered Theme}/jquery-ui.css" rel="stylesheet"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");
    google.load("jqueryui", "1.7.1");
</script>

以上就是这一次的全部内容。

最后，我要祝贺 ASP.NET MVC 团队开发了如此杰出的框架，尤其是他们从社区接受反馈的方式。我希望能用这个框架开发出更多杀手级的应用（注：杀手级的应用程序，一般指极其优秀的应用程序，这类程序超越了语言本身，比语言更有吸引力而且能增加语言的吸引力）。

相关日志

• 2009-07-07 -- ASP.NET MVC 最佳实践（三）
• 2009-07-01 -- ASP.NET MVC 最佳实践（二）
• 2009-06-28 -- ASP.NET MVC 最佳实践（一）
• 2009-04-13 -- [翻译]ASP.NET MVC动手实验1-3：开发ASP.NET MVC应用
• 2009-04-09 -- [翻译]ASP.NET MVC动手实验1-2：创建ASP.NET MVC应用
• 2009-04-09 -- [翻译]ASP.NET MVC动手系列1-1：ASP.NET MVC概述
• 2009-07-05 -- PHP 5.3.0 发布
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2009-04-30 -- VS2008 中 JS IntelliSense出错的解决
• 2008-06-22 -- 动易SW中的一个严重但不影响使用的bug（二）

15. 关于路由的思考

如果你在开发的是一个纯 ASP.NET MVC 的应用程序，可以先关闭已有的路由文件检查，这样可以去除不必要的文件系统检查。如果你这样做了，那么就还需要考虑另外的一些事情。请记住如果你的应用程序运行于 IIS 7集成模式，那么 ASP.NET 应用程序将会拦截所有的请求，不管文件的后缀名是什么。所以你必须要在过滤列表中加一些东西，以便让 ASP.NET MVC 应用程序不处理它们。这其中可能包括静态文件，例如 html、htm、文本文件(尤其是robots.txt)、favicon.ico、脚本、图片和css等等。这也是我在第一部分第2节中提到不喜欢默认文件结构的原因之一。以下是我为 IIS7 定制的路由定义标准模板：

_routes.Clear();

// Turns off the unnecessary file exists check
_routes.RouteExistingFiles = true;

// Ignore text, html, files.
_routes.IgnoreRoute("{file}.txt");
_routes.IgnoreRoute("{file}.htm");
_routes.IgnoreRoute("{file}.html");

// Ignore axd files such as assest, image, sitemap etc
_routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

// Ignore the assets directory which contains images, js, css & html
_routes.IgnoreRoute("assets/{*pathInfo}");

// Ignore the error directory which contains error pages
_routes.IgnoreRoute("ErrorPages/{*pathInfo}");

//Exclude favicon (google toolbar request gif file as fav icon which is weird)
_routes.IgnoreRoute("{*favicon}", new { favicon = @"(.*/)?favicon.([iI][cC][oO]|[gG][iI][fF])(/.*)?" });

//Actual routes of my application

接下来是我的一些不同于手册指南的个人偏好。默认情况下 ASP.NET MVC 产生的 url 形如 {controller}/{action}，在你开发一个多模块的应用程序是这是不错的选择，但是对于一些很小的应用程序，我通常喜欢从 url 中去掉控制器(controller)只留下方法名(action name)。如此一来，原来的“www.yourdomain.com/Story/Dashboard” 及 “www.yourdomain.com/Membership/Signin” 就会变成 “www.yourdomain.com/Dashboard” 和“www.yourmain.com/Signin”。所以我要添加一些新路由：

_routes.MapRoute("SignUp", "SignUp", new { controller = "Membership", action = "SignUp" });
_routes.MapRoute("SignIn", "SignIn", new { controller = "Membership", action = "SignIn" });
_routes.MapRoute("ForgotPassword", "ForgotPassword", new { controller = "Membership", action = "ForgotPassword" });
_routes.MapRoute("SignOut", "SignOut", new { controller = "Membership", action = "SignOut" });
_routes.MapRoute("Profile", "Profile", new { controller = "Membership", action = "Profile" });
_routes.MapRoute("ChangePassword", "ChangePassword", new { controller = "Membership", action = "ChangePassword" });

_routes.MapRoute("Dashboard", "Dashboard/{tab}/{orderBy}/{page}", new { controller = "Story", action = "Dashboard", tab = StoryListTab.Unread.ToString(), orderBy = OrderBy.CreatedAtDescending.ToString(), page = 1 });
_routes.MapRoute("Update", "Update", new { controller = "Story", action = "Update" });
_routes.MapRoute("Submit", "Submit", new { controller = "Story", action = "Submit" });

_routes.MapRoute("Home", "{controller}/{action}/{id}", new { controller = "Home", action = "Index", id = string.Empty });

16. 如果需要的话，创建新的ActionResult

ASP.NET MVC 包含有很多种用于不同目的的 ActionResult，但我们仍有可能会需要新的 ActionResult。例如xml、rss、atom等等。在这种情况下，我的建议是不要使用通用的 ContentResult， 而是创建一种新的 ActionResult. MVCContrib 项目中有一个 XmlResult，你可以用它来返回 xml，但是不支持 feed。显然依靠它来将未知对象转换为 rss/atom 是很困难的，这时你就可以创建一个定义ActionResult的模型。例如：

public class AtomResult : ActionResult {
    public AtomResult(string siteTitle, string feedTitle, IEnumerable<IStory> stories) {
        SiteTitle = siteTitle;
        FeedTitle = feedTitle;
        Stories = stories;
    }

    public string SiteTitle {
        get;
        private set;
    }

    public string FeedTitle {
        get;
        private set;
    }

    public IEnumerable<IStory> Stories {
        get;
        private set;
    }

    public override void ExecuteResult(ControllerContext context) {
        string xml = Build(context);

        HttpResponseBase response = context.HttpContext.Response;
        response.ContentType = "application/atom+xml";
        response.Write(xml);
    }
}

然后在控制器中就可以这样写：

[AcceptVerbs(HttpVerbs.Get), OutputCache(CacheProfile = "Atom")]
public ActionResult Shared() {
    IEnumerable<stories> stories = GetSharedStories();

    return new AtomResult("My Site", "My shared stories in atom", stories);
}

17. 把你的视图拆分为多个视图控件

如果你的视图文件变得越来越大，那你可以考虑把它拆分为多个视图控件。至于视图空间是否在多个页面中重用，并没有关系。因为这样做可以让真正的视图文件变得更加具有可读性。考虑一下下面的视图：

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    My Secret App : Dashboard
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="heading"></div>
    <div class="columns">
        <div id="main" class="column">
            <div id="storyListTabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
                <% Html.RenderPartial("TabHeader", Model);%>
                <div id="tabContent" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                    <div id="storyList">
                        <% Html.RenderPartial("SortBar", Model);%>
                        <div class="clear"></div>
                        <% Html.RenderPartial("NoLinkMessage", Model);%>
                        <form id="update" action="<%= Url.Update()%>" method="post">
                            <% Html.RenderPartial("List", Model);%>
                            <% Html.RenderPartial("ActionBar", Model);%>
                            <% Html.RenderPartial("Pager", Model);%>
                        </form>
                    </div>
                </div>
            </div>
            <%Html.RenderPartial("Submit", new StorySubmitViewModel());%>
        </div>
        <div id="sideBar" class="column"></div>
    </div>
</asp:Content>

继续阅读：《ASP.NET MVC 最佳实践（四）》

相关日志

• 2009-07-08 -- ASP.NET MVC 最佳实践（四）
• 2009-07-01 -- ASP.NET MVC 最佳实践（二）
• 2009-06-28 -- ASP.NET MVC 最佳实践（一）
• 2009-04-13 -- [翻译]ASP.NET MVC动手实验1-3：开发ASP.NET MVC应用
• 2009-04-09 -- [翻译]ASP.NET MVC动手实验1-2：创建ASP.NET MVC应用
• 2009-04-09 -- [翻译]ASP.NET MVC动手系列1-1：ASP.NET MVC概述
• 2009-07-05 -- PHP 5.3.0 发布
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2009-04-30 -- VS2008 中 JS IntelliSense出错的解决
• 2008-06-22 -- 动易SW中的一个严重但不影响使用的bug（二）

• 支持命名空间
• 支持延迟静态绑定技术
• 支持跳转标签（受限制的goto）
• 支持闭包（Lambda表达式和匿名函数）
• 新增两个魔法函数，__callStatic 和 __invoke
• 新增 Nowdoc 语法支持，与 Heredoc 语法相同但是带有单引号
• 可以在静态变量和类成员、类构造函数中使用 Heredoc 语法
• Heredoc 可以用双引号定义，以便与 Nowdoc 的单引号区别
• 构造函数可以在类之外用 const 关键词进行定义
• 增加了条件操作符的简短形式 ?: (例如 a = condition ? true : false）
• 200 到 399 的状态码在HTTP数据流容器被认为是成功
• 允许动态访问静态成员
• 允许对异常进行嵌套
• 增加并且默认启用垃圾回收机制

此外，针对Windows版本的改变有：

• 不再支持Windows98,ME和NT4，最低支持Windows 2000
• Windows 二进制版本针对 i586 或更高版本编译，不再支持 i386和i486
• 对 Windows 系统上的 64位 PHP 提供支持（实验性的）
• 支持Visual C++ 9（VC9）编译，可以使用 Visual Studio 2008。
• PDO_OCI 的 php_pdo_oci8.dll 库（用于Oracle 8的客户端类库）不再构建，替代它的是 php_pdo_oci.dll（去掉了“8”），用于 Oracle 10 或者 11。与其他版本的数据库连接继续支持。
• 针对 OCI8 的扩展，除了php_oci8.dll之外增加了一个php_oci8_11g.dll，但是不能同时启用。php_oci8.dll与Oracle 10.2客户端类库结合使用，而php_oci8_11g.dll 和 Oracle 11客户端类库结合使用。与其他版本数据库的连接继续支持。

Windows版本新增加了对下列函数的支持：

• checkdnsrr()
• dns_get_record()
• fnmatch()
• getmxrr()
• getopt()
• imagecolorclosesthwb()
• inet_ntop()
• inet_pton()
• link()
• linkinfo()
• mcrypt_create_iv()
• readlink()
• socket_create_pair() – 这个函数以前就在Windows中支持，但是由于在PHP 4.3.0中的一个bug而被禁用
• stream_socket_pair()
• symlink()
• time_nanosleep()
• time_sleep_until()

除了上述改变外，Windows版本还有一些其它提升性能或者增加兼容性的改进，而最为重要的则是一条针对Windows的说明：

在windows下采用ISAPI方式运行PHP已经被遗弃，采用改进的FastCGI SAPI模块来代替。我在2008年6月23日的日志中曾经笑称“PHP成为IIS‘一等公民’”，那是只是从微软IIS团队官方发布PHP的FastCGI模块，以及微软和Zend的合作而对PHP在Windows平台上的使用做了最乐观的展望，而后来微软在IIS7以后的版本内置FastCGI模块，甚至在云服务中也内置FastCGI支持，则更说明了PHP与Windows的联姻将继续增强。可惜的是直到Windows7发布之后，网上的绝大部分教程依然在教新手采用ISAPI方式运行PHP，甚至是采用PHP4的安装方式。甚至还有人专门跑到我的空间里叫嚣在Windows下运行PHP是如何如何。开源社区对Windows平台的妖魔化，至今影响深远。正是由于拒绝导致了他们对Windows、ASP.NET、C#的不了解，甚至直至今日还死抱着Windows比Linux慢、不如Linux安全之类的陈旧观念。

如今PHP 5.3.0也像ASP.NET一样，引入了命名空间、延迟绑定、匿名函数、Lambda表达式等先进特性，可见编程语言与平台无关性在未来将更加凸显，而混合编程的正确性和先进性也将不断得到体现。封闭自己，拒绝变化的产品和思想，在开发领域只有死路一条。

相关日志

• 2008-06-04 -- 在ASP中实现UNIX时间戳
• 2008-05-23 -- 给UCenter的拥蹩们泼点冷水
• 2009-07-08 -- ASP.NET MVC 最佳实践（四）
• 2009-07-07 -- ASP.NET MVC 最佳实践（三）
• 2009-07-01 -- ASP.NET MVC 最佳实践（二）
• 2009-06-28 -- ASP.NET MVC 最佳实践（一）
• 2009-06-08 -- 在 IIS 7.x 中用 FastCGI 运行 PHP
• 2008-06-23 -- 微软官方FastCGI，PHP成为IIS“一等公民”
• 2008-06-22 -- 动易SW中的一个严重但不影响使用的bug（二）
• 2008-06-22 -- 静态页面生成的思考

7. 不要在控制器中使用HttpContext类及其派生类

在你的控制器中不要引用到HttpContext以及它的派生类。这让你能比较容易地进行控制器的单元测试。如果你需要访问与HttpContext相关的对象比如User、QueryString、Cookie等，你可以使用自定义的行为过滤器（博客园的老赵有一篇文章对这一条进行了深入的论述，并提出了自己的解决方案，建议阅读）或者创建一些接口和容器，并把它传入控制器的构造函数。例如，下面的路由：

routes.MapRoute(
    "Dashboard",
    "Dashboard/{tab}/{orderBy}/{page}",
    new {
        controller = "Story",
        action = "Dashboard",
        tab = StoryListTab.Unread.ToString(),
        orderBy = OrderBy.CreatedAtDescending.ToString(),
        page = 1
    }
);

而控制器的行为方法则定义为：

[AcceptVerbs(HttpVerbs.Get),OutputCache(CacheProfile = "Dashboard"),UserNameFilter]
public ActionResult Dashboard(string userName, StoryListTab tab, OrderBy orderBy, int? page) {
}

UserNameFilter这个过滤器负责传递UserName：

public class UserNameFilter : ActionFilterAttribute {
    public override void OnActionExecuting(ActionExecutingContext filterContext) {
        const string Key = "userName";

        if (filterContext.ActionParameters.ContainsKey(Key)) {
            if (filterContext.HttpContext.User.Identity.IsAuthenticated) {
                filterContext.ActionParameters[Key] = filterContext.HttpContext.User.Identity.Name;
            }
        }

        base.OnActionExecuting(filterContext);
    }
}

[更新：一定要明确你已经对控制器或者是对控制器中的行为添加了 Authorize 属性，参见原文评论。]

8. 用行为控制器来转换行为方法参数

用行为过滤器来把传入值转换为你的控制器行为方法参数，再看一下 Dashboard方法的代码，我们以 Enum 类型接受 tab 和 orderBy这两个参数。

[AcceptVerbs(HttpVerbs.Get), OutputCache(CacheProfile = "Dashboard"), StoryListFilter]
public ActionResult Dashboard(string userName, StoryListTab tab, OrderBy orderBy, int? page) {
}

过滤器 StoryListFilter 将负责把它由 路由的值/查询字符串 转换为适当的数据类型。

public class StoryListFilter : ActionFilterAttribute {
    public override void OnActionExecuting(ActionExecutingContext filterContext) {
        const string TabKey = "tab";
        const string OrderByKey = "orderBy";

        NameValueCollection queryString = filterContext.HttpContext.Request.QueryString;

        StoryListTab tab = string.IsNullOrEmpty(queryString[TabKey]) ?
                            filterContext.RouteData.Values[TabKey].ToString().ToEnum(StoryListTab.Unread) :
                            queryString[TabKey].ToEnum(StoryListTab.Unread);

        filterContext.ActionParameters[TabKey] = tab;

        OrderBy orderBy = string.IsNullOrEmpty(queryString[OrderByKey]) ?
                            filterContext.RouteData.Values[OrderByKey].ToString().ToEnum(OrderBy.CreatedAtDescending) :
                            queryString[OrderByKey].ToEnum(OrderBy.CreatedAtDescending);

        filterContext.ActionParameters[OrderByKey] = orderBy;

        base.OnActionExecuting(filterContext);
    }
}

你也可以用自定义模型绑定器来达到同样的目的。如果要那样做的话，你需要为每个枚举创建一个独立的模型绑定器，而不是用一个行为过滤器来处理所有的枚举参数。用模型绑定器还有一个问题，一旦你注册了一个类型，在行为中它就总是被使用，而行为过滤器则是可以根据需要选择使用的。

9. 行为过滤器的位置

如果你要对你的控制器的所有行为方法应用同一个行为过滤器，你可以把这个过滤器放在控制器的定义上而不必给每个行为方法应用。如果你要对你的所有控制器应用同一个行为过滤器，你应该创建一个基控制器，对它应用该过滤器，并让所有的控制器继承这个基控制器。例如 story 控制器应该只在用户已经登陆的情况下才可以使用，并且我们需要把当前用户的用户名传入 story 控制器下的方法，另外Story控制器应该压缩返回的数据：

[Authorize, UserNameFilter]
public class StoryController : BaseController {
}

[CompressFilter]
public class BaseController : Controller {
}

但是如果继承的层次达到或者高于2层，应该另找方法来应用过滤器。最新的 Oxite 代码里有一些非常出色的动态应用过滤器的方法，我强烈推荐你去看一下。

10. 小心使用UpdateModel

我要再次强调 Justin Ethredge 在他的文章中已经提过的这个问题，开发中一定小心，避免陷进UpdateModel的陷阱里去。

11.控制器不要包含任何域逻辑

控制器应该只负责：

• 验证输入
• 调用Model层来为显示视图准备数据
• 返回视图或者跳转到另一个行为

如果你在控制器中坐了其它的事情，那就说明你把它们放错了地方。你在控制器中坐的这些事情或许更应该交给模型去处理。只要你遵守了这条规则，你的每个控制器方法代码应该不会超过20到25行。 Ian Cooper 有一篇很棒的文章《Skin Controller Fat Model》，有空的时候你一定要读一下。

12. 避免使用 ViewData，尽量使用ViewData.Model

依赖于数据字典不仅使你的代码难以重构，而且你还不得不在试图中编写转换代码。实际上即使你给你的控制器的每个方法都单独编写一个类作为数据模型，那也是完全可以的。如果你觉得编写这些视图数据模型类是一项非常乏味的工作的话，你可以使用 MVCContrib 项目中 ViewDataExtensions，它包含一些用于返回强类型对象的不错的扩展。但是如果你的视图数据的数据字典中包含了多个数据类型的话，你还是没办法摆脱数据字典和他的字符串名。

13. 用 PRG 模式来修改数据

Tim Barcz, Matt Hawley, Stephen Wather 甚至 Scott Gu 都写了这方面的文章，你可以在 这里、这里、这里和这里找到它们。这个模式的一个问题是当一项验证失败或者发生任何错误的时候，你不得不把ModelState复制到TempData里面。如果你是手动来做这件事，请不要再那样做了，你可以用行为过滤器自动处理它，就像下面这样：

[AcceptVerbs(HttpVerbs.Get), OutputCache(CacheProfile = "Dashboard"), StoryListFilter, ImportModelStateFromTempData]
public ActionResult Dashboard(string userName, StoryListTab tab, OrderBy orderBy, int? page)
{
    //Other Codes
    return View();
}

[AcceptVerbs(HttpVerbs.Post), ExportModelStateToTempData]
public ActionResult Submit(string userName, string url)
{
    if (ValidateSubmit(url))
    {
        try
        {
            _storyService.Submit(userName, url);
        }
        catch (Exception e)
        {
            ModelState.AddModelError(ModelStateException, e);
        }
    }

    return Redirect(Url.Dashboard());
}

还有行为过滤器的代码：

public abstract class ModelStateTempDataTransfer : ActionFilterAttribute {
    protected static readonly string Key = typeof(ModelStateTempDataTransfer).FullName;
}

public class ExportModelStateToTempData : ModelStateTempDataTransfer {
    public override void OnActionExecuted(ActionExecutedContext filterContext) {
        //Only export when ModelState is not valid
        if (!filterContext.Controller.ViewData.ModelState.IsValid) {
            //Export if we are redirecting
            if ((filterContext.Result is RedirectResult) || (filterContext.Result is RedirectToRouteResult)) {
                filterContext.Controller.TempData[Key] = filterContext.Controller.ViewData.ModelState;
            }
        }

        base.OnActionExecuted(filterContext);
    }
}

public class ImportModelStateFromTempData : ModelStateTempDataTransfer {
    public override void OnActionExecuted(ActionExecutedContext filterContext) {
        ModelStateDictionary modelState = filterContext.Controller.TempData[Key] as ModelStateDictionary;

        if (modelState != null) {
            //Only Import if we are viewing
            if (filterContext.Result is ViewResult) {
                filterContext.Controller.ViewData.ModelState.Merge(modelState);
            } else {
                //Otherwise remove it.
                filterContext.Controller.TempData.Remove(Key);
            }
        }

        base.OnActionExecuted(filterContext);
    }
}

MVCContrib 项目也有这个功能，但是我不喜欢他们在用一个单独类来处理的方式，我喜欢对“哪个方法输出”和“哪个方法输入”有更多的控制权。

14. 为你的视图模型创建父类层并用行为过滤器来构成公共部分

为你的视图模型类编写一个父类层，并用过滤器来构成它的公共部分。例如我正在开发的这个非常小的应用程序，我需要知道用户是否已经认证，已及用户名。

public class ViewModel {
    public bool IsUserAuthenticated {
        get;
        set;
    }

    public string UserName {
        get;
        set;
    }
}

还有行为过滤器的代码：

public class UserNameFilter : ActionFilterAttribute {
    public override void OnActionExecuting(ActionExecutingContext filterContext) {
        const string Key = "userName";

        if (filterContext.ActionParameters.ContainsKey(Key)) {
            if (filterContext.HttpContext.User.Identity.IsAuthenticated) {
                filterContext.ActionParameters[Key] = filterContext.HttpContext.User.Identity.Name;
            }
        }

        base.OnActionExecuting(filterContext);
    }
}

public class ViewModelUserFilter : ActionFilterAttribute {
    public override void OnActionExecuted(ActionExecutedContext filterContext) {
        ViewModel model;

        if (filterContext.Controller.ViewData.Model == null) {
            model = new ViewModel();
            filterContext.Controller.ViewData.Model = model;
        } else {
            model = filterContext.Controller.ViewData.Model as ViewModel;
        }

        if (model != null) {
            model.IsUserAuthenticated = filterContext.HttpContext.User.Identity.IsAuthenticated;

            if (model.IsUserAuthenticated) {
                model.UserName = filterContext.HttpContext.User.Identity.Name;
            }
        }

        base.OnActionExecuted(filterContext);
    }
}

正如你所看到的，如果在控制器里预先设定它的话，它并没有替换模型，而是在它发现模型与它符合的时候，才作为控制器的公共部分起作用。另一个好处是，由于视图只依赖于父类层，你可以不必返回具体的model，而只需要返回 View()。

继续阅读：《ASP.NET MVC 最佳实践（三）》

相关日志

• 2009-07-08 -- ASP.NET MVC 最佳实践（四）
• 2009-07-07 -- ASP.NET MVC 最佳实践（三）
• 2009-06-28 -- ASP.NET MVC 最佳实践（一）
• 2009-04-13 -- [翻译]ASP.NET MVC动手实验1-3：开发ASP.NET MVC应用
• 2009-04-09 -- [翻译]ASP.NET MVC动手实验1-2：创建ASP.NET MVC应用
• 2009-04-09 -- [翻译]ASP.NET MVC动手系列1-1：ASP.NET MVC概述
• 2009-07-05 -- PHP 5.3.0 发布
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2009-04-30 -- VS2008 中 JS IntelliSense出错的解决
• 2008-06-22 -- 动易SW中的一个严重但不影响使用的bug（二）

1. 创建UrlHelper的扩展方法来生成url

尽量避免以字符串方式直接传递controller, action 或者 route name，最好是为创建为UrlHelper创建扩展方法来封装url。例如：

public static class UrlHelperExtension {
    public static string Home(this UrlHelper helper) {
        return helper.Content("~/");
    }

    public static string SignUp(this UrlHelper helper) {
        return helper.RouteUrl("Signup");
    }

    public static string Dashboard(this UrlHelper helper) {
        return Dashboard(helper, StoryListTab.Unread);
    }

    public static string Dashboard(this UrlHelper helper, StoryListTab tab) {
        return Dashboard(helper, tab, OrderBy.CreatedAtDescending, 1);
    }

    public static string Dashboard(this UrlHelper helper, StoryListTab tab, OrderBy orderBy, int page) {
        return helper.RouteUrl("Dashboard", new { tab = tab.ToString(), orderBy = orderBy.ToString(), page });
    }

    public static string Update(this UrlHelper helper) {
        return helper.RouteUrl("Update");
    }

    public static string Submit(this UrlHelper helper) {
        return helper.RouteUrl("Submit");
    }
}

这样，如果在你的视图中有类似这样的代码：

    <%= Html.ActionLink("Dashboard", "Dashboard", "Story") %>
    <a href="<%= Url.RouteUrl("Profile")%>">Profile</a>

你就可以用下面的这种方式来代替它们：

<a href="<%= Url.Dashboard() %>">Dashboard</a>
<a href="<%= Url.Profile() %>">Profile</a>

在控制器里也可以用，原来的代码：

return RedirectToAction(
    "Dashboard",
    "Story",
    new {
        tab = StoryListTab.Favorite,
        orderBy = OrderBy.CreatedAtAscending,
        page = 1
    }
);

可以写成：

return Redirect(Url.Dashboard(StoryListTab.Favorite,
                                OrderBy.CreatedAtAscending, 1));

当然了，你也可以使用 future assembly 中的强类型版本来获得控制器、方法以及参数值，或者创建你自己的强类型版本以免将来进行重构时太过于痛苦，但是请一定记住，它没有官方支持并且将来有可能会发生改变。上面的方式也可以和强类型版本搭配使用。当然“另外增加一个间接层”（Scott Ha 喜欢用的引语）有一些好处，在编写单元测试的时候还有一个好处是你只需处理 RedirectResult 而无须同时处理 RedirectResult 和 RedirectToRouteResult。

2. Create Extension Method of UrlHelper to map your JavaScript, Stylesheet and Image Folder

默认情况下 ASP.NET MVC 创建Content、Scripts文件夹来做这些事，这一点我不喜欢，我更喜欢下面的这种文件夹结构，这样在IIS里我可以只让静态文件缓存在Assets文件夹而不是多个文件夹：

• Assets
• +images
• +scripts
• +stylesheets

无论是结构是什么样的，还是要为UrlHelper创建一些扩展方法来映射这些文件夹，以便你在视图中可以很方便地指向它们，这样以后如果你要改变目录结构，你就无须做大量查找替换的工作。我还建议你为所有经常在视图中用到的资源创建UrlHelper的扩展方法。例如：

public static string Image(this UrlHelper helper, string fileName) {
    return helper.Content("~/assets/images/{0}".FormatWith(fileName));
}

public static string Stylesheet(this UrlHelper helper, string fileName) {
    return helper.Content("~/assets/stylesheets/{0}".FormatWith(fileName));
}

public static string NoIcon(this UrlHelper helper) {
    return Image(helper, "noIcon.png");
}

然后当需要用到这些路径的时候，原来的代码

<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

就可以写成这样：

<link href="<%= Url.Stylesheet("site.css")%>" rel="stylesheet" type="text/css" />

3. 中使用启动加载器

我在以前的文章中已经提到过这一点，总的来说就是：如果你要在 Global.asax 的 Application_Start 中做很多处理，比如 注册路由规则(Routers)、注册控制器工厂(Controller Factory)、模型绑定(Model Binders)、视图引擎(View Engine)、启动程序级的特定后台服务或者为特定部分创建独立任务等，那就用启动加载器来执行这些操作。这会让你的代码更简洁，更可测。这一点在用 ASP.NET MVC 构建门户级应用时尤其有用，因为这类应用中的每个模块都可能有一些不影响到其他模块的启动初始化操作。但是如果你只是开发一个小应用，上面提到的这些对你来说都不是问题，你当然也可以继续用默认的 global.asax。

4. 不要硬编码对依赖注入容器的调用，用通用服务定位器来代替。

不要让任何特定的依赖注入容器(DI Container)打乱你的代码，更好的办法是使用通用服务定位器(Common Service Locator)，它是对底层依赖注入进行的抽象，已经支持几乎所有流行的依赖注入容器，它让你可以任意替换底层的依赖注入对象而无须修改代码，因为每个依赖注入容器都具有一些不同于其它容器的特性。Tim Barcz 最近写了一篇关于这个话题的很棒的文章，我不太明白他为什么没有提到我们对我们偏爱的依赖注入容器有多痴迷。通用服务定位器对绝大部分常用情景都提供了支持，而对一些特殊情况比如对已实体化对象的依赖注入，我印象里有 StructureMap、Ninject 和 Unity，你可以调用静态方法 ServiceLocator.Current.GetInstance 来代替。 通用服务定位器 是 Jeremy D Miller 发起的 依赖注入容器开发者(the DI Containers creators)的集体作品。

用通用服务定位器创建控制器工厂非常容易：

public class CommonServiceLocatorControllerFactory : DefaultControllerFactory {
    protected override IController GetControllerInstance(Type controllerType) {
        return (controllerType == null) ? base.GetControllerInstance(controllerType) : ServiceLocator.Current.GetInstance(controllerType) as IController;
    }
}

我希望 MVCContrib 的成员们也用这样的方式，而不是为每个容器创建一个独立的控制器工厂。

5. 用恰当的的AcceptVerbs属性来修饰你的控制器方法

ASP.NET MVC 比 Web Forms 更容易遭受攻击。所以务必让对数据进行修改的控制器方法只接受 Post 方式请求（HttpVerbs.Post）。如果安全对你来说至关重要，你还可以用 ValidateAntiForgeryToken 或者 Captcha。我强烈推荐 Derik Whittaker 写的一篇 很好的文章 以及视频介绍了怎么把 reCaptcha 整合到 ASP.NET MVC 应用程序（作者注：不要错过了 DimeCasts.net 的另一个短片，我从中学到了很多）。我的经验法则是对所有数据修改方法使用 HttpVerbs.Post，对所有数据读取操作使用 HttpVerbs.Get。

6. 用OutputCache修饰你的频繁调用的操作方法

当你需要返回不频繁更新的数据时使用 OutputCache 属性，最常见的例子是首页、Feed等。你在返回Html以及Json数据类型的方法中都可以使用这个属性。在使用的时候，注意只指定CacheProfile参数，不要指定任何其它东西，用 web.config 输出缓存控制节可以很好地调整它。例如：

[AcceptVerbs(HttpVerbs.Get), OutputCache(CacheProfile = "Dashboard")]
public ActionResult Dashboard(string userName, StoryListTab tab, OrderBy orderBy, int? page) {
}

在 web.config 文件中的配置：

<system.web>
    <caching>
        <outputCacheSettings>
            <outputCacheProfiles>
                <clear/>
                <!-- 15 Seconds -->
                <add
                    name="Dashboard"
                    duration="15"
                    varyByParam="*"
                    location="Client"
                    />
            </outputCacheProfiles>
        </outputCacheSettings>
    </caching>
</system.web>

请继续阅读：《ASP.NET MVC 最佳实践（二）》

相关日志

• 2009-07-08 -- ASP.NET MVC 最佳实践（四）
• 2009-07-07 -- ASP.NET MVC 最佳实践（三）
• 2009-07-01 -- ASP.NET MVC 最佳实践（二）
• 2009-04-13 -- [翻译]ASP.NET MVC动手实验1-3：开发ASP.NET MVC应用
• 2009-04-09 -- [翻译]ASP.NET MVC动手实验1-2：创建ASP.NET MVC应用
• 2009-04-09 -- [翻译]ASP.NET MVC动手系列1-1：ASP.NET MVC概述
• 2009-07-05 -- PHP 5.3.0 发布
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2009-04-30 -- VS2008 中 JS IntelliSense出错的解决
• 2008-06-22 -- 动易SW中的一个严重但不影响使用的bug（二）

Whatever:hover 是一个小小的脚本，它可以迅速、自动地为IE6，IE7，IE8添加标准的 :hover、:active 和 :focus 伪类支持。第三版引入了 ajax 支持，意味着通过 javascript 动态添加到文档中的任意html元素也同样可以在IE中响应 :hover、:active 和 :focus 样式。

如果你已经对使用 whatever:hover 很熟练，现在只是想下载它，你可以直接跳转到获取最新版本。而对于其它想深入了解它的人，请继续阅读。

使用方法

你只需要将 whatever:hover 链接到 body 元素就可以了。注意这里的 behavior 属性中的 URL 是相对于 html 文件的，而不是像背景图片地址一样是相对于 css 文件的路径。

body { behavior: url("csshover3.htc"); }

工作原理

所有的浏览器都提供了一些方法，让你用 javascript 查询样式表中定义好的规则或者动态地插入新规则。正常情况下，IE 对所有它不支持的规则返回 “unknown”。例如：一条关于 “div p:first-child” 的规则将会被改成 "div p:unknown”， 而一条关于 "p a[href]” 的规则将整体地作为 "unknown" 返回。幸运的是 IE 把 :hover 伪类认为是它支持的样式规则，并且会将它保持原样。

IE 还支持所谓的行为（behaviors），不仅包括预定义的功能比如动态加载内容或者持续数据存储，也包括你可以在一个后缀为 .htc 或者 .hta 为的文件中创建的自定义行为。这些行为通过 css 实现与 html 节点关联，并“增强”这些被指定行为中的样式选择器选中的节点。

综上所述，创建一个行为来查找样式表中 IE 不支持的元素，并以一些其它手段“欺骗”影响的到元素让它们应用样式表中关联的样式。这个复杂的操作中包含的步骤大致可以描述为：

• 在所有的样式表中搜索 IE 不支持的 :hover 伪类规则；
• 插入一条 IE 支持的，例如带 class 名称的新规则；
• 最后，设置脚本事件来切换目标元素的 class 名称。

通过这种方式，:hover、:active 和 :focus 就可以得到（IE 的）支持了。而作为开发人员，你除了包含这个行为以外不需要做任何事。所有的工作都将自动完成。

与第1版和第2版比较，第3版对动态加入的 html (ajax) 也同样支持。另外还有一个改动是原来第1版和第2版采用的是在页面加载事件中主动搜索影响到的元素，而在第3版中改为借助表达式（expressions）让节点自己回调。关于这部分你可以阅读带注释的版本获取更多细节。

示例：菜单效果

:hover 一个很常见的用途就是用列表创建菜单系统。用这个行为来创建一个两级的菜单系统是再容易不过的事情了。例如，如果你从 suckerfish dropdown （一个带有下拉菜单的网页，关于这个页面和效果的描述，参见 A List Apart article）上把 javascript 删除掉了，它仍然能正常工作。

但是多级的菜单需要做不同的处理。这是由于 IE 不支持子选择符 ‘>’，子选择符可以完美地显示下级子菜单，而不是连更深层的菜单一起显示出来。

li:hover > ul { /* 在 IE 下无效 */ }

有一种可供选择的方法可以只使用简单的子孙选择符来模拟这种行为（主要是针对 IE）。还有种不太成熟的方法是应用多个类定义，但是更简单的方法是利用 CSS 选择符的不同优先级(specificity).每一条 css 规则都有特定的重要等级，这个等级可以简单地根据一条规则中的不同元素来计算。以元素名称为基准值 “1″，类、伪类和属性选择符重要性（权重）为 “10″，然后元素 id 为 “100″。比如下面的例子。

ul ul { display:none; }
li:hover ul { display:block; }

这样做能够生效的原因，就是选择符的优先级不同。第一条规则只包含两个元素名称，这样它的权重值（优先级）就是2。第二条规则也包含两个元素名称，但是 :hover 伪类的权重值（优先级）是10，所以加起来的值就是12。由于第二条规则比第一条规则优先，因此被鼠标滑过的 li 元素内部的 ul 将被显示。

那么这个对于解决 > 子选择符的问题有什么帮助呢？是这样，如果一条权重值（优先级）为12的规则定义所有的子菜单都要显示，我们只需要创建一条权重值（优先级）大于12的规则来把下一级的菜单隐藏起来。然后，那个菜单又需要另一条优先级更高的规则来显示，一直循环下去。对于3级的导航来说，需要的 css 代码短得让人意外：

/* 2 和 13 */
ul ul, li:hover ul ul { display:none; }
/* 12 和 23*/
li:hover ul, li:hover li:hover ul { display:block; }

这种方式可以无需附加任何类样式实现无限级嵌套菜单（4级或更多级需要需要继续添加更多规则）。

脚本事件的性能优化

现在还剩下一件事需要考虑。.htc 文件在所有样式表文件中搜索 :hover 规则，并且按照 css 文件的定义对所有它认为需要用脚本处理停留效果的元素附加鼠标滑过和移出事件。为了找出这些(被影响的)元素，所有去掉 :hover 伪类选择到的元素以及被 :hover 伪类修饰的元素本身，都会被选择并且进行处理。一条类似这样的规则

#menu li:hover ul { ... }

…将会被调整成下面这样来查找所有可能需要响应鼠标滑过事件的元素：

#menu li  { ... }

很显然这会选中整个菜单中的每一个 <li> 元素，并对其中一大堆不需要鼠标事件（在当前情况下）的元素附加事件。这个问题可以很轻松地得到解决，我们可以对包含子菜单的列表元素添加一个类样式，比如 "folder"。这样一来，调整（去除:hover）之后的样式规则变成了

#menu li.folder { ... }

…可以高效地直接选中那些真正需要事件的元素。缺点是为了改善脚本的性能，你需要添加一个类样式（这个类样式的添加纯粹是为了视觉效果，而且放弃了 li:hover 方式实现菜单的通用性）。但是，从另一个角度考虑的话，也许你反正也要用一个类来把这些列表元素与普通元素区别开来，那就无所谓了。

为了直观地说明上述问题，请查看综合示例。希望你喜欢。

文件下载及更新说明：

文件下载:

v3.00.081222 (:hover, :active 和 :focus)

下载 (已压缩, 2.5K) | 下载 (源码, 9K) | 查看

v1.42.060206 (:hover 和 :active) 下载 | 查看

v2.02.060206 (:hover, :active 和 :focus) 下载 | 查看

说明:

说明1：如果在使用 whatever:hover 的过程中遇到问题，请 让我知道! 由于第3版比较新，可能会存在一些无法预知的问题。

说明2：确保你的web服务器把 htc 文件按照 text/x-component 的 mime类型发送。关于这方面的更多信息，可以参阅 Aldo的个人博客。如果你的主机支持 .htaccess 文件，可以添加下面这行代码：

AddType text/x-component .htc

说明3：第三版支持在 IE6 以上版本中使用 :hover 和 :active，对 IE7 和 IE8 还支持 :focus。由于表达式（expression)在 IE8 标准模式下不支持，所以 whatever:hover 只在 IE8 的 怪异模式(Quirks Mode) 下运行。实际上在 IE8 标准模式中也根本不需要这个脚本了。

说明4：如果使用这个脚本之后网页变慢，请尝试对更加具体的选择符运用 :hover 伪类，比如添加元素名称、使用元素id，或者类名称。例如："div#someId li.group:hover”, 而不要只用 ".group:hover”。这样能够很大程度上减少搜索和解析时间，并能减少需要应用的事件。请阅读 性能优化 获得更多信息。

说明5：第2版也支持 :focus 伪类，仅限于 A、INPUT、和 TEXTAREA元素。但是，由于类似 "input:focus" 这样的选择符被 IE 的样式表对象返回为 "input:unknown"，脚本将基于这些 "unkonwn" 规则来附加获得焦点和失去焦点事件，这个问题同样存在于其它浏览器无法识别的伪类。因此，使用2.0版本的时候，你无法在 IE 中对 A、INPUT和 TEXTAREA 元素应用浏览器无法识别的伪类，因为他们统统都会被处理成获得焦点样式。如果你确实需要这个功能，请使用1.4版或者3.0版。

在 Naar Voren （一个关于web开发的德语网站）上，有我用德语写的一篇关于用纯css 在菜单系统中使用 :hover 的更详细的文章（德语版）。对于不懂德语的网友，可以查看该文章的英文翻译版。

非常感谢 Arnoud Berendsen 和 Martin Reurings 提供的创意和支持，感谢 Robert Jan Verkade 和 Naar Voren 上的朋友们发表我的文章，还要感谢 Eric Meyer 对这个脚本给予支持和在他的书里提到我的这个网页（指 《Eric Meyer谈CSS（卷2）》 第六章》——译者注）。

——————————————————————————

作者：peter ned 原文：whatever:hover

译者：小李刀刀 首发：Whatever:hover – 无需javascript让IE支持丰富伪类

转载请注明出处。

相关日志

• 2009-12-21 -- web开发从头说起：理解css盒模型
• 2009-12-16 -- 前台开发从头说起：谈谈CSS选择符
• 2009-12-15 -- 前台开发从头说起：关于web标准化
• 2009-04-13 -- 简单、通用的JQuery Tab实现
• 2006-04-04 -- 动态实现指定图片半透明及鼠标事件
• 2009-04-16 -- 来自微软站点的纯CSS下拉菜单
• 2009-04-09 -- [翻译]ASP.NET MVC动手实验1-2：创建ASP.NET MVC应用
• 2006-03-28 -- CSS:模拟Windows窗口及DIV居中
• 2005-12-12 -- 实践：用Div+CSS重构网页
• 2005-11-29 -- CSS学习之综合运用

今天在 百度知道 上给人回答问题的时候，遇到一个要做复杂替换的问题，而且提问者明确说是在 Dreamweaver 里面做。我终于不懒了一次，上 adobe 的网站上查了一下。把 Dreamweaver 里面的正则表达式部分好好看了一遍。全部内容如下：

下表列出了在正则表达式中使用的特殊字符、其含义和用法示例。若要搜索包含该表中某一特殊字符的文本，请在特殊字符前面附加一个反斜杠，令其转义。例如，若要在 some conditions apply* 短语中搜索实际的星号，您的搜索模式应类似于：apply\*。如果您没有令星号转义，您将找到“apply”的所有匹配项（以及“appl”、“applyy”和“applyyy”的所有匹配项），而不只是后面跟有星号的那些匹配项。

使用括号在正则表达式内分隔出以后要引用的分组。然后在“替换”域中使用 $1、$2、$3 等来引用第一个、第二个、第三个和更后面的括号分组。

例如，通过搜索 (\d+)\/(\d+)\/(\d+) 并用 $2/$1/$3 替换它，可以在由斜杠分隔的日期中交换日和月（因此可以在美国样式日期和欧洲样式日期之间进行转换）。

相关日志

• 2009-06-20 -- 工行U盾在Windows 7 x64版下的使用
• 2009-04-16 -- QQ2009正式版发布
• 2008-06-09 -- 参加火狐3下载日，帮助Firefox创造世界记录！
• 2005-12-03 -- Visual Studio 2005体验感受
• 2005-06-13 -- 第九届中国国际软件博览会