正在加载...

在Javascript的基础库设计和使用过程中通常会有两种返回值:返回目标对象或者返回自身对象。这里就拿获取DOM元素为例子简单说一下。
一、返回目标对象就是返回要查询的DOM节点:

window.$ = function (id){
    return document.getElementById(id);
}
window.hide = function(elem){
    elem.style.display = 'none';
    return elem;
}
window.show = function(elem){
    elem.style.display = 'none';
    return elem;
}

二、返回自身对象

window.$ = (function (id){
    function _$(id){
        this.elem = document.getElementById(id);
        return this;
    }
    _$.prototype.hide = function(){
        this.elem.style.display = 'none';
        return this;
    }
    _$.prototype.show = function(){
        this.elem.style.display = 'block';
        return this;
    }
    return function(id){
        return new _$(id);
    };
})();

对于第一种方式: 是最直接也是逻辑上最容易理解的一种方式,讲一些方法或者操作聚合。比如先用$(‘test’)获取DOM元素,然后在用hide($(‘test’))的方法将其隐藏。
优点是:1.简单 2.高效 3.易于理解
缺点是:不方便扩展操作,虽然可以支持链式操作,比如讲$(‘test’)隐藏后再显示再隐藏,那么就要

var elem = $('test');hide($('test'));show($('test'));hide($('test'))
//改成链式操作
hide(show(hide($('test'))));

对于第二种方式:是通过闭包的方式产生一个私有的方法_$及_$的原型链上的一些方法的function。通过这个function产生新的对象对DOM进行查找,因为prototype上的方法在new的时候是不会被重复执行的,所以这里只是new一个基本的DOM查找逻辑,开销不是很大。 目前来说jQuery就是采用这种方式来做DOM查找的。
这里最大的好处是:可以让所有的dom支持某些固定的方法。同时可以通过保存elem来获取原本的属性。
那么对于刚才的问题这里就可以很精简的处理。

$('test').show().hide().show();

怎么样是不是非常有jQuery的风范。

这里涉及到2个知识点: 1.闭包 2.链式操作。

那么你可能会和有同样的疑问,通过new的方式创建且有prototype的情况下和直接返回原始的对象性能上差别到底有多大呢?
这里我们来做一个测试。

测试结果如下:

ie6 100w次运算 ie6 10w次运算 chrome 100w次运算 firefox 100w次运算 ie9 100w次运算
$  20234ms  1500 ms  599ms  323ms  1048ms
$a  14984ms  1312 ms  574ms  167ms  795ms

 

这个简单的实验可以得出以下几个结论
1.ie6就是个垃圾,100w次就会提示是否要终止脚本
2.ie9在现代浏览器中仍然是表现很差
3.firefox虽然沉重但是创建对象的性能很好。

4.最最重要的结论:其实用new的话在10w级别的运算时候,对性能影响比较小。相对可以增加那么多简单易用的扩展功能来说,难怪jQuery 选择了这种方式。这个也是最早写库的时候一直没有正确面对的一个问题。当然如果一个页面出现了超过10w次的DOM查询,那么建议你整理下你的web站点了,它很有问题。

 

: http://www.webryan.net/2012/04/different-between-prototype-and-original-function/

本文相关评论 - 才 4 条评论
2012-05-23 12:07:57

m4si4o这种细活真是不适合我。

[回复]

2012-06-02 18:02:42

楼主的观点不错啊!支持啊!

[回复]

2012-06-09 22:22:03

看来还是Firefox最快
IE6最终还是狗屎啊
不过,为什么,我用Firefox打开你的这个页面,会假死呢…..
奇怪

[回复]

ryan 回复:

我看下,现在习惯用chrome了=。=!

[回复]

2012-12-07 19:35:35

我看下,现在习惯用chrome了=。=!

[回复]