手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2009年08月20日的文章

innerHTML 的些摘记

Gracecode网上的文章,好象研究了比较深。
本文的亮点写在了内容中,但我觉得argements.callee这个用法还是很有特色的。以前都是用this之类的来解决。。。

还有一个亮点就是document.Fragment这个东西。。。

不废话看原文:

异步 innerHTML

innerHTML 插入节点的性能的问题,通常是我们最关注的。在回答这问题时James Padolsey 给出了他的解决方案,看到上述代码不仅赞叹了下:

JavaScript代码
  1. function asyncInnerHTML(HTML, callback) {  
  2.     var temp = document.createElement('div'),  
  3.         frag = document.createDocumentFragment();  
  4.     temp.innerHTML = HTML;  
  5.     (function(){  
  6.         if(temp.firstChild) {  
  7.             frag.appendChild(temp.firstChild);  
  8.             setTimeout(arguments.callee, 0);  
  9.         } else {  
  10.             callback(frag);  
  11.         }  
  12.     })();  
  13. }  
  1. 充分利用闭包解决 IE6 的内存溢出问题
  2. 使用延时 0 将操作从队列中拉出,防止浏览器假死
  3. Document Fragment 给予我们个相当好的沙盘,只是我们经常忘记了它
  4. 回调的节点可以使用 DOM 标准的手法(appendChild)插入

了解了参数就很容易调用,例如

JavaScript代码
  1. var htmlStr = '<div><p>...</p><p>...</p><div><div>...</div>';  
  2. asyncInnerHTML(htmlStr, function(fragment){  
  3.     document.body.appendChild(fragment);  
  4. });  

再次不禁赞叹下!

组织 innerHTML 字符串

说到 innerHTML ,通常在这操作之前会有大部分的字符串操作用于连接节点。考虑下面的三种做法,有何不同

方式一

JavaScript代码
  1. var arr = ['item 1''item 2''item 3', ...];  
  2. for (var i = 0, l = arr.length, list = ''; i < l; i++) {  
  3.     list += '<li>' + arr[i] + '</li>';  
  4. }  
  5. list = '<ul>' + list + '</ul>';  

方式二
JavaScript代码
  1. var arr = ['item 1''item 2''item 3', ...];  
  2. for (var i = 0, l = arr.length, list = []; i < l; i++) {  
  3.     list[list.length] = '<li>' + arr[i] + '</li>';  
  4. }  
  5. list = '<ul>' + list.join('') + '</ul>';  

方式三
JavaScript代码
  1. var arr = ['item 1''item 2''item 3', ...];  
  2. var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';  

详细的对比测试在这里(没错,还是 James Padolsey 那小子的 Blog)。同时,PPK 也整理了份有关 innerHTML 的速度测试报告

IE 的陷阱

对于 IE,innerHTML 有个不大不小的陷阱(via),就是在 tbody 中插入 innerHTML 时,会报莫名的“未知的运行错误”。

测试地址在这里(经过测试,在 IE8 中仍然如此)。有兴趣的同学可以参看更详细的信息

Tags: arguments, callee, innerhtml

神秘的程序员的漫画

点击小图看大图。。。由于漫画上面有网址,我就不贴了啦。。。第一次看到是在《程序员》杂志上,不过那次的杂志已经是15块,对我来说,一本类资讯的杂志,又几乎没有时效性,大多数的文章、资料都可以从网上得到的杂志,15块,已经对他失去兴趣了。(原价10块,一涨就是5块,50%啊。。。太恐怖了)
西乔作品,Ta说:这个系列的漫画讲述程序员——这种神秘人类的囧事,故事多来源于我身边的程序员朋友,且以互联网开发背景为主。
大小: 132.64 K
尺寸: 167 x 376
浏览: 1524 次
点击打开新窗口浏览全图

大小: 178.51 K
尺寸: 169 x 376
浏览: 1449 次
点击打开新窗口浏览全图

大小: 175.66 K
尺寸: 158 x 376
浏览: 1357 次
点击打开新窗口浏览全图

大小: 176.85 K
尺寸: 186 x 376
浏览: 1401 次
点击打开新窗口浏览全图

JQuery -- this 和 $(this) 的区别

其实这个还是很好认的啦。呵呵
this,如果是取得元素的话,则对应当前元素的对象
$(this)则是当前元素被jQuery处理的对象。

看看作者是怎么写的,来源:http://www.cnblogs.com/RuiLei/archive/2009/08/20/1550804.html。

起初以为this和$(this)就是一模子刻出来。但是我在阅读时,和coding时发现,总不是一回事。

What is "this"?

In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.

$("#textbox").hover( 
     
function() { 
          
this.title = "Test"
      }, 
     
fucntion() { 
         
this.title = "OK”; 
  
    } 
);

这里的this其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了,Error--报了。

Error Code:
$("#textbox").hover(
       function() {
          $(this).title = "Test";
       },
       function() {
          $(this).title = "OK";
       }
);

这里的$(this)是一个JQuery对象,而jQuery对象沒有title 属性,因此这样写是错误的。

JQuery拥有attr()方法可以get/set DOM对象的属性,所以正确的写法应该是这样:

正确的代码:
$("#textbox").hover(
      function() {
         $(this).attr(’title’, ‘Test’);
      },
      function() {
         $(this).attr(’title’, ‘OK’);
      }
);

使用JQuery的好处是它包裝了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。

参考:http://remysharp.com/2007/04/12/jquerys-this-demystified/

 --EOF--

一般来说,在代码中,尽量使用$(this),一来代码更规范一点,二来,jQuery的函数你也就可以直接调用了。如$(this).children()之类的。。

Tags: jquery