大二实习使用的技术汇总（中）

（前言：实习前我就计划好了，每天做什么事，简单记录下来，结束的时候，才知道自己成长了多少，然后发发博客。预计要写三篇文章，预计要写一万个中文字，本来豪情一场地发了第一篇，没收到“顶”反而收到“踩”，哎~虽然受打击，但决定好的事，就一定要去做！我的新浪微博：@chen文http://weibo.com/u/2448939884 欢迎程序员互粉，转载文章请保留本博客地址：http://blog.csdn.net/wowkk 欢迎交流^_^）

8.05

这个星期开始第二期。一期做到最后有将近50个页面，全都放在一级目录。二期当然不可以这么做了，根据张工给的资料，我建了10个目录出来。然后大家根据自己做的页面的性质自己放到对应的目录去。

（10）我们是进行团队开发，使用了VS2010的团队功能。

所有人都对同一服务器上的项目进行开发。当我在开发某页面的时候，服务器就会锁定该页面，其他人就只能读该页面而不能编辑该页面；当我完成功能后，可以进行签入操作上传最新版本到服务器，其他人可以通过获取最新版本进行下载。有个需要注意的地方是，当添加任何新文件到项目的后，签入的时候要把项目启动文件也签进去，不然其他人无法添加删除文件。

今天任务很少，所以就找了一些JS插件来看，测试几个jQueryUI样式，看了挺多挺酷的插件，wijmo.com看起来就不错，但我对它完全不了解，看过去，记着有这样的东西而已。

8.06

性能优化不是我负责的，但现在还不着急这方面的事，因为一期项目已经成功在实际运作了，好像没碰到什么大问题。之前是采用三层+工厂模式，为了功能添加修改方便，换为简单三层模式，这是利是弊，我懂不了~

二期是针对电脑版的，所以模板就比较好做了（一期是自制的稍微有点丑陋）。我下载了一个英文的后台管理模板，带挺多动态效果挺cool的，修改作为二期的模板。

（11）后台管理界面，也是常规的左侧导航栏，右侧展示区，继续使用<iFrame>嵌套页面，因为页面交互比较简单。

对于微软自带的图表控件，总觉得丑陋，所以我又去找了很多JS图表插件来参考。

1.AwesomeChart简单图表样式

2.Flot教丰富的样式

3.Morris带详细的信息及触摸效果，但IE支持不好

4.Cubism实时刷新，动态波浪线图

5.jqPlot较漂亮的效果

找到一个挺不错的网站jquery4u.com，英文站，介绍很多很好的jquery相关资源。

8.07

我还是没做什么具体的页面，继续在搞前端的一些东西，这正是我喜欢的。

（12）今天处理了后台的一些细节问题，比如，动态添加、移除标签样式Class，使左侧导航栏上的菜单出现选中效果。

功能菜单确定后，就要提取一些“边框”、“表tab”内容，作为公共模板供使用。

有一个jquery代码，可以使<iFrame>嵌套的页面宽度、高度自适应到父页面中。

//让<iFrame>加载新的窗体后，高度自适应

$("#contentFrame").load(function(){

varcontentFrameHeight=$(this).contents().find("body").height()+30;

$(this).height(contentFrameHeight);

});

另实现一个功能，对顶部导航条进行相对置顶。

8.08

前几天BOSS请我们吃大餐，就餐时问我们之前有没有来过深圳啊，有没有去哪玩啊。咱这种乡卡拉真没花过什么钱去玩过，然后BOSS当场就说了，找个时间让我们去欢乐谷玩一玩。没想到这一天来得真么快，而且怕周末人太多专门选了今天让我们去放松放松，每人领了两百块出发咯。

一行五个人，第一个目标“太空梭”，一个家伙不愿意坐自己跑去看各种剧场了，一个家伙下来后一直头晕回宿舍了，我憋住勇气的也就坐完了过山车就去找那个在露天看地道战剧场的家伙了。只有另外两个家伙搞定了几乎所有经典项目~

刺激OR平淡，果然还是后者适合我。

8.09

玩了一天回来，突然说有新的需求，要在第一期的基础上添加。比起完善一期，我更喜欢开始二期，还好只是新增5~8个页面功能，今天还没有具体分配，所以赶紧继续自学Web开发需要的技能。

其实jQuery挺好学的，可能就两个比较难而且很重要的地方。那就是与后台交互的Ajax和与前端动态交互的技术点。Ajax后面用到再说，这里谈下前端有关动态交互的。

（13）前端动态交互的意思就是说，有些控件或元素，一开始展示页面的时候是不存在的。

比如说有一个学生列表，一开始里面是没有数据的。点击“加载”通过Ajax加载数据后，在表中展示，并且在每一行后面都有一个“删除”按钮。因为“删除”按钮一开始是不存在的，（jQuery通过append后期追加的html代码），如果简单地用$(“选择器”).click()来注册事件，那是无法响应到事件的。解决这个问题也很简单，jQuery1.6版本前可以用$(“选择器”).live(“click”,function(){});这样就可以为现在或将来的控件添加事件。但我还是推荐使用1.9版本的jQuery的$(document).on(“click”,”选择器”,function(){});来绑定事件，听别人说，它适合多种情况，性能也优化了很多。（具体应用依然请参照前面的文章）

这里提供的伙食还是可以的，但前面天天不是点猪扒就是鸡扒，吃到我郁闷了~

8.10

刚开始开发网站，是有点不习惯的，特别是里面各种逻辑关系，有些是和C/S架构下的软件开发不同的。

经常要有一些需求，比如：点击某个服务端控件的时候，让前端、后台都可以响应点击事件。但这是很困难的，总有一个事件会被屏蔽。对已控件点击之类的还好处理，在前端给控件包上一层<DIV>标签并赋予ID，然后用jQuery给该DIV一个点击事件响应即可。

但对于DropDownList这类控件的SelectChange事件呢？就无法使用非主流的方法处理了，这时必须要用到局部刷新的技术的。

现知的局部刷新技术有三种，今天具体测试两种。

（14）一、使用服务端控件UpdatePanel标签控件。

把需要局部刷新的控件放在该标签里面，这样UpdatePanel指定的服务端控件与后台进行交互刷新页面时就只会更新该标签里面的内容。放在标签外的改变了状态的数据会保持不变（不然就会更新整个页面，所有数据会被初始化）。一期使用的就基本都是这个技术，但它应该无法解决上面的问题。

二、使用.Net封装的XMLRequert，这个我只进行了简单测试，没上面特别的地方，放弃它了。

8.12

上周留下的问题还没有解决~之所以还这么执着的去测试服务端控件，是因为一期全都使用服务端控件，而我的任务是，试试能不能实现类似淘宝的组合搜索效果：

我的测试步骤是这样的：

1.选择DropDownList一个选项后，后台（先判断是否已经添加过）动态给前端某DIV添加Html代码：你已选择<li>**</li>（成功）

2.前端点击<li>删除自身（成功）

3.将被删除的<li>的Id传入后台（成功）

4.整合（失败）

（15）只使用服务端控件，那必须在后台一直保持要展示的数据（一直在此基础上进行添加或移除数据）。通过各种处理，让前端能独立作出回应，后台也能独立作出回应，但却无法统一数据（也就是各做各的）。因为UpdatePanel与jQueryAjax请求的后台“并不一样”，所以无法用ViewState（一个页面周期内，ViewState不会消亡，它可以指向任何数据）来保存持久性数据（用XMLRequest代替jQueryAjax或者Session代替ViewState也一样）。

我跟张工说明了各种很难的实现问题，最后就用另外一种方法了。就是用DropDownListy绑定可以check的选项控件，前端勾选要展示的数据组合，传到后台，返回新的结果页面，简单地解决了。

（16）但我还是不想放弃，所以决定用纯Html+JS来做个Demo，大概流程：使用static全局变量，通过ajax、get、json、request等调用函数得到List<T>，通过JavaScriptSerailizerSerialize序列化为json文本返回给前端使用（具体可以看下：http://blog.csdn.net/wowkk/article/details/10296963，我在里面做了一个比喻~新手先有个概念就好，Ajax是为了前端能和后台交互的，它们的关系就像：顾客来到某餐厅，服务员就像前台的一个元素，厨房就像后台的一个元素，你想吃什么和服务员说，服务员就让厨房里的人做出对应的佳肴，然后服务员拿着你想要的东西给你。（菜式名，钱等是传入参数，佳肴是返回数据~）
）