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

Javascripts ParadiseMake Javascript more powerfully and easily怎樣使拼接HTML字符串更快November 1st, 2009 . Posted in Javascript分析 | No Comments Tags: Javascript 拼接HTML代碼，是經(jīng)常會碰到的事情，如果拼接的HTML的代碼量很小，就無所謂使用什么方法，可一旦數(shù)據(jù)量過大，那就得講究一下拼接方法了。 或許很多人都會使用的一種方法是純粹的字符串通過”+”符號拼接，如： 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 + ;但是這樣方式拼接的速度非常慢，而且沒有什么技巧性。 而第二種方法，大家或許會使用數(shù)組的方式，通過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() + ;這個方法或許會比第一種方法好些，利用了數(shù)組的高效性，但是還有沒有更好的方法呢？請看下面的例子： view source print?1.var arr = item 1, item 2, item 3, .; 2.3.var list = + arr.join() + ;夠簡介吧！而且值得說明的是，第三種方法比第一、二中方法在各個瀏覽器測試都普遍高效了幾倍！讓我們來看看各種方法在各個瀏覽器的執(zhí)行時間比較：從這個測試中可以發(fā)現(xiàn)，第三種方法明顯比第一、二種方法高效，所以，本人推薦使用第三種方法。當(dāng)然，拼接HTML的時候也不一定都是拼接ul，li標(biāo)簽，這要根據(jù)實際拼接的HTML標(biāo)簽的情況來選擇不同的方法。替代使用switchcase的方法November 1st, 2009 . Posted in Javascript分析 | No Comments Tags: Javascript 今天在瀏覽James Padolsey的博客時，看到了他一篇關(guān)于替代使用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分支來設(shè)計函數(shù)，有點顯得丑陋，代碼不夠簡練，當(dāng)然，這種方式比起用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.他是通過對象字面量的方式來存儲條件，并且通過驗證給的條件時候已存在于對象字面量中來實現(xiàn)檢測和做下一步的事情。對象字面量有這么一個好處，可以通過判斷它的屬性是否存在，而確定如何執(zhí)行代碼；這跟數(shù)組不同，數(shù)組需要遍歷才能知道一個元素是否已經(jīng)存在于數(shù)組中。 因此，選擇使用對象字面量還是數(shù)組來存儲數(shù)據(jù)的前提就是：如果數(shù)據(jù)不是連續(xù)的，就使用對象字面量，如果是連續(xù)的，就使用數(shù)組。當(dāng)然，這也不是絕對，因地制宜。關(guān)于RegExp對象exec方法的一點說明November 1st, 2009 . Posted in Javascript分析 | No Comments Tags: Javascript exec方法返回的數(shù)組類型相同，無論正則表達(dá)式是否具有全局標(biāo)志g。當(dāng)一個具有g(shù)標(biāo)志的正則表達(dá)式調(diào)用exec方法時，它將把該對象的lastIndex屬性設(shè)置到緊接著匹配字串的字符位置，當(dāng)同一個正則表達(dá)式第二次調(diào)用exec時，它將從上次匹配的時候lastIndex屬性所指示的字符處開始檢索。如果exec沒有發(fā)現(xiàn)任何匹配，它將會將lastIndex重置為0（任何時候都可以將lastIndex屬性設(shè)為0）。這一特殊的行為使得可以反復(fù)調(diào)調(diào)用exec遍歷一個字符串中所有匹配的正則表達(dá)式。下面是網(wǎng)上摘錄James Padolsey博客的一個非常有用的String類擴展函數(shù)（該函數(shù)來源于：Stotype.extract）： view source print?01./n參數(shù)用于是返回捕獲的匹配1，還是返回符合正則表達(dá)式的匹配0； 02.Stotype.extract = function(regex, n) 03.n = n = undefined ? 0 : n; 04./如果正則表達(dá)式不帶有g(shù)標(biāo)志，則直接用match方法返回匹配結(jié)果 05.if (!regex.global) 06.return this.match(regex)n | ; 07. 08./否則，使用exec方法來遍歷字符串并最終返回結(jié)果 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);下面還有一個簡單的字符串替換函數(shù)bindData，由Pete Boere提供，并經(jīng)過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實現(xiàn)Ajax請求隊列按順序執(zhí)行October 31st, 2009 . Posted in Ajax, 原創(chuàng) | No Comments Tags: Ajax 之前想做一個Web桌面的項目，考慮的必須得使用Ajax請求隊列，使得Ajax的請求能按照隊列按順序執(zhí)行，解決了Ajax異步傳輸覆蓋的問題，也看了幾個別人的代碼，都整不太明白，所以自己干脆自己搞搞陣，自己實現(xiàn)，也得個安慰獎。我的實現(xiàn)方法很簡單，通過遞歸調(diào)用函數(shù)，而無需使用定時器去檢查Ajax請求是否已經(jīng)執(zhí)行完畢，具體的例子請看下面的代碼： 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./開始執(zhí)行隊列 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.這三個請求會按順序執(zhí)行下來，請點擊查看具體效果 下面展示我所實現(xiàn)這個請求隊列的Javascript源碼：view source print?01.var ajaxes = ; /用于存儲參數(shù)對象的隊列 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是主要的執(zhí)行Ajax的函數(shù) 21.var executeAjax = function() 22./如果隊列為空，則退出執(zhí)行 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./如果隊列中還有請求，就接著遞歸執(zhí)行executeAjax函數(shù)，直到隊列為空 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./用于添加隊列的函數(shù) 46.var addAjax = function(options) 47.ajaxes.push(options); 48.上面寫的或許有些人會認(rèn)為封裝性不好，污染全局變量，如果封裝起來也是非常簡單的，這只是本人實現(xiàn)了這個效果時候的草稿，放到具體的項目中當(dāng)然會封裝為類或者對象，方便調(diào)用，具體的封裝后的代碼就不提供了。Server版本的CQuery出爐啦October 31st, 2009 . Posted in 原創(chuàng)Javascript | No Comments Tags: Javascript 大家看這個名字，可能會想到：Server版，是不是運用于服務(wù)器端的?。看鸢甘欠穸ǖ?，只是它使用了Ajax技術(shù)，所以需要服務(wù)器的環(huán)境去運行Ajax的返回數(shù)據(jù)，所以本地要IIS或者其他的服務(wù)器執(zhí)行環(huán)境來使用這個版本的cQuery。不過使用像Aptana這樣的軟件集成了服務(wù)器環(huán)境就可以直接運行程序。 使用這樣方法來引入文件的方式是由這個問題一直困擾我所激發(fā)的：比如jQuery，壓縮版的都有50多K，可是如果我的頁面只有20多K，只用到j(luò)Query的幾個dom方法而已，為此卻要加載jQuery50多K的內(nèi)容，多么不值，也花費過多的時間來加載js文件，影響頁面的加載速度。這個也是百度最后一關(guān)電話面試的時候面試官提出的問題，問我有什么解決方案，可惜當(dāng)時沒有想到，也因此落選了。過后仔細(xì)想想。通過Ajax的方式，或許會實現(xiàn)，也就開始著手去研究出來了。雖然這個版本的cQuery需要服務(wù)器的環(huán)境去異步調(diào)用Ajax會在本地直接測試有點點麻煩，但也是一種解決方案。而不是通過用document.write來動態(tài)生成script標(biāo)簽，連入文件，這個會影響頁面的加載速度，不是一種很好的解決方案。 這個版本最大的特點就是：頁面中你只需要連接一個核心的代碼文件cQuery.js，這個文件只有4.57K，這個文件會在文檔中一起加載，而其他的js代碼功能文件都通過參數(shù)的形式用ajax來引入，用ajax來引入的好處就是它的加載跟頁面的加載獨立，不會影響頁面的加載速度。比如： view source print?1.通過這個鏈接，就可以把dom和event文件內(nèi)的功能函數(shù)引入到核心代碼中并執(zhí)行。引入這兩個文件是通過ajax的形式加載，因此，不會影響html頁面的加載速度。 在實現(xiàn)的時候最難的就是判斷ajax加載的數(shù)據(jù)何時加載完畢，這個困擾了些時間。最后通過閉包的形式解決了問題，核心代碼中有一個判斷頁面時候加載完畢并且判斷ajax何時加載內(nèi)容完畢的對象，通過這個方法就解決了這個等ajax加載完并執(zhí)行功能函數(shù)的問題。比如： view source print?1.$(function() 2.$(#div).load(demo/demo.txt); 3.); 4./這個方法：$(function();是要等到DOM加載完成并且script參數(shù)的的文件也加載完畢的時候才會執(zhí)行通過script的參數(shù)，就可以引入你想要使用的函數(shù)，而無需加載沒有必要的代碼，花費加載時間。但是也應(yīng)該知道，因為是通過ajax后臺加載文件，所以如果網(wǎng)速慢的話，初始化會花費一點點的時間，這要看網(wǎng)速。目前外部加載的文件包括：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: 包括常規(guī)的事件，同時還有hover,toggle,one,bind,unbind事件。 或許大家看到這些方法都不陌生，這些都是仿照jQuery的方式的名稱和使用方式，為了不希望大家又要去記住一套不同的方法名稱和使用方式，而把每個庫的使用方法給搞混了，這是把這些方法寫成這樣的原因。目前方法還不是很多，正在進(jìn)一步更新中。敬請期待，謝謝！ 使用這個版本的cQuery的時候有些地方需要說明一下：如果頁面中有幾個script標(biāo)簽，需要把導(dǎo)入cQuery的標(biāo)簽必須放到第一個就可以了。如果你同時需要使用幾個文件的功能函數(shù)，可以這樣來連入： view source print?1.如果后面沒有參數(shù)，直接導(dǎo)入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的下載文件，不過都是經(jīng)過壓縮的代碼。Server cQuery操作元素位置、可見性、透明度的幾個函數(shù)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./利用遞歸讀取元素相對于它的父元素的左邊的距離來實現(xiàn) 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屬性來切換元素可見性的一組函數(shù) 32.var hide = function(elem) 33./找出元素當(dāng)前的狀態(tài) 34.var curDisplay = getStyle(elem, display); 35.if (curDisplay != none) 36./記錄它的原始display狀態(tài) 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./調(diào)節(jié)元素透明度的函數(shù) 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實現(xiàn)深度繼承的三個函數(shù)的解釋October 28th, 2009 . Posted in Inheritance, Javascript分析 | No Comments Tags: Javascript 剛開始看到那個擴展inherits方法的時候，很懵，恁是看不懂，通過John Resig所著的Pro JavaScript Techniques中文版中關(guān)于這個函數(shù)的解釋，思路逐漸清晰，可是仔細(xì)看代碼，發(fā)現(xiàn)書中的解釋莫名其妙，翻譯的質(zhì)量有待提高。但是還是有些疑問沒有弄明白，就是關(guān)于級數(shù)深度的設(shè)計，如果說只有一級繼承的話，還好理解。但是處于多級的角度來思考，后面的增1減1還是不太明白。 下面是我對于它的一點點解釋，有錯誤希望大家指正！ view source print?01./擴展內(nèi)置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特權(quán)函數(shù)， 11./調(diào)用它時會執(zhí)行所有在繼承時被重寫的函數(shù)，也就是父類的函數(shù) 12.this.method(base, function uber(name) 13./檢查name是否已經(jīng)包含在d對象中 14.if (!(name in d) 15.dname = 0; 16. 17./f:要執(zhí)行的函數(shù) 18./r:函數(shù)的返回值 19./t:繼承的深度（級數(shù)） 20./v:父類的prototype 21.var f, r, t = dname, v = totype; 22./如果要調(diào)用跨級的父類的方法 23.if (t) 24./上溯到必要的級數(shù)，以找到原始的prototype 25.while (t) 26.v = totype; 27.t -= 1; 28. 29./從該prorotype中獲得函數(shù) 30.f = vname; 31. else /否則就調(diào)用本子類的直接父類的方法 32./從該prorotype中獲得函數(shù) 33.f = pname; 34./如果次函數(shù)為當(dāng)前對象的函數(shù) 35.if (f = thisname) 36./則改為父對象的函數(shù) 37.f = vname; 38. 39. 40./記錄繼承的級數(shù) 41.dname += 1; 42./使用除第一個以外所有的arguments調(diào)用此函數(shù)（因為第一個參數(shù)是函數(shù)名） 43./通過這種方式，就可以給函數(shù)傳遞實參 44.r = f.apply(this, Atotype.slice.apply(arguments, 1); 45./恢復(fù)繼承級數(shù) 46.dname -= 1; 47.return r; 48.); 49.return this; 50.); 51./將參數(shù)內(nèi)的類的方法和屬性添加到調(diào)用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, 原創(chuàng)Javascript | No Comments Tags: Javascript 每個對象都連接到一個原型對象，并且它可以從中繼承屬性，所有通過對象字面量創(chuàng)建的對象都連接到Ototype這個Javascript中標(biāo)準(zhǔn)的對象。 當(dāng)你創(chuàng)建一個新對象時，你可以選擇某個對象作為它的原型。Javascript提供的實現(xiàn)機制雜亂而復(fù)雜，但其實可以被明顯的簡化。我們將給Object添加一個beget方法，這個beget方法創(chuàng)建一個使用原對象作為其原型的新對象。 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.當(dāng)我們對某個對象作出改變時，不會觸及到該對象的原型，原型連接在對象更新時是不起作用的。 原型連接只有在檢索值的時候才被用到。如果我們嘗試去獲取對象的某個屬性值，且該對戲那個沒有次屬性名，那么Javascript會試著從原型對象中獲取屬性值。如果那個原型對象也沒有該屬性，那么再從它的原型中尋找，依次類推，直到該過程最后達(dá)到終點Ototype。如果想要的屬性完全不存在于原型鏈中，那么結(jié)果就是undefined值。這個過程成為委托。這種現(xiàn)象在for in語句中最能體現(xiàn)出來，因此我們需要檢測對象的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方法不會執(zhí)行，因為它不是Sub的成員 20.Subo(); 21. 22.獲得元素的最終樣式October 28th, 2009 . Posted in DOM, 原創(chuàng)Javascript | No Comments Tags: DOM, Javascript 在獲得元素的最終樣式方面，IE和其他主流瀏覽器的獲得方式有很大的不同，IE使用DOM元素的currentStyle屬性來獲得，其他主流瀏覽器（FF，Safria，Opera等等）使用getComputedStyle方法來獲得。下面是我寫的封裝的函數(shù)源碼： 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.當(dāng)然，有些人利用document.defaultView的getComputedStyle方法來獲得： view source print?01.var getStyle=function(elem, name) 02.if (elem.stylename) /如果屬性存在與style中，那么它已被設(shè)置了（并且是當(dāng)前的） 03.return elem.stylename; 04. else if