易栈网-膘叔

如果你的WEB程序中使用了不同的类库，比如prototype和jQuery，除了可以使用jquery的noConflict方法外，还有以下技巧

比如$("#xx").click(),这样的情况下，请使用

如果你写了一个函数：function test(){alert('test');}，那就不能这么用了。
被包含在刚才的闭包里，是不能被认出来的，那么，如何使用呢？

OK，然后在想调用的地方，直接 jQuery.test();就行了
相当于给jQuery这个类添加了 test 这个方法

在PHP的json_encode中，你会发现中文等都会转换成\uxxxx这类的编码，这当然是为了防止在传递的时候出现编码错误，那么，JS怎么做的呢？js的escape基本上也能达到这个效果，只是它是采用了%u的格式。

1、escape对ansi码0-255以外的字符进行编码输出%u****格式即unicode值，escape 方法返回一个包含了 charstring 内容的字符串值（ Unicode 格式）。所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替，其中 xx 等于表示该字符的十六进制数。例如，空格返回的是 "%20"
escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z
2、encodeURI类似escape，用于地址栏编码
encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z
3、encodeURIComponent用于地址栏编码。将文本字符串编码为一个统一资源标识符 (URI) 的一个有效组件。它是将中文、韩文等特殊字符转换成utf-8格式的url编码,如果你的页面编码是gb2312的话，服务器端接收的将是乱码.
encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z
所以js使用数据时可以使用escape，对于地址栏数据，最好用encodeURIComponent进行编码

看看这个效果如何？http://www.cssrain.cn/demo/webDemo/index.html，说老实话，我第一次看到的时候，真的以为是flash的。它的作者是不羁虫，用他的话来说是：

shawphy说到：圆角？抱歉，你的浏览器不支持。请升级以获得更好体验。
为此，他写了一篇博客，当然也有人有不同意见。所以有就有了这样的回复，当然他的回复不是为了针对内容的：

shawphy这样回复：

原文地址为：http://shawphy.com/2009/08/sorry-you-should-upgrade-your-broswer.html

之前写过一篇博客，问是否敢对IE6说不。实际上，我虽然自己没有公然抗议，暗自的还是有一些的。

最常见的就是:hover伪类了。除了二级菜单这类关键部位之外，其他地方一律用此处应当使用的标签，而不滥用a。其:hover伪类IE6无法支 持，大不了少了点效果而已，不会有功能损失。想获得更好体验？请升级。为此写脚本做兼容？抱歉，我没时间。实际上，很多时候需求方并不在意这些细节交互地 方。他们都不在意，你在意什么？

圆角？对不起，我可不高兴用一堆标签弄出圆角来。九宫格之类的办法不是不会，只是嫌麻烦。一堆标签自己看得心烦。直接用border-radius，浏览器要支持你就圆角，不支持就方的好了，没什么了不起的。除非需求方强烈要求，那在说

阴影？呵呵，同样对不起，阴影如果方便直接背景就背景，不方便实在抱歉……我给一个box-shadow已经很不错了，兼容Chrome Firefox 3.5呢。没了阴影功能又不会缺失，可有可无。

文字阴影？text-shadow伺候，如果需求方执意要求，那只能做背景图了……只是Chrome下文字阴影效果真是颗碜。。。

其实CSS3有很多很美妙的特性，利用这些特性可以非常轻易制作很出众的效果，何苦为了一些效果而花费大量时间呢？
适当跟需求方说明这些。告诉他们实现这些所要消耗的人力成本有多高。让他们自己决定哪些一定要，哪些可以放弃一部分低级浏览器用户。
在完善的沟通下，才能说服老板，说服需求方逐步抛开低级的浏览器，才能促进整个大环境的改变。

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 中仍然如此）。有兴趣的同学可以参看更详细的信息。