1. cshtm优化
var style = (status.ID == planViewModel.StatusFirstPositive.ID || status.ID == planViewModel.StatusFirstOnboard.ID ? "margin-left: 17px; " : "")
+ (status.ID == planViewModel.StatusLastOnboard.ID ? "margin-right: 17px; " : "");
<td>
@if (status.IsDisplayedOnKanban)
{
<div class="@(status.IsDisplayedOnKanban ? "mini-status-indicator-status-onboard" : "mini-status-indicator-status") @(status.ID == planViewModel.StatusHighlightedID ? "bold twinkle" : "")"
style="@style; border-color: @(status.Color); ">
@status.Title
@if (status.ID == planViewModel.StatusHighlightedID)
{
<div class="withnotices" style="margin-left: -2px; ">
<span class="notice">重点状态</span>
</div>
}
</div>
}
else
{
<div class ="@(status.ID == planViewModel.StatusHighlightedID ? "bold twinkle" : "")"
style ="color: @status.Color; @style; border-left: 1px solid #AAA; width: 18px; float: left; ">
@status.Title
@if (status.ID == planViewModel.StatusHighlightedID)
{
<div class="withnotices" style="margin-left: -2px; ">
<span class="notice">重点状态</span>
</div>
}
</div>
}
</td>
优化后:
var style = (status.ID == planViewModel.StatusFirstPositive.ID || status.ID == planViewModel.StatusFirstOnboard.ID ? "margin-left: 16px; " : "")
+ (status.ID == planViewModel.StatusLastOnboard.ID ? "margin-right: 19px; " : "");
style += status.IsDisplayedOnKanban ? "border-color: " + status.Color + ";" : "border-left: 1px solid #AAA; width: 18px; float: left; ";
var Class = status.IsDisplayedOnKanban ? "mini-status-indicator-status-onboard " : "";
Class += status.ID == planViewModel.StatusHighlightedID ? "bold twinkle" : "";
<td>
<div class="@Class" style="@style">
@status.Title
@if (status.ID == planViewModel.StatusHighlightedID)
{
<div class="withnotices" style="margin-left: -2px;">
<span class="notice">重点状态</span>
</div>
}
</div>
</td>
判断思路很简单,就是:任何两个地方长相相同,则一定有可以合并优化的地方。
解决思路:
A.不断找到不同处,在前面设置变量进行比较性定义(即使用?:对)
如果不是html而是CS代码,那么就是不断生成变量,或者函数的参数。
B.修改一个地方后,就刷新验证是否成功
代码优化实际上是“重构”,尽管代码变短了,但功能不变。所以要不断验证功能是不是变化了。不要最后才验证,复杂情况下有风险。
2. 切换参数完全相同的两个不同函数
container.InnerHtml += showImage
? MFCUI.ImageLink(text,
link,
displayAsLink: displayAsLink,
grayTextTitle: grayTextTitle,
displayAsBoldTextOnPage: page,
title: title,
imgUrl: imgUrl,
cssClass: MFCUI.HoverTwinkleTriggerBodyClass(link.ACT().Substring(1).Replace("/", "-")) + " " + cssClass, //cssClass: this link will tinkle when MFCUI.HoverTwinkleTrigger(link.ACT().Substring(1).Replace("/", "-")) is hovered.
showText: showText,
returnTo: page)
: MFCUI.Link(text,
link,
displayAsLink: displayAsLink,
grayTextTitle: grayTextTitle,
displayAsBoldTextOnPage: page,
title: title,
cssClass: MFCUI.HoverTwinkleTriggerBodyClass(link.ACT().Substring(1).Replace("/", "-")) + " " + cssClass, //See comments above.
showText: showText,
returnTo: page);
代码里边一直有上面这段函数,上下一样,就是切换一下ImageLink和Link。
杀代码的一个原则是:任何两个长相相同的代码,一定有优化的潜力和必要(上上下下改动几次,很可能上下的参数就不一样了)。
修改后的结果很简单:
container.InnerHtml += MFCUI.ImageLink(text,
link,
displayAsLink: displayAsLink,
grayTextTitle: grayTextTitle,
displayAsBoldTextOnPage: page,
title: title,
imgUrl: imgUrl,
showImage: showImage,
cssClass: MFCUI.HoverTwinkleTriggerBodyClass(link.ACT().Substring(1).Replace("/", "-")) + " " + cssClass, //cssClass: this link will tinkle when MFCUI.HoverTwinkleTrigger(link.ACT().Substring(1).Replace("/", "-")) is hovered.
showText: showText,
returnTo: page);
改完了可能看上去很简单,当时可是断断续续犹豫了几天才想起来怎么改的。
而且实际上修改的时候才想起来,其实Link里边本来就是调用ImageLink(....showImage: false, ....)产生的。