prototype确实实用

今天解决一个bug时花了很长时间分析定位。

起因是我们自己写了一个tab函数，用来支持网页上分tab显示内容，可以局部更新，支持缓存和刷新。
但是后来发现，refresh content的时候采用AJAX方式取数据，而数据中的js脚本并不会执行。一开始不知道为什么会这样，我一直以为只要设置innerHTML就会执行包含的js，单独写了两个页面用prototype的Ajax.updater试验，也是可以执行的，真是搞不懂。
前辈教导我们，搞不定的时候读源码永远是一个好主意。于是看prototype──哦，原来如此：

javascript 代码

update: function(element, html) {
  html = typeof html == 'undefined' ? '' : html.toString();
  $(element).innerHTML = html.stripScripts();
  setTimeout(function() {html.evalScripts()}, 10);
  return element;
},

设置innerHTML时并不会做什么js的执行工作，其实是prototype帮我们完成了工作。真是实践中凝结的代码阿，它专门扩展了String类，添加了stripScripts和evalScripts，让我们方便许多。

嗯，看来我这个半瓶子水还是要多看看源码的。

评论

7 楼 meteoric_cry 2008-08-30  

afcn0 写道

不过其setTimeout(function() {html.evalScripts()}, 10);这个10ms值得讨论,timeout就是在本次js结素后执行,难道js执行后和新innerHTML被浏览器解析完不是一回事,还有必要再延后10ms,值得讨论

  在我做过的东西中,setTimeout是解决IE中BUG的一种最简单的办法,IE遇到setTimeout就老实了,而且JS引擎到底是怎么在执行的我还不是很懂.不过加了setTimeout确实解决了问题

6 楼 mouse_xb 2008-01-10  

prototype 是做什么的？请教

5 楼 afcn0 2007-10-24  

其实感觉还是有问题的,极端点,这个Ajax.Updater是同步的,并且希望update以后执行完js后我立即看到效果,可是timeout的话你这次看结果是不可能了,只能等你js停了,它才执行,10ms主要解决应该是innerHTML的渲染应该是

4 楼 笨笨狗 2007-10-24  

也许是为了解决浏览器的某些bug吧，要不然他大可不必延迟执行。或许，是为了起一个伪线程？

3 楼 afcn0 2007-10-24  

不过其setTimeout(function() {html.evalScripts()}, 10);这个10ms值得讨论,timeout就是在本次js结素后执行,难道js执行后和新innerHTML被浏览器解析完不是一回事,还有必要再延后10ms,值得讨论

2 楼 笨笨狗 2007-10-24  

Prototype是我的js学习榜样，嘿嘿
这个自动执行js是可以通过evalScripts这个选项来控制的……

1 楼 ddh9504 2007-10-24  

fsword 写道

今天解决一个bug时花了很长时间分析定位。<br />
<br />
起因是我们自己写了一个tab函数，用来支持网页上分tab显示内容，可以局部更新，支持缓存和刷新。<br />
但是后来发现，refresh content的时候采用AJAX方式取数据，而数据中的js脚本并不会执行。一开始不知道为什么会这样，我一直以为只要设置innerHTML就会执行包含的js，单独写了两个页面用prototype的Ajax.updater试验，也是可以执行的，真是搞不懂。<br />
前辈教导我们，搞不定的时候读源码永远是一个好主意。于是看prototype──哦，原来如此：<br />
<div class="code_title">javascript 代码</div>
<div class="dp-highlighter">
<div class="bar">&nbsp;</div>
<ol class="dp-j" start="1">
    <li class="alt"><span><span>update:&nbsp;function(element,&nbsp;html)&nbsp;{&nbsp;&nbsp;</span></span></li>
    <li class=""><span>&nbsp;&nbsp;html&nbsp;=&nbsp;typeof&nbsp;html&nbsp;==&nbsp;'undefined'&nbsp;?&nbsp;<span class="string">''</span><span>&nbsp;:&nbsp;html.toString();&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;$(element).innerHTML&nbsp;=&nbsp;html.stripScripts();&nbsp;&nbsp;</span></li>
    <li class=""><span>&nbsp;&nbsp;setTimeout(function()&nbsp;{html.evalScripts()},&nbsp;<span class="number">10</span><span>);&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;<span class="keyword">return</span><span>&nbsp;element;&nbsp;&nbsp;</span></span></li>
    <li class=""><span>},&nbsp;&nbsp;</span></li>
</ol>
</div>
<br />
设置innerHTML时并不会做什么js的执行工作，其实是prototype帮我们完成了工作。真是实践中凝结的代码阿，它专门扩展了String类，添加了<span>stripScripts和</span><span>evalScripts，让我们方便许多。<br />
<br />
嗯，看来我这个半瓶子水还是要多看看源码的。</span>

那是，这个框架博大精深