2012-07-12 36 views
3

为什么这两种写jQuery插件的方法是等价的?为什么这两种编写jQuery插件的方式是等价的?


第一种方式:

$.fn.myplugin = function() { 
    return $(this).each(function() { 
     return $(this).bind('click', function() { 
      console.log('Hi'); 
     }); 
    }); 
}; 

方式二:

$.fn.myplugin = function() { 
    return this.bind('click', function() { 
     console.log('Hi2'); 
    }); 
}; 
+2

提示:**使用第二个。** – Ryan 2012-07-12 16:47:46

+2

@minitech:为什么?一个真正的插件最有可能不仅仅是绑定一个事件。然后,为集合中的每个元素分别设置一个范围可能会更好。但是,在**这个特定的情况**你是对的。 – ThiefMaster 2012-07-12 16:52:27

+1

您可能想知道为什么第二种方法在元素堆栈包含多个匹配元素的情况下工作。在内部,jQuery调用所有匹配元素链中规定的任何方法。换句话说,迭代仍然完成,但在内部。 – Utkanos 2012-07-12 16:45:53

回答

7

让我们从一个减少对其他:

$.fn.myplugin = function() { 
    return $(this).each(function() { 
     return $(this).bind('click', function() { 
      console.log('Hi'); 
     }); 
    }); 
}; 

当您启动功能this是一个jQuery对象,所以$(this)不买任何东西,它很可能会成为:

$.fn.myplugin = function() { 
    return this.each(function() { 
     return $(this).bind('click', function() { 
      console.log('Hi'); 
     }); 
    }); 
}; 

所以你说“对于jQuery对象中的每个元素,创建一个jQuery对象并将一个事件绑定到该对象。“

如果您在bind看,它调用on,执行一些逻辑,最后做这一行:

return this.each(function() { 
    jQuery.event.add(this, types, fn, data, selector); 
}); 

这意味着它要在事件应用于该jQuery对象的每一个元素,所以你实际上是在说:

所以你说

“对于jQuery对象中的每个元素,创建一个jQuery对象,并为 在jQuery对象中的每一个元素事件绑定到该元素。”

您现在循环两次,一次在N元素的列表中,然后在1个元素的列表中循环N次。你实际上可以直接全部绑定:

$.fn.myplugin = function() { 
    return this.bind('click', function() { 
     console.log('Hi2'); 
    }); 
}; 

而这当然是最终的代码。

1

没有区别两者之间的。

只是出于某种原因,其中一个你正在做一个循环,但最终,他们有相同的结果。

+0

结果可能没有什么不同,但两者**不相等。 – PPvG 2012-07-12 16:59:34

3

你的情况有不同之处在于你创造你的第一个片段一个新的jQuery对象没有很好的理由其实没有真正的区别(this是一个jQuery对象,所以没有必要使用$(this))。

通常所说的在你的插件函数中使用return this.each(...);是一个好主意,以保持所有的可链接性,并且无论你的插件的函数被调用的jQuery对象中有多少元素,你的代码都能正常工作。

返回this.bind(...)也保留了链接性,但对于一个更复杂的插件,它不仅仅是绑定事件,而且通过each循环更易读。

+4

返回'this.each'和'this.bind'都保持链接完好。 – Neal 2012-07-12 16:47:16

1

它们是等价的,因为在jQuery插件中,this是jQuery对象,因此$(this)不做任何事情。

.bind将在jQuery对象中的所有元素上工作,并且当您执行.each时,您将分别在每个元素上调用.bind

因此,它们是等价的,因为它们都在元素上循环并将事件绑定到它们。

我建议使用第二个,它更干净,更快。