整站都经过XHTML重构了。打开速度比以往快很多。。界面还算清爽。。（顿时又有下载软件的冲动了。。。

好久没去霏凡下载了的说。。。想想在学校时软件发布了alpha版都要试一试。。。怀念那个疯狂的年代。。ioi

今天给一个校友的网站修正bug来的。网站基于Discuz! 7.0版本。

症状是在google chrome下，论坛分栏模式的栏目树形菜单显示异常。其他主流浏览器均正常。

首先迅速定位到bug的位置：

在leftmenu.htm这个模板中，引入的几个javascript，标签书写有问题。文件第62~65行的代码<script>起始标签均多了一个斜杠"/"，于是在chrome下不能被正确解析。导致javascript报出未定义异常。

本以为这样就大功告成了，不想还是无法成功显示树形菜单。

于是更进一步，追踪到树形菜单的核心代码。问题发生在createTree这个函数中。chrome浏览器报异常为：未捕获异常：属性pid未定义。tree.js 84行

经过排查，发现javascript中，用for...in...去遍历一个函数内部的数组元素的时候会多一个名称索引为push元素，是一个函数对象。自己随手建一个空的数组用for...in...去遍历输出元素依然会多一个push元素。诶？push不是Array对象的内置方法么？内置对象为什么会在for...in...中被列举出来？追根溯源，查证原来是网站的common.js中重写了Array对象的prototype中的push方法。这样，问题就明朗了。我自然是不敢动common.js里的方法，只有硬着头皮去改tree.js中的实现了。

	var theNode = this.nodes[id];
	var ks=k.toString();
	var kps=id.toString();
	if(!/\d+/.test(ks)||!/\d+/.test(kps)){continue;}

方法虽然有些牵强，总算还是能正常运转。。
不过，痛定思痛，造成这个异常的原因何在？我们知道，IE系列(Trident引擎)、mozilla系列(Gecko引擎)、chrome以及safari(KHTML/WebKit引擎)系列有着不同的渲染引擎，其中又包括HTML的解析部分和对javascript的解析部分。必定是它们对于javascript的实现上有区别所致。而恰恰common.js中又重写了Array的prototype，导致Array实例化出的数组对象发生“变异”。当用for...in...去遍历数组元素时，正常的内置对象比如toString啊pop什么的被隐藏的好好的，变异的push对象就被暴露出来。

总结教训：

1、尽量不要修改原生对象的prototype

2、杜绝变量污染，如果定义变量可能被多次使用请把它放在命名空间内

3、不同的浏览器的js实现不同，单纯遍历数组元素时尽量不要用for...in...（说句题外话，有人做过测试，javascript对于数组的遍历，for...in...的方式效率最低）

    经历了5个版本的beta和3个版本的RC，firefox3终于千呼万唤始出来。北京时间明天就能下载到正式版了。

    感觉ff3的改变还是很大的，速度比ff2快了许多（尤其是脚本执行速度快了不止一个数量级，新核心果然不同凡响），而且功能更人性化了（其他更多改进请参见官方的发布说明）。前一段时间由于插件支持原因没有正式使用ff3，刚才上网发现常用的几个插件，如firebug，brief 等等都有了支持的新版本，可喜可贺啊——考虑明天晚上是不是下载一个正式版来用。

    mozilla基金会是强大的。。浏览器的历史会因他们的努力而记住这一天。一旦你学着习惯按需配置自己的插件，而不是期待着用一个因面面俱到而臃肿不堪的浏览器，那么，firefox是你最佳的选择。

    转载请注明出处。另：本篇不是广告，仅仅是自说自话的书评

    还是javascript，不过这本书很不落俗套。

    刚买回来，还没有深入的看 。感觉作者确实是着眼于实际开发的点滴经验写成的，而不是大篇的抄袭某些规范。大致翻了下目录，涉及了语法上的一些高级问题，语言特性本身如原型继承等等，然后又针对函数式编程和函数动态特性进行了探讨，最后——用一个Qomo的例子作为实例讲解。全书行文更像散文夹叙夹议的。书的起点比较高，不是那种Step by Step的初级教程，适合做过一点开发而且对javascript本身有兴趣的人读，挖掘语言本身的东西比较多且不限于浏览器应用。说实话，进阶实用性较强的书还是jQuery之父写的那本《Pro javascript Techniques》，中文版叫做《精通javascript》，已由人邮出版。

    我向来比较厌恶市面上一些国人的技术著作的，但凡微软必摘抄MSDN，但凡web前端开发必然是那种可以称为“百度文摘”的——而且还冠以“DIV+CSS”这种不伦不类的名字，至于设计类的，绝大多数更是本着“书非抄不能著也”的潜规则，日复一日的干着污钱的勾当。

    然而，这本书却让我眼前一亮，决定读下去了。而且， 脑海中“言必称尧舜，书必读国外”的观念也该更新了。。。うん！破缺是很美的恩！

 哦，既然是推荐，就说说吧：

最后抱怨一句：为什么封面让我想起了大学时代的模电书！！！  TдT||| 

    浏览器兼容性问题是每个Web开发人员所不愿面对的。最近发现了这么一个软件，可以很好的模拟IE5.5~IE8.0beta1的页面引擎和js引擎的呈现效果。强烈推荐！

    这个软件支持XP，Vista系统。不过系统内必须得安装IE7以上版本才能正常运行。

    软件官方介绍：http://www.my-debugbar.com/wiki/IETester/HomePage

    下载地址：
    >>官方地址：http://www.my-debugbar.com/ietester/install-ietester-v0.2.exe
    >>纳米盘： http://www.namipan.com/d/26f5f12ffc8654d7021bc7aec5a012359deb14ba9c7b7c01

    首先，要对我前天对代码测试的不严格道歉。现在推出了兼容ie6的版本。
    说说这个功能的实现思路。首先，创建一个名为Em的对象。初始化init方法进行两项任务：创建表情列表和替换评论中的表情代码。
    blogbus的新模板，评论表单的代码都是封装好的，因此不能随意插入内容。所以必须通过javascript对其进行手术。
    代码1-EM.build

build: function()
{
    var ofrag=document.createDocumentFragment();//创建文档碎片
    var o=document.createElement("DIV");
    o.id="emot";o.style.padding="5px";o.style.width="400px";
    for(var i=0,j=Em.num;i<j;i++){
        var a=document.createElement("A");
        a.style.border="none";a.style.margin="2px";
        a.href="javascript:Em.addEm\("+(i+1)+"\)";
        var im=document.createElement("IMG");
        im.src=Em.addr+(i+1)+".gif";//Em.addr为blogbus系统表情地址
        a.appendChild(im);
        o.appendChild(a);
    }
    ofrag.appendChild(o);
    return ofrag;//返回文档碎片
},

    build方法主要使用了文档碎片。DOM操纵是代码中比较耗时的，所以尽量避免频繁使用。使用文档碎片的好处就是不用频繁操纵DOM。最后需要时一次性把文档碎片插入到DOM树中。
    在Em对象初始化构建表情列表、插入到页面DOM之后，对事件进行绑定。这里分别绑定了表单中textarea的focus和blur事件。来显示/隐藏表情列表。代码比较简单，唯一要提的就是textarea失去焦点时，用延时函数推迟列表隐藏——以免点击列表中的表情时触发textarea的blur事件造成无法点击表情按钮。代码并不复杂，这里就不给出了，可以参照js文件自行修改。
     要着重说的就是插入表情的实现和替换文中的表情代码。请看下面两段函数。
    代码2-Em.addEm,Em.replaceEmot

    看到代码可能会发现，实现方法非常简单。插入表情就是在文章中插入类似模板标签的{#face:数字}来代表自定义表情。替换时，将匹配{#face:两位数字}的数字替换到地址字符串中。这里用到了正则表达式。其中把\d{1,2}进行捕获性分组，以便用RegExp对象的$符号进行反向引用$1就是正则表达式中第一个捕获性分组的匹配字符。最后应用replaceHtml方法进行替换。关于replaceHtml的更多细节请参考《通过Dom方法提高innerHTML的性能》
    顺便说一下，之前不兼容ie 6的实现的方法中，表情列表是在一个z-index为100的容器内的，然后通过累加计算offsetTop的方法来定位这个容器。但是ie 6好像对于含z-index元素的offsetParent计算有问题（这是我的猜想），导致ie 6的实际位置显示不正确（我没找到出现这种情况的原因和解决方法，希望高手能指点一下）。

    看到站务论坛里有人问这个，于是心血来潮写了这么一篇。
    这次想借机会说说Javascript的“面向对象”的编程。
    当然，面向对象的javascript的目的之一是为了实现unobtrusive programming.何谓"Unobtrusive"?接触这个词也是半年以前。简单说来，就是为了Web标准的终极目的：表现与内容的分离。于是便有了这个“非入侵式”，“不乱入的”，或者按照人邮版的《DOM Scripting（DOM编程艺术）》翻译的“分离式”的javascript.我看很多资料上把这个unobtrusive解释的很晦涩，倒不如用Web标准本身去解释这个web标准的派生词来的直观。
    所谓面向对象的js编程，就是把javascript的方法封装在一个对象里，通过对这个对象进行扩展，派生来代替传统的javascript面向过程的函数实现模式。这样的好处显而易见的是提高了代码的重用性。而且封装也避免了javascript全局变量的相互“污染”。要知道，全局变量绝对是前端代码中的魔鬼（参见：javascript风格要素[@Dancewithnet]）！把中间变量隐藏在对象内部，只对外界提供有限的接口，是提高代码质量的很好途径。
    接下来，话题回归问题本身。实际上，我的这个实现方式没有真正的达到“Unobtrusive”，因为为了精简代码，最终还是选择在模板detail页面内部插入一段内联javascript脚本。这无形中破坏了页面的语义性。但是这段代码的封装还是良好的。它的实现目标很简单：第一，插入容器，生成表情列表，第二，根据代码中定义的表情代码去还原文中的表情。难点在于以下几方面：第一，如何生成列表；第二，如何响应事件插入评论框；第三，字符串替换问题。下面就着重把这几个难关逐个击破。
    在detail代码框最后加入一个javascript标签，先创建一个对象，这里我用了对象的字面量（literal）。

   <script type="text/javascript>
    //<![CDATA[
        var Em={
          addr:"http://public.blogbus.com/biaoqing/163/",//系统表情地址
          num:24,//表情总数，取自系统
          build:function(){/*...*/},//构建表情列表
          setPos:function(){/*...*/},//初始化位置样式
          addEm:function(index){/*...*/},//评论内插入表情符号
          replaceEmot:function(index){/*...*/},//替换表情符号
          replaceHtml:function(el,html){/*...*/},//替换innerHTML   
          init:function(){/*...*/}//初始化封装代码
       };
        Em.init();//调用init方法去初始化对象
    //]]>
  </script>
    我这里给大家代码下载地址，这是新模板系统适用的代码，如果旧模板系统要使用请自行进行相应修改:

http://files.blogbus.com/arthuridea.blogbus.com/files/12074897320.js[Updated]

   新模板系统用户可以在detail里输入下面代码使用(ie6下还存在问题！)已经修正了ie 6的bug：

    分析之后，我认为整个列表没有必要写死在页面中。因为这个功能本来就是基于用户开启了javascript这个前提之下的，所以整个DOM元素的构建也使用了脚本。我先总体进行一些说明，下一篇再着重介绍主要功能实现。要说明的：replaceHtml方法使用了蓝色理想的怿飞斑竹介绍过的提高innerHTML效率的代码，原文参见：《通过Dom方法提高innerHTML的性能》在此感谢怿飞斑竹的介绍文章。替换表情符号使用了正则表达式的反向引用实现。构建表情列表的亮点则是使用了类似java中的StringBuffer来提高字符串处理的效率兼容IE 6的版本使用标准DOM的方法构建的表情列表。
   通过上半部分的内容，功能实现的大体框架大家应该有了一些印象。借助源码，可能很快就能完成属于你的配置。下半部分着重介绍一下关键函数的实现。也算是我对这段代码的一点心得总结。

[上一篇教程多有忽悠大众之嫌，所以这篇决定好好写一下，如有纰漏欢迎不吝指教~] 

    似乎很久没有写关于blogbus模板的教程了。这次写一篇页面效果的。算是当初预定的“画龙点睛”篇的开篇吧。

    这次任务的目标是使blog在载入完成之前显示一个模态（所谓模态就是在这个阶段未执行完毕时无法进入下一个阶段的操作）的Loading字样。待页面载入完毕灰色的模态层消失。

    ……

    [详细内容请点击“阅读全文”]