《怎样使拼接HTML字符串更快.doc》由会员分享，可在线阅读，更多相关《怎样使拼接HTML字符串更快.doc（21页珍藏版）》请在金锄头文库上搜索。
1、Javascripts ParadiseMake Javascript more powerfully and easily怎样使拼接HTML字符串更快November 1st, 2009 . Posted in Javascript分析 | No Comments Tags: Javascript 拼接HTML代码，是经常会碰到的事情，如果拼接的HTML的代码量很小，就无所谓使用什么方法，可一旦数据量过大，那就得讲究一下拼接方法了。 或许很多人都会使用的一种方法是纯粹的字符串通过”+”符号拼接，如： view source print?1.var arr = item 1, item 2,
2、item 3, ., 2.list = ; 3.4.for (var i = 0, l = arr.length; i l; i+) 5.list += + arri + ; 6. 7.8.list = + list + ;但是这样方式拼接的速度非常慢，而且没有什么技巧性。 而第二种方法，大家或许会使用数组的方式，通过push来拼接，最后join一次，如： view source print?1.var arr = item 1, item 2, item 3, ., 2.list = ; 3.4.for (var i = 0, l = arr.length; i l; i+) 5.listl
3、ist.length = + arri + ; 6. 7.8.list = + list.join() + ;这个方法或许会比第一种方法好些，利用了数组的高效性，但是还有没有更好的方法呢？请看下面的例子： view source print?1.var arr = item 1, item 2, item 3, .; 2.3.var list = + arr.join() + ;够简介吧！而且值得说明的是，第三种方法比第一、二中方法在各个浏览器测试都普遍高效了几倍！让我们来看看各种方法在各个浏览器的执行时间比较：从这个测试中可以发现，第三种方法明显比第一、二种方法高效，所以，本人推荐使用第三种
4、方法。当然，拼接HTML的时候也不一定都是拼接ul，li标签，这要根据实际拼接的HTML标签的情况来选择不同的方法。替代使用switchcase的方法November 1st, 2009 . Posted in Javascript分析 | No Comments Tags: Javascript 今天在浏览James Padolsey的博客时，看到了他一篇关于替代使用switchcase的方法，评论的人也不少，How to avoid switch-case syndrome。 比如下面是一种使用switchcase的模式写的代码： view source print?01.switch (
5、something) 02.case 1: 03.doX(); 04.break; 05.case 2: 06.doY(); 07.break; 08.case 3: 09.doN(); 10.break; 11./ And so on. 12.这个代码使用起来基本没有问题，可是本人也都觉得，用switchcase分支来设计函数，有点显得丑陋，代码不够简练，当然，这种方式比起用ifelse if来又好了很多，可是又没有另外一种方式来替代switchcase的呢？下面是James Padolsey提出的方法： view source print?1.var cases = 2.1: doX, 3
6、.2: doY, 4.3: doN 5.; 6.if (casessomething) 7.casessomething(); 8.他是通过对象字面量的方式来存储条件，并且通过验证给的条件时候已存在于对象字面量中来实现检测和做下一步的事情。对象字面量有这么一个好处，可以通过判断它的属性是否存在，而确定如何执行代码；这跟数组不同，数组需要遍历才能知道一个元素是否已经存在于数组中。 因此，选择使用对象字面量还是数组来存储数据的前提就是：如果数据不是连续的，就使用对象字面量，如果是连续的，就使用数组。当然，这也不是绝对，因地制宜。关于RegExp对象exec方法的一点说明November 1st,
7、2009 . Posted in Javascript分析 | No Comments Tags: Javascript exec方法返回的数组类型相同，无论正则表达式是否具有全局标志g。当一个具有g标志的正则表达式调用exec方法时，它将把该对象的lastIndex属性设置到紧接着匹配字串的字符位置，当同一个正则表达式第二次调用exec时，它将从上次匹配的时候lastIndex属性所指示的字符处开始检索。如果exec没有发现任何匹配，它将会将lastIndex重置为0（任何时候都可以将lastIndex属性设为0）。这一特殊的行为使得可以反复调调用exec遍历一个字符串中所有匹配的正则表达式
8、。下面是网上摘录James Padolsey博客的一个非常有用的String类扩展函数（该函数来源于：String.prototype.extract）： view source print?01./n参数用于是返回捕获的匹配1，还是返回符合正则表达式的匹配0； 02.String.prototype.extract = function(regex, n) 03.n = n = undefined ? 0 : n; 04./如果正则表达式不带有g标志，则直接用match方法返回匹配结果 05.if (!regex.global) 06.return this.match(regex)n |
9、; 07. 08./否则，使用exec方法来遍历字符串并最终返回结果 09.var match, extracted = ; 10.while (match = regex.exec(this) 11.extractedextracted.length = matchn | ; 12. 13.return extracted; 14.; 15./Example: 16.alert(hi rob and adam, oh and bob).extract(/(w+)/g, 1);下面还有一个简单的字符串替换函数bindData，由Pete Boere提供，并经过James Padolsey的修改
10、： view source print?01.String.prototype.bindData = function (data) 02.var m,ret = this; 03.while ( m = /%s*(s+)s*/.exec(ret) ) 04.ret = ret.replace( m0, datam1 | ? ); 05. 06.return ret; 07.; 08.09./ Example 10.var data = 11.brown: red, 12.lazy: slow13.; 14.The quick %brown fox jumped over the %lazy
11、dog.bindData( data ); 15./ The quick red fox jumped over the slow dog实现Ajax请求队列按顺序执行October 31st, 2009 . Posted in Ajax, 原创 | No Comments Tags: Ajax 之前想做一个Web桌面的项目，考虑的必须得使用Ajax请求队列，使得Ajax的请求能按照队列按顺序执行，解决了Ajax异步传输覆盖的问题，也看了几个别人的代码，都整不太明白，所以自己干脆自己搞搞阵，自己实现，也得个安慰奖。我的实现方法很简单，通过递归调用函数，而无需使用定时器去检查Ajax请求是否已经
12、执行完毕，具体的例子请看下面的代码： Javascript:view source print?01.onload = function() 02.document.getElementById(btn).onclick = function() 03./添加请求队列 04.addAjax(method: GET,url: test2.txt,callback: callback1); 05.addAjax(method: GET,url: test.txt,callback: callback2); 06.addAjax(method: GET,url: test2.txt,callback
13、: callback3); 07./开始执行队列 08.executeAjax(); 09. 10. 11.12.var callback1 = function(data, xhr) 13.document.getElementById(div1).innerHTML = data; 14. 15.var callback2 = function(data, xhr) 16.document.getElementById(div2).innerHTML = data; 17. 18.var callback3 = function(data, xhr) 19.document.getElementById(div3).innerHTML = data; 20.HTML： view source print?1.getStyle test. 2.getStyle test. 3.getStyle test. 4.这三个请求会按顺序执行下来，请点击查看具体效
