QX项目实战-4.模型快速开发

为了是客户更早的看到效果，提出双方理解有误的地方，明确需求分析。可以首先开发一个原型来发现更多、更详细的功能定义。这就是模型，模型首先要容易开发，速度要快。最好的方法就是只搭建一个界面，提供功能预览。

本例使用html快速搭建软件环境。采用JQuery+html+div/css的方法，用html搭建基本架构，DIV+CSS书写表现，JQuery编写动态效果和Ajava功能。本例中菜单项是使用JS动态下拉效果，点击后用Ajaxa功能导入相应的操作页面给固定ID的DIV元素，实现了动态载入，不刷新的效果。

本例中，html页面：首先连接样式表<linkhref="style/common.css" rel="stylesheet"type="text/css"/>，导入js代码库<script language="javascript"src="My97DatePicker/WdatePicker.js" type="text/javascript"></script>。对页面的布局定义如下：

Banner

Left

Fun

Fun

Footer

在导入的公共JS代码中，使用JQuery建立加载函数$(document).ready(function(){$(".popup").click(popTips);$('#menua').click(clickLeftMenu);})以上代码在页面加载完成后，为.popup类和menu类中的a元素定义了点击方法，分别调用popTips和chickLeftMenu方法。这两个方法实现弹出提示和访问Ajaxa功能。

其中访问Ajaxa功能，解析菜单的href属性，使用Ajax功能动态加载html文件到Fun中去，实现无刷新加载功能。

function clickLeftMenu(){         $(this).css("font-weight","bolder");         $(this).parent().siblings().find("a").css("font-weight","normal");         var obj=$(this).siblings('ul');         varicon=$(this).siblings('img');   if(obj.css("display")=="none")      {                    obj.slideDown();                   icon.attr("src","images/arrowup.png");           }        else          {      obj.slideUp("fast");           icon.attr("src","images/arrowdown.png");          }                    var tourl = $(this).parent().attr("href");          if(tourl!="#"){          var content=$.ajax({                            url:tourl,                            async:false,                            dataType:"html",                            error:function(){                                     $("#content").html("<pclass='windown-error'>加载数据出错...</p>");                            },                            success:function(html){                                                                        $("#content").html(html);                                     }                  });          }  }

以上程序，根据点选项目不同，加载不同页面。DIV+CSS可以快速定义界面，而且复用度高，非常好用。使用SVN工具时，为了在某一项重大改变之后继续开发程序，一般需要设置分支，分支相当于一个程序的拷贝版本，设定好分支后，相当于有了两个不同的程序。