Web服务端组件事件开发与MVC开发

    本周一起跟.net开发同事讨论了WEB开发方法，重点讨论基于服务器端组件开发（组件标签开发，如JSF)和MVC开发模式，有些对比进行了讨论，想起了两年前研究的JSF, 记录下来进行更细节的延伸。

      1.服务器端组件开发模式：如下代码方式

      界面代码：

   

 <w:head>
        <w:stylesheet src="/common/resources/examples.css"/>
    </w:head>
    <w:page>
        <div class="examDesc">
            <p>本例子模拟一个常用的场景，例如注册用户，当输入用户名，文本框失去焦点后，就发送ajax请求到后台去验证用户名，判断其合法性</p>
        </div>
        <w:form>
            <layout:panelGrid columns="3">
                <layout:cell colspan="1" rowspan="1">用户名：</layout:cell>
                <w:textField id="name"></w:textField>
                <h:outputText id="nameMsg" style="color:red;"></h:outputText>
                <layout:cell colspan="1" rowspan="1">密码：</layout:cell>
                <w:textField id="password" inputType="password" required="true" minLength="6">
                    <f:validateLength minimum="6"></f:validateLength>
                </w:textField>
                <h:message for="password"></h:message>
                <layout:cell colspan="3">
                    <w:button id="login" value="登录" />
                </layout:cell>
            </layout:panelGrid>
            <h:outputText id="response" style="color:blue;"></h:outputText>
        </w:form>
    </w:page>

 

 

      后台对应绑定事件

@Action
  public void login(){
    if("starwind".equals(name)){
      response = "注册成功";
    }else{
      response = "注册失败";
    }
  }

     基于服务器端组件事件开发的有着方便的开发速度和简练的代码结构，在有成熟的组件为最佳的Web开发模式。但在目前不宜使用，有个最致命的问题，生成的前台代码有个viewState，占用太大空间。

viewState='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';

 

    2.MVC开发方式

      前台用HTML+JS+CSS可以组成丰富的界面体验，后端控制器、业务逻辑用JAVA、C#。使用MVC可将界面开发人员与业务开发人员分开，从而前台开发人员可以写出简洁的代码 ，不会有viewstate的出现。但在没有太多可用的前台资源（Jquery、EXT）的情况下,开发速度肯定要受影响的。

 

      在开发中还是习惯于以下的开发方式：

     WEB网站型：DIV+CSS+Jquery+Spring+Hibernate

     WEB应用型：DIV+CSS+EXT+Jquery+Spring+Hibernate