怎样使拼接HTML字符串更快.doc

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, 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.listlist.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() + ;够简介吧！而且值得说明的是，第三种方法比第一、二中方法在各个浏览器测试都普遍高效了几倍！让我们来看看各种方法在各个浏览器的执行时间比较：从这个测试中可以发现，第三种方法明显比第一、二种方法高效，所以，本人推荐使用第三种方法。当然，拼接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 (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.2: doY, 4.3: doN 5.; 6.if (casessomething) 7.casessomething(); 8.他是通过对象字面量的方式来存储条件，并且通过验证给的条件时候已存在于对象字面量中来实现检测和做下一步的事情。对象字面量有这么一个好处，可以通过判断它的属性是否存在，而确定如何执行代码；这跟数组不同，数组需要遍历才能知道一个元素是否已经存在于数组中。 因此，选择使用对象字面量还是数组来存储数据的前提就是：如果数据不是连续的，就使用对象字面量，如果是连续的，就使用数组。当然，这也不是绝对，因地制宜。关于RegExp对象exec方法的一点说明November 1st, 2009 . Posted in Javascript分析 | No Comments Tags: Javascript exec方法返回的数组类型相同，无论正则表达式是否具有全局标志g。当一个具有g标志的正则表达式调用exec方法时，它将把该对象的lastIndex属性设置到紧接着匹配字串的字符位置，当同一个正则表达式第二次调用exec时，它将从上次匹配的时候lastIndex属性所指示的字符处开始检索。如果exec没有发现任何匹配，它将会将lastIndex重置为0（任何时候都可以将lastIndex属性设为0）。这一特殊的行为使得可以反复调调用exec遍历一个字符串中所有匹配的正则表达式。下面是网上摘录James Padolsey博客的一个非常有用的String类扩展函数（该函数来源于：Stotype.extract）： view source print?01./n参数用于是返回捕获的匹配1，还是返回符合正则表达式的匹配0； 02.Stotype.extract = function(regex, n) 03.n = n = undefined ? 0 : n; 04./如果正则表达式不带有g标志，则直接用match方法返回匹配结果 05.if (!regex.global) 06.return this.match(regex)n | ; 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的修改： view source print?01.Stotype.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 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请求是否已经执行完毕，具体的例子请看下面的代码： 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: 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.这三个请求会按顺序执行下来，请点击查看具体效果 下面展示我所实现这个请求队列的Javascript源码：view source print?01.var ajaxes = ; /用于存储参数对象的队列 02./用于声明XMLHttpRequest实例对象 03.var Xhr = function() 04.var xhr = false; 05.try 06.xhr = new XMLHttpRequest(); 07. 08.catch (e) 09.try 10.xhr = new ActiveXObject(Msxml2.XMLHTTP); 11. 12.catch (e) 13.xhr = new ActiveXObject(Microsoft.XMLHTTP); 14. 15. 16.return xhr; 17. 18.19.var xhr = new Xhr(); /获得XMLHttpRequest实例对象xhr 20./executeAjax是主要的执行Ajax的函数 21.var executeAjax = function() 22./如果队列为空，则退出执行 23.if (!ajaxes.length) 24.return; 25.var options = ajaxes0; 26.if (xhr) 27.xhr.open(options.method, options.url, true); 28.xhr.onreadystatechange = function() 29.if (xhr.readyState = 4 & (xhr.status = 200 | xhr.status = 304) 30.options.callback(xhr.responseText, xhr); 31./删除队列中的第一个请求 32.ajaxes.shift(); 33./如果队列中还有请求，就接着递归执行executeAjax函数，直到队列为空 34.if (ajaxes.length 0) 35.executeAjax(); 36. 37. 38. 39.if (xhr.method = post) 40.xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded); 41. 42.xhr.send(options.data | null); 43. 44. 45./用于添加队列的函数 46.var addAjax = function(options) 47.ajaxes.push(options); 48.上面写的或许有些人会认为封装性不好，污染全局变量，如果封装起来也是非常简单的，这只是本人实现了这个效果时候的草稿，放到具体的项目中当然会封装为类或者对象，方便调用，具体的封装后的代码就不提供了。Server版本的CQuery出炉啦October 31st, 2009 . Posted in 原创Javascript | No Comments Tags: Javascript 大家看这个名字，可能会想到：Server版，是不是运用于服务器端的啊？答案是否定的，只是它使用了Ajax技术，所以需要服务器的环境去运行Ajax的返回数据，所以本地要IIS或者其他的服务器执行环境来使用这个版本的cQuery。不过使用像Aptana这样的软件集成了服务器环境就可以直接运行程序。 使用这样方法来引入文件的方式是由这个问题一直困扰我所激发的：比如jQuery，压缩版的都有50多K，可是如果我的页面只有20多K，只用到jQuery的几个dom方法而已，为此却要加载jQuery50多K的内容，多么不值，也花费过多的时间来加载js文件，影响页面的加载速度。这个也是百度最后一关电话面试的时候面试官提出的问题，问我有什么解决方案，可惜当时没有想到，也因此落选了。过后仔细想想。通过Ajax的方式，或许会实现，也就开始着手去研究出来了。虽然这个版本的cQuery需要服务器的环境去异步调用Ajax会在本地直接测试有点点麻烦，但也是一种解决方案。而不是通过用document.write来动态生成script标签，连入文件，这个会影响页面的加载速度，不是一种很好的解决方案。 这个版本最大的特点就是：页面中你只需要连接一个核心的代码文件cQuery.js，这个文件只有4.57K，这个文件会在文档中一起加载，而其他的js代码功能文件都通过参数的形式用ajax来引入，用ajax来引入的好处就是它的加载跟页面的加载独立，不会影响页面的加载速度。比如： view source print?1.通过这个链接，就可以把dom和event文件内的功能函数引入到核心代码中并执行。引入这两个文件是通过ajax的形式加载，因此，不会影响html页面的加载速度。 在实现的时候最难的就是判断ajax加载的数据何时加载完毕，这个困扰了些时间。最后通过闭包的形式解决了问题，核心代码中有一个判断页面时候加载完毕并且判断ajax何时加载内容完毕的对象，通过这个方法就解决了这个等ajax加载完并执行功能函数的问题。比如： view source print?1.$(function() 2.$(#div).load(demo/demo.txt); 3.); 4./这个方法：$(function();是要等到DOM加载完成并且script参数的的文件也加载完毕的时候才会执行通过script的参数，就可以引入你想要使用的函数，而无需加载没有必要的代码，花费加载时间。但是也应该知道，因为是通过ajax后台加载文件，所以如果网速慢的话，初始化会花费一点点的时间，这要看网速。目前外部加载的文件包括：dom（6.12K），ajax（1.25K），document（2.23），effect（0.167K），effect（1.06K）。因为目前cQuery提供的方法还不是很多，所以外部的文件的大小事非常小的，ajax加载起来速度也是非常的快。各个文件包括的方法有：dom: text,html,val,attr,removeAttr,css,height,width,chilidren,siblings,select,get,gt,lt,between,addClass,removeClass,toggleClass,parent,next,previous,first,last,merge. ajax: $.get,$.post,load. document: clone,prepend,append,appendTo,prependTo,before,after,insertBefore,insertAfter,empty,remove,wrap,replace. effect: show,hide. event: 包括常规的事件，同时还有hover,toggle,one,bind,unbind事件。 或许大家看到这些方法都不陌生，这些都是仿照jQuery的方式的名称和使用方式，为了不希望大家又要去记住一套不同的方法名称和使用方式，而把每个库的使用方法给搞混了，这是把这些方法写成这样的原因。目前方法还不是很多，正在进一步更新中。敬请期待，谢谢！ 使用这个版本的cQuery的时候有些地方需要说明一下：如果页面中有几个script标签，需要把导入cQuery的标签必须放到第一个就可以了。如果你同时需要使用几个文件的功能函数，可以这样来连入： view source print?1.如果后面没有参数，直接导入cQuery.js文件，那么只能使用核心提供的each方法和length方法，each方法的使用跟jQuery是类似的： view source print?1.$(function() 2.$(div).each(function(i) 3.alert(this.innerHTML); 4.); 5.);这些方法的使用方式请参考普通版的cQuery的API更多的使用例子请查看Demo页面：Demo最后，提供了Server版的cQuery的下载文件，不过都是经过压缩的代码。Server cQuery操作元素位置、可见性、透明度的几个函数October 30th, 2009 . Posted in Javascript分析 | No Comments Tags: Javascript view source print?01./获取元素最终样式 02.var getStyle = function(el, c) 03.if (el.currentStyle) /IE 04.return el.currentStylec; 05. else if (window.getComputedStyle) /W3C 06.return window.getComputedStyle(el, null)c; 07. else 08.return el.stylec; 09. 10. 11.12./确定元素相对于整个文档的x和y位置的距离 13./原理：如果元素存在于多个嵌套中，则递归求取元素相对于父元素的距离 14.var pageX = function(elem) 15./利用递归读取元素相对于它的父元素的左边的距离来实现 16.return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft; 17. 18.var pageY = function(elem) 19.return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop; 20. 21.22./确定元素相对于父元素的位置的距离 23./原理：为了在有些浏览器offsetParent指向的错误，需要比较元素和父元素在页面中的位置的差值 24.var parentX = function(elem) 25.return elem.parentNode = elem.offsetParent ? elem.offsetLeft : pageX(elem) - pageX(elem.parentNode); 26. 27.var parentY = function(emel) 28.return elem.parentNode = elem.offsetParent ? elem.offsetTop : pageY(elem) - pageY(elem.parentNode); 29. 30.31./使用CSS的display属性来切换元素可见性的一组函数 32.var hide = function(elem) 33./找出元素当前的状态 34.var curDisplay = getStyle(elem, display); 35.if (curDisplay != none) 36./记录它的原始display状态 37.elem.oldDisplay = curDisplay; 38. 39.elem.style.display = none; 40. 41.var show = function(elem) 42.elem.style.display = elem.oldDisplay | block; 43. 44.45./调节元素透明度的函数 46.var setOpacity = function(elem, level) 47.if (elem.filters) /IE 48.elem.style.filter = alpha(opacity= + level + ); 49. else /W3C 50.elem.style.opacity = level / 100; 51. 52.Douglas Crockford实现深度继承的三个函数的解释October 28th, 2009 . Posted in Inheritance, Javascript分析 | No Comments Tags: Javascript 刚开始看到那个扩展inherits方法的时候，很懵，恁是看不懂，通过John Resig所著的Pro JavaScript Techniques中文版中关于这个函数的解释，思路逐渐清晰，可是仔细看代码，发现书中的解释莫名其妙，翻译的质量有待提高。但是还是有些疑问没有弄明白，就是关于级数深度的设计，如果说只有一级继承的话，还好理解。但是处于多级的角度来思考，后面的增1减1还是不太明白。 下面是我对于它的一点点解释，有错误希望大家指正！ view source print?01./扩展内置Function类的方法 02.Ftotype.method = function(name, func) 03.totypename = func; 04.return this; 05.; 06.07.Function.method(inherits, function(parent) 08.var d = ; 09.var p = (totype = new parent(); /从父类继承方法 10./给子类添加一个base特权函数， 11./调用它时会执行所有在继承时被重写的函数，也就是父类的函数 12.this.method(base, function uber(name) 13./检查name是否已经包含在d对象中 14.if (!(name in d) 15.dname = 0; 16. 17./f:要执行的函数 18./r:函数的返回值 19./t:继承的深度（级数） 20./v:父类的prototype 21.var f, r, t = dname, v = totype; 22./如果要调用跨级的父类的方法 23.if (t) 24./上溯到必要的级数，以找到原始的prototype 25.while (t) 26.v = totype; 27.t -= 1; 28. 29./从该prorotype中获得函数 30.f = vname; 31. else /否则就调用本子类的直接父类的方法 32./从该prorotype中获得函数 33.f = pname; 34./如果次函数为当前对象的函数 35.if (f = thisname) 36./则改为父对象的函数 37.f = vname; 38. 39. 40./记录继承的级数 41.dname += 1; 42./使用除第一个以外所有的arguments调用此函数（因为第一个参数是函数名） 43./通过这种方式，就可以给函数传递实参 44.r = f.apply(this, Atotype.slice.apply(arguments, 1); 45./恢复继承级数 46.dname -= 1; 47.return r; 48.); 49.return this; 50.); 51./将参数内的类的方法和属性添加到调用swiss方法的类中 52.Function.method(swiss, function(parent) 53.for (var i = 1; i arguments.length; i += 1) 54.var name = argumentsi; 55.totypename = totypename; 56. 57.return this; 58.);对象原型prototypeOctober 28th, 2009 . Posted in Inheritance, 原创Javascript | No Comments Tags: Javascript 每个对象都连接到一个原型对象，并且它可以从中继承属性，所有通过对象字面量创建的对象都连接到Ototype这个Javascript中标准的对象。 当你创建一个新对象时，你可以选择某个对象作为它的原型。Javascript提供的实现机制杂乱而复杂，但其实可以被明显的简化。我们将给Object添加一个beget方法，这个beget方法创建一个使用原对象作为其原型的新对象。 view source print?1.if(typeof Object.beget != function) 2.Object.beget=function(o) 3.var F=function(); 4.F.prototype=o; 5.return F(); 6. 7.当我们对某个对象作出改变时，不会触及到该对象的原型，原型连接在对象更新时是不起作用的。 原型连接只有在检索值的时候才被用到。如果我们尝试去获取对象的某个属性值，且该对戏那个没有次属性名，那么Javascript会试着从原型对象中获取属性值。如果那个原型对象也没有该属性，那么再从它的原型中寻找，依次类推，直到该过程最后达到终点Ototype。如果想要的属性完全不存在于原型链中，那么结果就是undefined值。这个过程成为委托。这种现象在for in语句中最能体现出来，因此我们需要检测对象的hasOwnProperty方法来确定这个属性名就是该对象的成员，还是从其原型里找到的。 view source print?01.Object.beget = function(o) 02.var F = function() 03.; 04.F.prototype = o; 05.return new F(); 06. 07.var Parent = 08.say: function() 09.alert(say hello.); 10. 11. 12.var Sub = Object.beget(Parent); 13.Sub.show = function() 14.alert(show message.); 15. 16.17.for (var o in Sub) 18.if (Sub.hasOwnProperty(o) 19./Sub对象从Parent对象继承的say方法不会执行，因为它不是Sub的成员 20.Subo(); 21. 22.获得元素的最终样式October 28th, 2009 . Posted in DOM, 原创Javascript | No Comments Tags: DOM, Javascript 在获得元素的最终样式方面，IE和其他主流浏览器的获得方式有很大的不同，IE使用DOM元素的currentStyle属性来获得，其他主流浏览器（FF，Safria，Opera等等）使用getComputedStyle方法来获得。下面是我写的封装的函数源码： view source print?01./注意：样式属性的书写格式必须是骆驼型，比如:font-size要写成fontSize 02.var getStyle = function(el, c) 03.if (el.currentStyle) /IE 04.return el.currentStylec; 05. else if (window.getComputedStyle) /W3C 06.return window.getComputedStyle(el, null)c; 07. else 08.return el.stylec; 09. 10.当然，有些人利用document.defaultView的getComputedStyle方法来获得： view source print?01.var getStyle=function(elem, name) 02.if (elem.stylename) /如果属性存在与style中，那么它已被设置了（并且是当前的） 03.return elem.stylename; 04. else if