今天在用ajax传一个中文值的时候，碰到了个怪问题，起先在js中没有对要传到后台的中文值进行编码，在java后台通过
new String(后台接收到得中文值.getBytes(),”UTF-8″)
可以正确解析到传过来的中文值，但是当我传中文值”一般”的时候，问题出现了，死活都是乱码，很奇怪，把其中”一”去掉，能够正常解析，问题出在这个”一”上，呵，以前还真没遇到过，因为时间的关系，最后对js传的中文值用
encodeURIComponent(中文值)
来传递到后台，java后台通过
java.net.URLDecoder.decode(后台接收到的经过编码的中文值,”UTF-8″);
来解析，至此一切正常，不管怎样，对js传中文到后台的时候，一律先给它编码再传，这样乱码也就不会产生了。
jQuery1.4.1 API中文参考文档放在自己电脑上很久了，有一朋友要，就想着挂上来，直接去下载算了，也方便其他的朋友们，呵呵。
下载地址：jQuery1.4.1 API 中文参考文档
在jQuery 1.4中，很多常用的jQuery方法重写过了，这些方法的改变使得它更容易使用，对性能也是一个大的提升，具体的改变，网上有很多文章介绍，这里就不说了，呵呵。
忘记了从那篇网文拷贝过来的，这里的js对cookie的写入，读取及删除方法，都很实用，呵呵，宣传下…
/*
name:cookie 名
value:cookie 值
*/
//写入cookie
function SetCookie(name,value)
{
var Days = 30; //此 cookie 将被保存 30 天
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
///删除cookie
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//读取cookie
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null)
return unescape(arr[2]);
return null;
}
因为一个面试题，我今天测试了下，居然我写的答案是错的，下面是大概意思的源程序：
var a = 100;
function showout(){
var fullrange = 2 * a;
var a = 200;
var halfrange = a / 2;
alert(fullrange);
alert(halfrange);
}
开始我想的是既然在function里面定义了局部变量 a ，那function外定义的全局变量在function里面是不会起作用的，所以fullrange和halfrange的值应该分别是：400和100。因为当时是笔试，而不是上机（上机也不会出现这问题，呵呵），所以得出这个答案，面试老师看了之后回答是正确结果，我放心了。
但面试还是有几道题没有做出来，回家仔细的想了下，包括这道题，我在电脑上一测试，俺的天，得到fullrange的值居然是NaN,大呼怎么可能…. 于是我反复测试，如果我把function里面定义的：var a = 200;改为：a = 200;那么得出fullrange和halfrange的值的答案分别是：200和100，想了下其实如果我这里这样改的话，那么function里面的a就不是局部变量了，而是全局变量a，改变了全局变量a的值而已，所以得到值也就200和100了。那我就纳闷了，为什么定义了局部变量，而得不到fullrange的值呢，而且是个NaN，说明var fullrange = 2 * a;中a是没有定义的即typeof a为undefined。那么这也只能说明，在JavaScript中的function里面是严格按照顺序执行的，在function里面如果定义了与全局变量名称相同的局部变量，那么function里面引用到这个变量的都以局部变量来处理，用 this.变量名字 或 window.变量名字 才能引用function外部与变量名字相同的全局变量。
这里的全局变量和局部变量搞的很头晕了，我个人认为是:
在JavaScript执行代码之前，先处理变量声明，不管这个变量在什么位置，如果在function中变量显示声明，即变量在赋值语句中出现在左边，但没有用var声明，则把这个变量看成时全局变量。在function中，如果存在着用var声明的局部变量的名称与全局变量的名称相同，那么function中引用这个变量值的时候在应为局部变量的值，除非用this或window来修饰这个变量，才能取到全局变量的值。
在有的时候，我们需要把某些十进制数字，或则字母转换成二进制，或八进制，或十六进制，在JavaScript中，像这种进制很容易转换，如：
十进制转换成其他进制：
var num = 10; document.write(m.toString(2) + "<br>"); // 显示为 1010 document.write(m.toString(8) + "<br>"); // 显示为 12 document.write(m.toString(10) + "<br>"); // 显示为 10 document.write(m.toString(16) + "<br>"); // 显示为 a，注意是小写。
其他进制转换成十进制:
parseInt(numstring, [radix])
document.write(parseInt(1010, 2) + "<br>"); // 显示为 10 document.write(parseInt(12,+ "<br>"); // 显示为 10 document.write(parseInt(10, 10) + "<br>"); // 显示为 10 document.write(parseInt("a", 16) + "<br>"); // 显示为 10 document.write(parseInt("A", 16) + "<br>"); // 显示为 10
再来讲述JavaScript中的attachEvent 与 addEventListener使用方法，在有的时候，可以想像一下使用注册事件方法对同一物件事件进行多次绑定，那么这里就存在了一个触发顺序，看下面实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=Content-Type content="text/html;charset=gb2312">
<script type="text/javascript">
window.onload=function(){
var testbut = document.getElementById("btn_test");
var info = document.getElementById("info")
if (window.attachEvent)
{
//IE
testbut.attachEvent("onclick", function () { info.innerHTML += "1" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "2" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "3" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "4" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "5" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "6" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "7" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "8" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "9" + "
"; });
}
else
{
//Firefox
testbut.addEventListener("click", function () { info.innerHTML += "1" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "2" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "3" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "4" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "5" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "6" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "7" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "8" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "9" + "
"; }, false);
}
}
</script>
</head>
<body>
<input id="btn_test" type="button" value="测试" />
<div id="info"></div>
</body>
</html>
IE下输出的结果为：
4 6 8 9 7 5 3 2 1
Firefox下输出的结果为：
1 2 3 4 5 6 7 8 9
从这可以看出在IE下它的触发顺序是乱七八糟的，而在火狐Firefox下，先绑定的先执行，以后得注意点了….
很久没用又忘了在JavaScript中注册事件的使用方法了，这里再回顾下： 因为浏览器的不同，在IE下我们用的是attachEvent()方法，而在Mozilla系列，并不支持该方法，需要用到addEventListener(),下面举例说明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TesyJS</title>
</head>
<body>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<script type="text/javascript">
function method1(){
alert("事件触发了");
}
var but = document.getElementsByTagName("button");
//IE下用addEventListener，
//Mozilla系列（如FireFox)下用addEventListener
if(navigator.userAgent.toLowerCase().indexOf("msie")>-1)
but[0].attachEvent("onclick",method1);
else
but[0].addEventListener("click",method1,false);
</script>
</body>
</html>
其中ie浏览器下用的结构为：
element.attachEvent(type,listener)
其中element是要绑定函数的对象,括号中只带2个参数：
在Mozilla系列的浏览器下，用的结构为：
element.addEventListener(type,listener,useCapture)
其中element是要绑定函数的对象,括号中带3个参数：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TesyJS</title>
<script type="text/javascript">
window.onload=function(){
/**
*改变第三个参数的值，可以发现当都为true的时候，从外到内依次触发事件
*当都改为false的时候，从内到外依次触发事件
*当一个true一个false之时，哪个为true先触发哪个的事件。
**/
document.getElementById("div_test").addEventListener("click",test1,true); document.getElementById("btn_test").addEventListener("click",test2,true);
}
function test1(){ alert("外部div层触发") }
function test2(){ alert("内部input按钮触发") }
</script>
<body>
<div id="div_test">
<input id="btn_test" type="button" value="测试" />
</div>
</body>
</html>
今天在弄FCKediter的时候，看了下源码，发现在源码中用到：
location.pathname;
这在之前我没怎么注意过，所以研究研究。
location.pathname：
返回URL的域名（域名IP）后的部分。例如 http://www.joymood.cn/wordpress/返回/wordpress/，又或则 http://127.0.0.1/index.html 返回/index.html，注意是带url的域名或域名IP，在磁盘上随便建个Html文件进行location.pathname测试，如浏览器上的路径是：
C:\Documents and Settings\Administrator\桌面\testjs.html，
这样，得到的结果是:
/C:\Documents and Settings\Administrator\桌面\testjs.html
既然提到这了，那我们就分析下下面的URL：
http://www.joymood.cn:8080/test.php?user=admin&pwd=admin#login
想得到整个如上的完整url，我们用：location.href;
得到传输协议http:,我们用：location.protocol;
得到主机名连同端口www.joymood.cn:8080，我们用：location.host;
得到主机名www.joymood.cn，我们用：location.hostname;
得到主机后部分不包括问号?后部分的/test.php，就用我们刚才讲的：location.pathname;
得到url中问号?之后井号#之前的部分?user=admin&pwd=admin，我们就用：
location.search;
得到#之前的部分#login，我们就用location.hash;
经过上面的讲述，我们可以通过location对象的某些属性得到一个完整URL的各个部分。
在很多时候，我们在web前端技术中用到JavaScript中的字符串连接操作，一般都会用“+”运算符，如：
var stra="abc"; stra+="def";
上面的代码执行的步骤如下：
(1) 创建存储”abc”的字符串。
(2) 创建存储”def”的字符串。
(3) 创建存储连接结果的字符串。
(4) 把str的当前内容复制到结果中。
(5) 把”def”复制到结果中。
(6) 更新stra，使它指向结果。
每次完成字符串连接都会执行步骤2到6，使得这种操作非常消耗资源。如果重复这一过程几百次，甚至几千次，就会造成性能问题。
能不能就像java里面，字符串通连接常都不用“+”运算符，而用StringBuffer类中的append方法来达到性能上的优化，事实也证明在java里面，后者要比前者在性能方面得到很大的提高。于是利用JavaScript仿造java中的StringBuffer类，用Array对象存储字符串，然后用join()方法（参数是空字符串）创建最后的字符串。想像用下面的代码代替前面的代码：
var arr = new Array();
arr.push("abc");
arr.push("def");
var str = arr.join("");
这样，无论在数组中引入多少字符串都不成问题，因为只在调用join()方法时才会发生连接操作。此时，执行的步骤如下：
(1) 创建存储结果的字符串。
(2) 把每个字符串复制到结果中的合适位置。
总结: 如何程序中需要多次进行字符串连接,最好使用Array的join方法.
下面我把这个功能封成一个类:
function StringBuffer(){
this._strings=new Array;
}
StringBuffer.prototype.append=function(str){
this._strings.push(str);
}
StringBuffer.prototype.toString=function(){
returnthis._strings.join("");
}
这是在《javascript高级程序设计》一书中作者所提倡的，并且用如下代码来测试这个类与“+”运算来进行字符串连接的性能：
//使用 "+=" 拼接字符串
var d=new Date();
var str="";
for(var i=0;i<10000;i++){
str+="test";
}
var d2=new Date();
document.writeln(d2.getTime()-d.getTime());
//使用 StringBuffer
var sd = new Date();
var str2 = new StringBuffer();
for(var i=0;i<10000;i++){
str2.append("test");
}
var res = str2.toString();
var ed = new Date();
document.writeln(ed.getTime()-sd.getTime());
(进行了小部分修改)
在作者当时的情况下作者得出的多次测试结果看来：
使用StringBuffer可以节省50%以上的时间。
我在网上也查了n多关于javascript字符串的连接优化的网文，即使到现在还有很多网友像追风一样，对作者这个结果深信无疑，但我今天亲自测试了一下，结果让我大吃一惊：
当然IE6及IE7上作者的结果是正确的，性能方面StringBuffer可以节省50%以上的时间。
当在火狐FF3.5上,Opera浏览器上，chrome浏览器上结果却刚好相反，“+”运算明显要高于我们写的StringBuffer方法，而且也是50%的差距，这里左下修改，发布这篇文章后有人提醒，我这里只循环10000次，如果把循环次数加到一百万(1000000)次，结果就不会令我吃惊了，确实当循环次数达到一百万的时候，测试出来的结果如作者说的一样，StringBuffer运算要快，但与”+=”运算的时间相差不大，当我用Google测试的时候，发现问题不对，结果相反，用”+=”比用StringBuffer运算要快得多。再用一千万(10000000)测试，google浏览器还是”+=”运算比用StringBuffer运算要快得多，从10000次开始，我比较下了火狐和google浏览器的连接字符串的运算速度，明显的火狐运算速度比google浏览器要快很多，随着循环的次数加大，很明显这样的运算速度火狐要比google快n倍。
最后我感觉，当我们处理javascript字符串的连接优化的时候，是不是要考虑到浏览器的问题。特别是字符串链接很多的时候。出现这种情况，可能是随着浏览器版本的提高，JavaScript的版本更新，对“+”运算进行了很多的优化而导致“+”运算明显要高于我们前面说写的StringBuffer方法。
先看下面两段js程序，先是定义式函数写法：
<script type="text/javascript">
function myfunc(){
alert("第一次调用");
};
myfunc(); //得出的是 第二次调用
function myfunc() {
alert("第二次调用");
};
myfunc(); //得出的是 第二次调用
</script>
接下来是变量式函数写法：
<script type="text/javascript">
var myfunc = function (){
alert("第一次调用");
};
myfunc(); //得出的是 第一次调用
myfunc = function () {
alert("第二次调用");
};
myfunc(); //得出的是 第二次调用
</script>
Recent Comments