易栈网-膘叔

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

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

不废话看原文：

异步 innerHTML

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

JavaScript代码
function asyncInnerHTML(HTML, callback) {  
    var temp = document.createElement('div'),  
        frag = document.createDocumentFragment();  
    temp.innerHTML = HTML;  
    (function(){  
        if(temp.firstChild) {  
            frag.appendChild(temp.firstChild);  
            setTimeout(arguments.callee, 0);  
        } else {  
            callback(frag);  
        }  
    })();  
}  

1. 充分利用闭包解决 IE6 的内存溢出问题
2. 使用延时 0 将操作从队列中拉出，防止浏览器假死
3. Document Fragment 给予我们个相当好的沙盘，只是我们经常忘记了它
4. 回调的节点可以使用 DOM 标准的手法（appendChild）插入

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

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

再次不禁赞叹下！

组织 innerHTML 字符串

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

方式一

JavaScript代码
var arr = ['item 1', 'item 2', 'item 3', ...];  
for (var i = 0, l = arr.length, list = ''; i < l; i++) {  
    list += '<li>' + arr[i] + '</li>';  
}  
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 中仍然如此）。有兴趣的同学可以参看更详细的信息。

膘叔：如果不了解javascript的话，你可以尝试看一下PHP，在PHP中有三个函数：
func_get_arg(),func_get_args(),func_get_num()，这三个函数是用来处理PHP中某个方法参数不固定的时候的行为。你可以将它当作是伪重载（overload）的另一种处理方法。也可以用来更改某个函数的默认行为。

javascript中也有类似的方法，那就是callee,caller等 。以下是playgoogle网站的整理内容，作者为karry，可以参考一下。

caller

返回一个对函数的引用，该函数调用了当前函数。也就是说，返回的是调用该函数的函数。
functionName.caller
functionName 对象是所执行函数的名称。

说明
对 于函数来说，caller 属性只有在函数执行时才有定义。如果函数是由顶层调用的，那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性，那么结果和 functionName.toString 一样，也就是说，显示的是函数的反编译文本。值得注意的一点是，事件的触发总是带着一个匿名的函数。

点击查看--caller测试示例

callee

返 回正被执行的 Function 对象，也就是所指定的 Function 对象的正文,他是arguments对象的一个属性。[function.]arguments.callee，可选项 function 参数是当前正在执行的 Function 对象的名称。

说明
callee 属性的初始值就是正被执行的 Function 对象。

callee 属性是 arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿名函数的递归或者保证函数的封装性，例如下边示例的递归计算1到n的自然数之和。而该属性仅当相 关函数正在执行时才可用。还有需要注意的是callee拥有length属性，这个属性有时候用于验证还是比较好的。arguments.length是 实参长度，arguments.callee.length是形参长度，由此可以判断调用时形参长度是否和实参长度一致。

点击查看--callee测试示例

apply and call
它们的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数方式有所区别：
apply(thisArg,argArray);
call(thisArg[,arg1,arg2…] ]);
即所有函数内部的this指针都会被赋值为thisArg，这可实现将函数作为另外一个对象的方法运行的目的

apply的说明
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisArg任何一个参数，那么 Global 对象将被用作 thisArg，并且无法被传递任何参数。

call的说明
call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisArg指定的新对象。如果没有提供 thisArg参数，那么 Global 对象被用作 thisArg

相关技巧：
应用call和apply还有一个技巧在里面，就是用call和apply应用另一个函数（类）以后，当前的
函数（类）就具备了另一个函数（类）的方法或者是属性，这也可以称之为“继承”。

点击查看--call 和 apply 测试示例