Web开发经验总结.docx

Web开发经验总结.docx

《Web开发经验总结.docx》由会员分享，可在线阅读，更多相关《Web开发经验总结.docx（18页珍藏版）》请在冰豆网上搜索。

Web开发经验总结

1，不要认为Struts已经过时了，也不要盲目的去追随JSF以及更新的MVC框架，在目前Struts仍旧是最为优秀的MVC框架，尤其是后来与Spring、Hibernate（或者Ibatis）的结合，使得Struts的应用得到了进一步的发展，也许你认为Webwork2、SpringMVC或者JSF更为优秀和实用，那么也没有关系，其实只要对你或你的公司适用，那么就可以了。

2，你知道Javascript中的typeof和instanceof操作吗，如果不知道，劝你还是看看这方面的知识吧，typeof返回的是对象的类型，例如string、number、object等等，而instanceof判断的是一个对象是否是某个类的实例，例如：

 vararr=newArray（）;

 vartype=typeof（arr）;//返回object

 varflag=arrinstanceofArray;//返回true

 varflag2=arrinstanceofObject;//返回true;

 在实际使用过程中，你会发现instanceof是更为强大的，当然了许多时候typeof用起来很方便，但是对于复杂的场合typeof就不太适用了，尤其是对于自定义对象以及对象之间有着复杂的继承关系时，使用instanceof可以方便的对这些进行判断。

3，虽然你可能知道javascript中typeof的用法，但是如果你不能做对下面的题，说明你对typeof的理解还是不够的，例如：

 vara;

 varrs=typeof（a）;//请问rs的值是什么？

 （A）object（B）variable（C）undefined（D）string（E）null（F）以上答案全不正确

 如果你选择A还算对JS有一些了解，如果选择B则基本上是乱猜的，如果选择D什么也说明不了，如果选择E则说明你对于Java和Javascript有些东西还没有分清楚，选择F也是不正确的。

答案是C，记住在Javascript之中，如果一个变量没有初始化，那么该变量的类型为undefined。

4，也许你一直在抱怨Javascript之中没有列表、哈西表以及堆栈、队列等数据结构，如果真的在抱怨，那么也不是你的错，毕竟包括我自己在内，我们对JS的了解太少了，其实在JS之中，数组对象自身完全支持上面的那些数据结构，例如：

 varlist=newArray（）;//列表

 list[0]="a";

 list[100]="b";

 varmap=newArray（）;//哈西表

 map["001"]="a";

 map["username"]="zhangsan";

 varstack=newArray（）;//堆栈，即后进先出

 stack.push（"a"）;

 stack.pop（）;

 varqueue=newArray（）;//队列，即先进先出

 queue.unshift（"a"）;

 queue.shift（）;

 可见JS是非常强大的，关键是我们知道的太少了，关于Javascript对于数组的操作，你也可以参考《Javascript对数组的操作》。

5，作为一个web开发人员，我们不能指望美工在完成漂亮的效果图之后，还要为我们将图切分，最后生成html文件后再给我们，然后我们对这些html文件，再修改转换为jsp、asp或者php文件。

我一直认为效果图的切分应该或者最好由我们程序员自己来做，因为美工做的效果图实际上是要应用到我们的产品或者项目中的，而具体的产品和项目，对效果图中哪些部分是需要输入文字的，哪些地方是需要背景的，哪些地方是需要可以自动伸缩的，而哪些地方又是必须保证大小的，是有很严格的要求的，尤其是我们的产品或项目中如果使用了类似sitemesh等的模板技术，那么切图的工作就更要由我们自己来做了。

这样并不是说美工不需要懂得html、css等技术，也不是说美工切出的图，会不符合我们的要求，我们知道，一张效果图，可以有n种切法，但是要能够满足实际的需求，往往只有一种最合适的切法，而这个切法一般来说美工是不太清楚的，开发人员也是不清楚的，只有既是开发人员，又懂得美工切图的人，才能够找到最为合适的切分方法，而这样的人才是非常奇缺的！

6，不要过于痴迷Ajax技术，也不要过于追捧web2.0这个时髦的词汇，并不是说什么东西粘上ajax或者web2.0，就能够火起来或者对我们的实际发展有利的，如果你是做公网网站的，那么要注意，不合适的ajax使用，会使得网站被搜索引擎收录的信息大幅度减少，但是ajax或者Flex2等技术对于用户体验而言，还是相当不错的，因此是否使用ajax等技术，一要看对你们的解决方案宣传是否有作用，另外一点就是要看，它是否真正的改进了我们的应用。

7，对于ajax的post提交方式，可能你有些问题要问，例如post的方式是不是只要在open时指定method就可以了，为什么我将大数据放到url后面，而没有被完全传递过去，为什么我后台使用类似jsp中的request.getParamter方法接收不到数据，我们通过一个例子看一下ajax发送/接受大数据的方式：

 1）send.jsp:

（我举的例子使用的是Javascript开源框架JsJava的ajax类库，该类库对IE和Firefox等的XMLHttpRequest等对象进行了易用性的封装，不像prototype.js默认对传递的数据进行urlencode编码）

 varajaxRequest=newAjaxRequest（）;

 ajaxRequest.setRequestMethod（"post"）;

 ajaxRequest.setRequestURL（"ajaxresponse.jsp"）;

 ajaxRequest.setAsync（true）;

 ajaxRequest.setMethodOnSuccess（onSuccess,[ajaxRequest]）;

 ajaxRequest.setRequestHeader（"Content-Type","application/x-www-form-urlencoded;charset=utf-8"）;

 ajaxRequest.send（"content=这是一篇几千字的文档...在此省略"）;

 要注意设置发送方式为post，设置头信息的内容类型为application/x-www-form-urlencoded，charset是否设置要看内容的编码情况，另外大数据就放到send之中，记住大数据不是放在url的参数之中的。

 2）receive.jsp

 要知道，对于ajaxpost方式提交的数据，在服务器端如果是jsp不是简单使用getParameter就能取得到的，需要从输入流中去取，这和附件上传有些类似的地方。

当然要注意编码和解码的问题。

8，我们在界面中经常会通过setTimeout方法来实现定时或者异步操作，例如：

 setTimeout（myfunc,2000）;//两秒后执行myfunc函数

 但是要注意setTimeout方法并不能阻止后面js代码逻辑的执行，例如：

 上面的代码中，document.write（"wait..."）;逻辑并不会等到3秒后才执行，而是立即执行的，其实这一点可能大部分开发人员都知道，但是如果不注意，就很容易犯下面的错误，如下面代码所示：

 varajax2HasExecuted=false;

 varajaxRequest1;

 functionajax1Func（）{

   if（!

ajax2HasExecuted）{

     setTimeout（ajax1Func,200）;

  }

  vartext=ajaxRequest1.getResponseText（）;

  ...

 }

 varajaxRequest2;

 functionajax2Func（）{

  vartext=ajaxRequest2.getResponseText（）;

  ...

  ajax2HasExecuted=true;

 }

 上面的代码是一个页面中同时发送了两个ajax异步请求，分别有两个对应的接收操作，而业务逻辑要求，这两个操作是要有先后顺序的，其中第一个接收操作，需要等待第二个接收操作完成之后，才能进行处理，于是第一个操作中就采用setTimeout的方式，本意是在执行第一个操作的开始的地方，先判断第二个操作是否已经执行完毕，如果没有执行完毕，则等待200毫秒后，重新执行第二个操作，然后由于setTimeout并不能组织后续的逻辑继续执行，所以实际上不管第二个操作是否完成，第一个操作都会一直往下执行下去，从而导致业务上的错误。

解决方法要么是在if后面加上else，或者在setTimeout之后直接return，例如：

 if（!

ajax2HasExecuted）{

     setTimeout（ajax1Func,200）;

     return;

  }

9，window.open和window.showModalDialog方法相信你已经用到过许多次了，但是总是出现这样或那样的问题，问题主要是以下几个方面：

1）showModalDialog这个函数名经常被写错，例如经常被写成showModelDialog，使得不能执行打开窗口的操作。

2）控制打开窗口的属性，例如尺寸、滚动条、菜单、状态栏等，是我们经常会碰到的情况，但是我们经常会将这两种打开方式的属性名称以及属性之间的分隔符混用，使得属性执行不正确，例如我举下面的例子，要求弹出一个宽200高300的窗口，你看哪些方式是对的？

（A） window.open（"about:

blank","","width=200,height=300"）;

（B） window.open（"about:

blank","","width:

200,height:

300"）;

（C） window.open（"about:

blank","","width=200;height=300"）;

（D） window.open（"about:

blank","","width:

200;height:

300"）;

（E）window.showModalDialog（"about:

blank","","dialogWidth:

200px;dialogHeight:

300px"）;

（F）window.showModalDialog（"about:

blank","","dialogWidth=200px;dialogHeight=300px"）;

（G）window.showModalDialog（"about:

blank","","dialogWidth:

200;dialogHeight:

300"）;

再多的选项就不写了，正确答案是A和E，通过上面的问题我们需要记住一下几点：

∙window.open控制属性之间的分隔符是逗号“,”，属性和值之间用等于号"="连接

∙window.showModalDialog控制属性之间的分隔符是分号“;”，属性之间的用冒号“:

”连接

∙window.open控制属性中长度和宽度尺寸可以直接写数字，也可以加上度量，例如px，但是对于window.showModalDialog的长度和宽度则必须带上px，否则尺寸无效，这一点是很重要的。

10，对于数据库中的varchar型字段，是有长度限制的，例如oracle10g中varchar2字段的最大长度为4000字符,在mysql中varchar最长为255字符，要注意这里面的限制值是单字节字符值，而汉字属于双字节字符，因此对于汉字存储而言，varchar2字段最多可以存储2000个汉字，由此引申出来的一个问题，就是web开发过程中的表单提交验证问题，因为对于中国用户而言，输入的内容有可能是汉字和英文字符的组合，因此判断输入字符串的长度需要注意，Javascript中判断一个字符串的长度的方法为：

 varstr="abcdef";

 varlength=str.length;

但是字符串的这个属性，计算的是独立字符的长度，例如一个中文字符按长度1计算，因此如下：

 varstr="你好";

 varlength=str.length;

其长度的值为2，而不是4，那么如何计算含有汉字或者说是双字节字符的真实长度呢？

通过搜索可以很快找到方法，就是先将双子节字符替换为两个单字节字符，然后计算替换后的字符的长度，当然了JsJava中提供了对于双字节字符串真实长度的计算支持，你可以查看其中的StringUtils类。

11，如果你不能默写出常用颜色的英文表示值和16进制表示值，那么说明你的HTML基本功还是需要练的，例如白色是white，十六进制是FFFFFF，红色是red，十六进制是FF0000，蓝色是blue，十六进制是0000FF，紫色是purple，橙色是orange，网页中常用的灰色一般都是EEEEE，或者再浅一些EFEFEF，当然说这些并不是让你去背大量的颜色和十六进制值，但掌握一些常用的，还是很有必要的。

12，Javascript支持多维数组，但是没有构造函数可以直接生成多维数组，例如一维数组可以通过Array生成，例如：

 vararr=newArray（12）;

生成多维数组，虽然没有构造函数支持，但是可以通过另外一种方式实现，例如实现一个12x5的二维数组：

 vararr=newArray（12）;

 for（vari=0;i

   arr[i]=newArray（5）;

 }

另外，你可以直接使用JsJava的标准类MultiDimensionArrayUtils，支持生成二维和三维数组。

13

从实际效果来看，img的默认align并非是left，好像应该是bottom，而且上面的情况在IE6.0和Firefox2.0上都试验过，看来MSDN的说法是不太可信的，或者是自己理解错了？

你可以看一下MSDN中的描述：

14，在界面中添加事件的方式主要有如下几种，例如当页面加载之后，执行函数myfunc，几种定义方式如下：

1）在标签中加入onload事件，即：

2）在任何一个可以执行Javascript的地方定义window.onload，即：

window.onload=myfunc;

3）在

4）将事件加入到事件队列中，即：

IE中window.attachEvent（"onload",myfunc）

Firefox中window.addEventListener（"load",myfunc,false）

建议大家使用第四种方式，因为只有第四种方式，可以避免将其它的同类事件覆盖，第四种方式是将该事件加入到同类的事件的队列之中，不会覆盖其它的同类事件，这在web开发过程种，是需要特别注意的，尤其我们自己定义一些界面框架或者组建的时候，经常需要定义onload事件，这个时候最好是使用第四种方式，因为引用界面框架和组建的用户，可能在页面上也想使用onload逻辑，当然用户自己使用第四种方式也不会有问题，但是做为一个负责任的界面高手，是不应该这样想得，我们应该严于律己，而宽以待人。

15

16，如何在HTML种加入一段保留格式化的文本，相信你会想到

 这是一段格式化文本，
里面的文字直接将格式输出

显示结果为：

 这是一段格式化文本，

里面的文字直接将格式输出

对于一般情况而言，pre标签就够用了，但是pre标签的不足之处，在于它不能将其中的html标签也原样输出，而是进行了解析，例如：

 这是一段格式化文本，里面的文字直接将
格式输出

显示结果为：

 这是一段格式化文本，里面的文字直接将

格式输出

那么如何才能将含有HTML的内容也原样输出呢？

实际上在HTML规范种有

显示结果为：

 这是一段格式化文本，里面的文字直接将
格式输出

17，如何获取某个对象区域的尺寸以及坐标，是我们界面开发过程种经常会遇到的一个问题，一般我们都采用getBoundingClientRect方法来获取对象的区域，进而得到该区域的尺寸和坐标，但是该方法只能在IE中使用，当然Firefox也有类似的方法，相信大多数开发人员不知道，该方法就是getBoxObjectFor，为了不想为跨浏览器而操心，你可以直接下载JsJava，使用其中的DocumentUtils类的getElementRectangle静态方法，例如：

JsJava的类和方法都是经过IE和Firefox测试的，使用起来很方便。

18，在界面中对象的位置的计算与理解是比较麻烦的一件事情，例如clientHeight、clientTop、scrollHeight、scrollTop、offsetHeight、offsetTop，这些该怎么区分，又分别代表什么意思，对位置属性的深入理解，非常有助于对HTML界面布局本质的理解，是成为高手的必由之路，下面就简单介绍一下：

1）clientHeight，代表对象区域的屏幕高度，不包含区域的border尺寸，但包含padding的尺寸

2）clientTop，对象区域offsetHeight与clientHeight的差的一半

3）scrollHeight，代表对象区域内容的底部距区域最上边的距离

4）scrollTop，代表对象区域滚动部分的高度，即区域的最上边距离该区域可见部分的最上边的距离

5）offsetHeight，代表对象区域的屏幕高度，包含border和padding尺寸

6）offsetTop，代表对象区域距离上一个对象高度

上面的解释如果没有实际的经验，多少会有些迷糊，没有关系，我给你一个示意图：

因此，scrollHeight并非总是大于或等于clientHeight，实际上确实有一些开发人员认为一个区域没有滚动时scrollHeight和clientHeight相等，有滚动时scrollHeight＝clientHeight+scrollTop，这种认识是不对的或者说是不准确的。

上面的图的html源码为：

5;border-width:

15;border-color:

black;border-

style:

solid;background-color:

red;height:

100;width:

200">区域1，高100