请问*****相同的业务 不同的业务外观****** 大家的处理方式是什么？

Question

大概是这样的
上面这三个类别  
第一个是展示第一条新闻和新闻图片和新闻介绍 然后下面再展示两个条新闻 
 第二个只展示一条新闻没有图片 也没有下面的新闻列表  
第三个 只有个新闻列表 
其实都是通过类别 获得新闻 然后展示 只不过展示的外观不同  因为网站里面有很多这样相似的内容  差不多就这三类 
第一种方法  提出三个用户控件 每个样式一种  这样就要写三次绑定  以后没多出一种外观样式 就要多弄个控件 然后写绑定
第二种方法  我现在用的 因为展示都业务都是相同的 就是通过类别获得新闻来展示  所以我只用了一个用户控件  然后在用户控件里通过配置大量的属性 来决定怎么展示 
上丑陋的demo
先看用户控件的属性 贴一小部分  其实弄了特别多属性    /// <summary>
    /// 条数
    /// </summary>
    public int Top
    {
        get;
        set;
    }    /// <summary>
    /// 是否显示图片
    /// </summary>
    public bool IsSHowPic
    {
        get;
        set;
    }
    /// <summary>
    /// 是否显示第一条
    /// </summary>
    public bool IsShowTop
    {
        get;
        set;
    }    /// <summary>
    /// 类别是图片还是汉字
    /// </summary>
    public bool IsPic
    {
        get;
        set;
    }    /// <summary>
    /// 蓝more的类
    /// </summary>
    private string bluemoreclass = "more";
    public string BlueMoreClass
    {
        get
        {
            return bluemoreclass;
        }
        set
        {
            bluemoreclass = value;
        }
    }    /// <summary>
    /// 绿more的类
    /// </summary>
    private string greenmoreclass = "more1";
    public string GreenMoreClass
    {
        get
        {
            return greenmoreclass;
        }
        set
        {
            greenmoreclass = value;
        ｝
｝
通过属性 控制怎么展示  也只贴一部分 
    <div class="<%=titleCalss %>"> <!-- 类别的CSS -->
    <%if (IsPic == true) //是用图片展示类别还是文字 
      { %>
        <img src="../img/<%=imgPath %>" /><!-- 类别图片的路径 -->
        <%} %>
        <%else
        { %>
          
         <%=GetCname();//类别名字 %>
                
        <%} %>
     
          <% if (IsSHowBlueMore == true) //是否展示蓝色的more
               { %>
            <p class="<%=BlueMoreClass %>"> <!-- more类的CSS -->
                <a href="NewsList.aspx?cid=<%=GetNid()%> ">
                    <img src="../img/more.png" /></a></p>
            <%} %>
        
    </div>
    
    
    
    
    <div class="<%=news%>">  <!-- 新闻加列表的类 -->
    
    <%if (IsShowTop == true) //是否显示第一条
      { %>
    
    <%if (IsSHowPic == true) //是否展示第一条的图片
通过配置属性来展示 <uc:VideoPart ID="VP7" runat="server" CatId="BUSINESSTECHNOLOGY" Morepath="more.png"
                        ClassName="ssntitle" TopNum="4" IsBigTitle="big" Jclass="ssn_bar" />
                    <uc:VideoPart ID="VP8" runat="server" CatId="ENTERTAINMENTCULTURE" Morepath="more.png"
                        ClassName="ssntitle" TopNum="4" IsBigTitle="big" Jclass="ssn_bar" />
现在的问题是 目前只有三种外观 但是没增加一种外观 用户控件里的逻辑判断 就要增加 恶心的if else  还有多很多属性 缪军大叔给了我解决方法 受益匪浅 特别鸣谢~  不过还是想征集下大家的思路  从服务器端渲染UI, 是不是最适合的方案呢？
请问怎么解决这种相同的业务 不同的业务外观 这样的问题呢？  谢谢~~

Answer 1

小吴童鞋你这啥设计啊你在不同的地方有到这个东西头部图片，读取的类别等等都会有所不同。。这样做用户控件带的的共用性根本不算大反而会增加很多逻辑判断造成加载速度过慢建议直接输出HTML吧。

Answer 2

服务端拼N种不同控件的HTML（传递数据源参数）前端也是类似你这种判断来绑定哪种HTML 

Answer 3

你用控件肯定不灵活还浪费性能  直接自己写样式，用js或C#控制样式

Answer 4

引用 8 楼 microtry 的回复:引用 7 楼 porschev 的回复:
建议直接输出HTML吧呵呵,这也是我的建议,不过要看在哪里输出了,是服务器端拼还是js在客户端拼

Answer 5

拼接HTML的一种方式 可以模拟这种来 前台if(xx)
<%=FunctionName() %>

Answer 6

你不用急着求一个答案，可以退回来看。OOA 中有个重要的原则，抽象  抽象的意义在于分离变化你能找到你的问题中变化的部分么？

Answer 7

其实你这个变化的部分只是呈现形式不同，直白的说法就是HTML代码段不同而这个是没有办法抽象的，但也不应该硬编码写死在代码中。而是写成模板的形式类似 PartialView 的概念，模板关注的是如何展现不关注具体的数据你的需求就需要定义三个模板，根据需求进行增减. 模板完全可以由美工完成，因为模板就是两部分组成，自定义的占位标记和html(含css、js)占位标记的语法应该是简单易懂的，相关原理可以参照T4引擎。然后说说不变的地方，就是生成HTML ,你只需告知 模板名称和相应的数据相应Module 就应返回 需要的HTML 并放置在相应的位置而这个Module 就可以定义成自定义控件，接收外界传递的两个参数 模板名称和相应的数据剩下的事情就是控件调用了

Answer 8

呵呵，这个问题好解决去请1个临时工就ok，反正就是排样式，逻辑不用管。你一天开25块工资就ok了实际没有啥以一挡百的玩意，UI就是UI，只要无关逻辑就是一民工活。真要以一挡百ok，搞个模板引擎，那么模板引擎要不要写还是要写，模板要不要写，还是的写。所以这个总归是个体力活，那么体力活就交给民工干吧