Web开发经验总结
1，不要认为Struts已经过时了，也不要盲目的去追随JSF以及更新的MVC框架，在目前Struts仍旧是
最为优秀的MVC框架，尤其是后来与Spring、Hibernate （或者Ibatis ）的结合，使得Struts的应用得到了进一步的发展，也许你认为Webwork2、SpringMVC 或者JSF更为优秀和实用，那么也没有关系，其
实只要对你或你的公司适用，那么就可以了。
2，你知道Javascript中的typeof和instanceof操作吗，如果不知道，劝你还是看看这方面的知识吧，
typeof返回的是对象的类型，例如string、number、object等等，而instanceof判断的是一个对象是否是
某个类的实例，例如：
var arr=new Array（）;
var type=typeof（arr）;〃返回object
var flag=arr instanceof Array;// 返回true
var flag2=arr instanceof Object;// 返回true;
在实际使用过程中，你会发现instanceof是更为强大的，当然了许多时候typeof用起来很方便，但是对
于复杂的场合typeof就不太适用了，尤其是对于自定义对象以及对象之间有着复杂的继承关系时，使用
instanceof可以方便的对这些进行判断。
3，虽然你可能知道javascript中typeof的用法，但是如果你不能做对下面的题，说明你对typeof的理解
还是不够的，例如：
var a;
var rs=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之中，数组对象自身完全
支持上面的那些数据结构，例如：
var list=new Array();〃列表
list[O]="a";
list[100]="b";
var map=new Array();〃哈西表
map["001"]="a";
map["user name"]="zha ngsa n";
var stack=new Array();〃堆栈，即后进先岀
stack.push("a");
stack.pop();
var queue=new Array();〃队列，即先进先岀
queue.u nshift("a");
queue.shift();
可见JS是非常强大的，关键是我们知道的太少了，关于Javascript对于数组的操作，你也可以参考
《Javascript对数组的操作》。
5，作为一个web开发人员，我们不能指望美工在完成漂亮的效果图之后，还要为我们将图切分，最后生
成html文件后再给我们，然后我们对这些html文件，再修改转换为jsp、asp或者php文件。我一直认为
效果图的切分应该或者最好由我们程序员自己来做，因为美工做的效果图实际上是要应用到我们的产品或者项目中的，而具体的产品和项目对效果图中哪些部分是需要输入文字的，哪些地方是需要背景的，哪些地方是需要可以自动伸缩的，而哪些地方又是必须保证大小的，是有很严格的要求的，尤其是
了。这样并不是说美工不需要懂得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
编码)
var ajaxRequest=new AjaxRequest();
ajaxRequest.setRequestMethod("post");
ajaxRequest.setRequestURL("ajaxresp on se.jsp");
ajaxRequest.setAs yn c(true);
ajaxRequest.setMethodO nSuccess( on Success,[ajaxRequest]);
ajaxRequest.setRequestHeader("C onten t-Type","applicatio n/x-www-form-urle ncoded;charset=utf-8");
ajaxRequest.send("content= 这是一篇几千字的文档…在此省略")；
要注意设置发送方式为post，设置头信息的内容类型为application/x-www-form-urlencoded , charset 是否设置要看内容的编码情况，另外大数据就放到send之中，记住大数据不是放在url的参数之中的。
2) receive.jsp
要知道，对于ajax post方式提交的数据，在服务器端如果是jsp不是简单使用getParameter就能取得
到的，需要从输入流中去取，这和附件上传有些类似的地方。当然要注意编码和解码的问题。
8，我们在界面中经常会通过setTimeout方法来实现定时或者异步操作，例如：
setTimeout(myfunc,2000);〃两秒后执行myfunc 函数
但是要注意setTimeout方法并不能阻止后面js代码逻辑的执行，例如：
上面的代码中，document.write("wait..."); 逻辑并不会等到3秒后才执行，而是立即执行的，其实这一点
可能大部分开发人员都知道，但是如果不注意，就很容易犯下面的错误，如下面代码所示：
var ajax2HasExecuted=false;
var ajaxRequest1;
fun cti on ajax1Fu nc(){
if(!ajax2HasExecuted){
setTimeout(ajax1Fu nc,200);
var text=ajaxRequest1.getResp on seText();
}
var ajaxRequest2;
fun cti on ajax2Fu nc(){
var text=ajaxRequest2.getResp on seText();
ajax2HasExecuted=true;
}
上面的代码是一个页面中同时发送了两个ajax异步请求，分别有两个对应的接收操作，而业务逻辑要
求，这两个操作是要有先后顺序的，其中第一个接收操作，需要等待第二个接收操作完成之后，才能进行处理，于是第一个操作中就采用setTimeout的方式，本意是在执行第一个操作的开始的地方，先判断
第二个操作是否已经执行完毕，如果没有执行完毕，则等待200毫秒后，重新执行第二个操作，然后由
于setTimeout并不能组织后续的逻辑继续执行，所以实际上不管第二个操作是否完成，第一个操作都会一直往下执行下去，从而导致业务上的错误。解决方法要么是在if后面加上else，或者在setTimeout之
后直接return，例如：
if(!ajax2HasExecuted){
setTimeout(ajax1Fu nc,200);
return;
9, window.open 和window.showModalDialog 方法相信你已经用到过许多次了，但是总是岀现这样或那
样的问题，问题主要是以下几个方面：
1)showModalDialog 这个函数名经常被写错，例如经常被写成
showModelDialog ，使得不能执行打开窗
口的操作。
2)控制打开窗口的属性，例如尺寸、滚动条、菜单、状态栏等，是我们经常会碰到的情况，但是我们经
常会将这两种打开方式的属性名称以及属性之间的分隔符混用，使得属性执行不正确，例如我举下面的
例子，要求弹岀一个宽200高300的窗口，你看哪些方式是对的？
(A)win dow.ope n("about:bla nk","","width=200,height=300");
(B)window.open("about:blank","","width:200,height:300");
(C)wi ndow.ope n("about:bla nk","","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)wi ndow.showModalDialog("about:bla nk","","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中判断一个字符串的长度的方法为：var str="abcdef：
var len gth=str.le ngth;
但是字符串的这个属性，计算的是独立字符的长度，例如一个中文字符按长度1计算，因此如下：var str="你好";
var len gth=str.le ngth;
其长度的值为2，而不是4，那么如何计算含有汉字或者说是双字节字符的真实长度呢？通过搜索可以很
快找到方法，就是先将双子节字符替换为两个单字节字符，然后计算替换后的字符的长度，当然了
JsJava中提供了对于双字节字符串真实长度的计算支持，你可以查看其中的StringUtils类。
11，如果你不能默写岀常用颜色的英文表示值和16进制表示值，那么说明你的HTML基本功还是需要练
的，例如白色是white，十六进制是FFFFFF，红色是red，十六进制是FFOOOO，蓝色是blue，十六进制是OOOOFF，紫色是purple，橙色是orange，网页中常用的灰色一般都是EEEEE，或者再浅一些
EFEFEF，当然说这些并不是让你去背大量的颜色和十六进制值，但掌握一些常用的，还是很有必要的。
12，Javascript支持多维数组，但是没有构造函数可以直接生成多维数组，例如一维数组可以通过Array
生成，例如：
var arr=new Array(12);
生成多维数组，虽然没有构造函数支持，但是可以通过另外一种方式实现，例如实现一个12x5的二维数
组：
var arr=new Array(12);
for(var i=0;i arr[i]=new Array(5); 另外，你可以直接使用JsJava的标准类MultiDimensionArrayUtils ，支持生成二维和三维数组 JsJ丹且是最优秀的J avas ur i p t类库解决方案和界面应用开发支撑框 架! 13 J Shiyri J s J a西是最优秀的J avascript类库解决方案和界面应用开发支撑框架I 从实际效果来看，img的默认align并非是left，好像应该是bottom，而且上面的情况在IE6.0和 Firefox2.0上都试验过，看来MSDN的说法是不太可信的，或者是自己理解错了？你可以看一下MSDN 中的描述： 14，在界面中添加事件的方式主要有如下几种，例如当页面加载之后，执行函数myfunc，几种定义方式 如下： 1 ）在
vbody onl oad="myfu nc（）"...>
2）在任何一个可以执行Javascript的地方定义window.onload ，即：
win dow. onl oad=myfu nc;
3）在标签中定义，即：
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，代表对象区域距离上一个对象高度
上面的解释如果没有实际的经验，多少会有些迷糊，没有关系，我给你一个示意图:
?后退?Q「凶?絵/擺索☆收藏夹g
地:止'P 1各］C ： VDocumentE and Settin.gs\rliaikgbo. PC2HANGB0\M：面\￡亡片。11. html
边框■ 内容区域
■
Is
16
clientlleight=IIL5-HL2 clientTop-HL2-HLl scrollHeight=HL4-HLl scrolITop=HLl-HLl onscillciHht HL6-HIJ offsetTop-HLl
因此，scrollHeight并非总是大于或等于clientHeight，实际上确实有一些开发人员认为一个区域没有滚动
时scrollHeight 和clientHeight 相等，有滚动时scrollHeight = clientHeight+scrollTop ，这种认识是不对的或者说是不准确的。
上面的图的html源码为:
或者你直接使用JsJava种的Color对象：
var color= new Color(132,216,12);
var hex=color.toHexValue();//hex 的值为84d80c
20
21，界面问题是当前web开发领域(不要认为只是asp、jsp和或者php等的开发，大的说可以包括https://www.360docs.net/doc/433785061.html,以及J2EE等)最为棘手的问题之一，而且大部分开发人员，不懂得该如何去解决界面问题，
而且经常会遇到一些不可思议的问题。其实我告诉你，界面问题的确有一些是非常奇怪的，但是不要因
为这样，就不去深究问题的原因所在，我在这些年的开发中，遇到了不少的离奇的界面问题，包括自己
碰到的和别人让我去解决的，不过我发现，在这些离奇的问题背后，体现的却是我们大部分开发人员，
在界面能力和素养方面的一些问题，例如有些人就是太粗心，而有些人则是缺乏界面基础知识等等。成
为界面高手不是目的，培养解决界面问题的能力和素养才是最关键的。
22，在连接标签中加入on click操作是很常用的一种方式，例如：
一般情况，这种方式是没有问题，但是如果页面内容比较长，岀现了上下滚动条的时候，这种方式就会
岀一些问题，主要是由于href的#造成的，我们知道锚的作用就是让页面定位并移动到锚处，上面的代码
开发人员的意图主要是想点击的时候不要执行链接href，所以写一个#，但是#对于滚动的页面，会在执行on click的同时，页面岀现移动定位行为，这样的用户体验是很不好，解决方式有如下几种：
建议使用void 0方式，因为return方式，有时会影响click事件的传播，尤其是return false的时候。
23，在Window XP 系统中，我们经常奇怪为什么我们使用的Javascript控制窗口尺寸和位置的一些操作，而IE竟然没有全部支持呢，例如下面的代码：