原文鏈接：http://james.padolsey.com/javascript/76-bytes-for-faster-jquery/

?

When jQuery fires a callback function, whether it is an event handler, an each iterator, or a filter function, it will normally give you a DOM element as the function’s context, accessible via the this keyword. It’s common practice to subsequently wrap this in jQuery(...) resulting in a newly constructed jQuery instance.
-----------------------------------------
當(dāng)jQuery觸發(fā)一個(gè)回調(diào)函數(shù)時(shí)，無論這個(gè)函數(shù)是一個(gè)事件句柄，或者是一個(gè)each迭代，再或者是一個(gè)過濾器函數(shù)，一般情況下它都會把一個(gè)Dom元素對象作為函數(shù)的上下文，并通過this關(guān)鍵字來獲取到它。隨后更普遍的做法就是用jQuery(...)來包裝this以獲得一個(gè)jQuery結(jié)構(gòu)的實(shí)例。
-----------------------------------------
This is no fault of jQuery’s but this practice of redundant “wrapping” generally sucks.

-----------------------------------------
這種做法沒有錯(cuò)，但是這種“包裝”的做法通常顯得比較多余而且差勁
-----------------------------------------
I “tweeted” a while ago, complaining of this:

Constructing a new jq obj on each iteration just to access some text seems wrong. jQuery(‘a(chǎn)’).map(function(){ return $(this).text(); });

-----------------------------------------------

之前我在我的推上曾經(jīng)抱怨過：

??????? 在一個(gè)each迭代起中構(gòu)造一個(gè)jq對象，確僅僅是為了獲得一些文本值，這種做法像是錯(cuò)誤的。

------------------------------------------------ ?????

1 jQuery(‘a(chǎn)’).map(function(){ return $(this).text(); });

------------------------------------------------
Paul Irish suggested that I use jQuery.text instead of jQuery.fn.text, meaning that I wouldn’t have to bother with constructing a new jQuery object every single time my function was called. This was a good suggestion but unfortunately not all of jQuery’s methods have corresponding single-node functions, and it would mean not being able to chain methods.
------------------------------------------------
Paul Irish 建議我使用jQuery.text()來代替jQuery.fn.text() ,這意味著我不必每次在函數(shù)調(diào)用時(shí)都去構(gòu)造一個(gè)新的jQuery 對象。這個(gè)建議不錯(cuò)但是并非所有的jQuery方法都符合單節(jié)點(diǎn)函數(shù)（single-node functions）,
而且這意味著將不能夠使用鏈?zhǔn)椒椒?chain methods)。
------------------------------------------------
This is a growing problem, and is only worsened by developers’ insistence on constructing multiple jQuery objects with the same? element! -

1 jQuery('a').click(function(){ 2 3 if (jQuery(this).attr('href') === 'blah') { 4 jQuery(this).next('.whatever').slideToggle(); 5 } 6 7 jQuery(this).fadeTo('slow', 0.4); 8 9 return false; 10 11 });

------------------------------------------
This的問題越來越突出，而那些堅(jiān)持使用同一個(gè)元素構(gòu)造多個(gè)jQuery object的開發(fā)者顯得更糟糕。

1 jQuery('a').click(function(){ 2 3 if (jQuery(this).attr('href') === 'blah') { 4 jQuery(this).next('.whatever').slideToggle(); 5 } 6 7 jQuery(this).fadeTo('slow', 0.4); 8 9 return false; 10 11 });

------------------------------------------
Eew! Not only are there multiple pointless constructors, but Mr. Uber Cool jQuery Developer isn’t accustomed to the DOM, so has? absolutely no idea that, in most situations, this.href would suffice for getting the href property value.

This kind of misuse has been discussed in step #3 here: http://encosia.com/2010/03/30/5-steps-toward-jquery-mastery/.

---------------------------------------------------------

Eew! 不僅僅是有多個(gè)無用的構(gòu)造器，而且Mr. Uber Cool jQuery Developer也不習(xí)慣dom,在毫無辦法時(shí)，大多數(shù)情況下，this.href就能夠滿足我們獲取元素的href屬性值。This的濫用用法在這里被討論過： http://encosia.com/2010/03/30/5-steps-toward-jquery-mastery/
---------------------------------------------------------
The real problem remains that there are three jQuery objects being constructed, — I feel that it is a library’s obligation to protect? against misuse like this. Even if you’re only constructing one jQuery object in a callback it’s still somewhat pointless, in that you’re only doing so to call a couple of methods…
-----------------------------------------------------------
實(shí)際情況是我們?nèi)耘f構(gòu)造了三個(gè)jq對象，我感覺防止像誤用this這是js庫的責(zé)任，即便如此，如果你在回調(diào)中僅僅只構(gòu)造了一個(gè)jq對象仍舊有點(diǎn)無用，因?yàn)槟阒皇窍胝{(diào)用一組方法而已。
-----------------------------------------------------------
In light of my concerns I thought it would make sense to experiment with some ways to alleviate this troublesome situation. In the end, I landed on something so dead-simple that I feel silly even shining a spotlight on it:
-----------------------------
從我的觀點(diǎn)來看，我認(rèn)為通過采用一些方法減少這種麻煩是可以的，最后 ，關(guān)于這點(diǎn)我貼上一些簡單至極卻非常有效的代碼
-----------------------------

jQuery.single=function(a){return function(b){a[0]=b;return a}}(jQuery([1]));

76 characters. Here’s the readable version:

-----------------------------
76字節(jié)，這個(gè)是通讀版本
-----------------------------

1 jQuery.single = (function(o){ 2 3 var collection = jQuery([1]); // 創(chuàng)建了一個(gè)jquery對象，并讓他的dom collection的length === 1 4 5 return function(element) { 6 7 // Give collection the element: 8 collection[0] = element; //替換collection的第一個(gè)元素 9 10 // Return the collection: 11 return collection; //返回替換后的jquery對象 12 13 }; 14 15 }());

A single jQuery object is being created and is then used for every single call to jQuery.single — so only one jQuery object is ever being created. If you think about it, we tend to wrap elements in jQuery(...) (i.e. in a jQuery instance) so that we can have access to jQuery’s methods. Very rarely do we mutate the object itself — even when you call parent() or children(), the jQuery object? itself isn’t being changed — a new object is being returned. It’s this non-mutability which makes this solution viable.

--------------------------------------

使用jQuery.single()就可以保證只有一個(gè)jquery對象被創(chuàng)建。
如果仔細(xì)想想，我們趨向于用jQuery()包裝元素以便我們可以使用jq對象的方法。
很罕見的我們改變了對象本身，即便當(dāng)你調(diào)用parent()或者children()時(shí)，
jq對象本身也不會被改變，因?yàn)橐呀?jīng)返回了一個(gè)新的對象。 這是this的不變性讓這個(gè)方案可行。

--------------------------------------
Obviously, you can’t use it in exactly the same was as jQuery(); jQuery.single will only work when you pass a single DOM element. Here’s an example of its usage:

很明顯，這樣不能夠和jQuery()一模一樣；jQuery.single只用在你傳遞一個(gè)dom元素的情況下，
以下是用法的列子：
-------------------------------------

1 jQuery('a').click(function(){ 2 3 var html = jQuery.single(this).next().html(); // Method chaining works! 4 5 alert(html); 6 7 // etc. etc. 8 9 });

Also, you can’t cache it and save it for later as you normally would… well, actually, you can — but the object will change when you next call jQuery.single, so be careful! And please note that this is only meant to be used in situations where you have a DOM element that requires immediate wrapping.

事實(shí)上你可以像平常一樣緩存和保存它，但是這個(gè)對象當(dāng)你再次調(diào)用jQuerysingle之后就會改變，所以要小心使用。
請注意：這個(gè)僅僅用于有個(gè)dom元素需要臨時(shí)打包一下。

You might be thinking that we could do away with this trickery by simply remembering to “cache” our jQuery objects, like so (using the example from before):

你也許會認(rèn)為我們也可以用簡單的對象把this儲存起來，就想下邊這樣：

jQuery('a').click(function(){var me = jQuery(this);if (me.attr('href') === 'blah') {me.next('.whatever').slideToggle();}me.fadeTo('slow', 0.4);return false;});

This is a good practice, but is still not quite as speedy as jQuery.single. I absolutely recommend making up your own mind by carrying out your own tests, but having tested jQuery.single() myself I can tell you that it performs better.

這樣的做法不錯(cuò)，但是仍舊沒有jQuery.single快。我更推薦你去測試一下，但是我可以告訴你在我測試jQuery.single()之后，它表現(xiàn)的更好一些

You can make it even faster by assigning jQuery.single to a (closely-scoped) variable:

你可以為jQuery.single分配一個(gè)變量來讓它更快

var $_ = jQuery.single; // Use $_(this) ...

?

這個(gè)是在Javascript Design Pattern 徐濤翻譯版本中推薦的一篇文章，看了一下 ，個(gè)人英語也一般，有些地方不會翻，大體意思上估計(jì)差不多了，

第一次發(fā)文，有什么地方不好的請見諒。

轉(zhuǎn)載于:https://www.cnblogs.com/netlaw/p/3303567.html

總結(jié)

以上是生活随笔為你收集整理的76Byte让你的JQuery更快的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。