原文鏈接：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.
-----------------------------------------
當jQuery觸發一個回調函數時，無論這個函數是一個事件句柄，或者是一個each迭代，再或者是一個過濾器函數，一般情況下它都會把一個Dom元素對象作為函數的上下文，并通過this關鍵字來獲取到它。隨后更普遍的做法就是用jQuery(...)來包裝this以獲得一個jQuery結構的實例。
-----------------------------------------
This is no fault of jQuery’s but this practice of redundant “wrapping” generally sucks.

-----------------------------------------
這種做法沒有錯，但是這種“包裝”的做法通常顯得比較多余而且差勁
-----------------------------------------
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’).map(function(){ return $(this).text(); });

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

之前我在我的推上曾經抱怨過：

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

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

1 jQuery(‘a’).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() ,這意味著我不必每次在函數調用時都去構造一個新的jQuery 對象。這個建議不錯但是并非所有的jQuery方法都符合單節點函數（single-node functions）,
而且這意味著將不能夠使用鏈式方法(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的問題越來越突出，而那些堅持使用同一個元素構造多個jQuery object的開發者顯得更糟糕。

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! 不僅僅是有多個無用的構造器，而且Mr. Uber Cool jQuery Developer也不習慣dom,在毫無辦法時，大多數情況下，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…
-----------------------------------------------------------
實際情況是我們仍舊構造了三個jq對象，我感覺防止像誤用this這是js庫的責任，即便如此，如果你在回調中僅僅只構造了一個jq對象仍舊有點無用，因為你只是想調用一組方法而已。
-----------------------------------------------------------
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:
-----------------------------
從我的觀點來看，我認為通過采用一些方法減少這種麻煩是可以的，最后 ，關于這點我貼上一些簡單至極卻非常有效的代碼
-----------------------------

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

76 characters. Here’s the readable version:

-----------------------------
76字節，這個是通讀版本
-----------------------------

1 jQuery.single = (function(o){ 2 3 var collection = jQuery([1]); // 創建了一個jquery對象，并讓他的dom collection的length === 1 4 5 return function(element) { 6 7 // Give collection the element: 8 collection[0] = element; //替換collection的第一個元素 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()就可以保證只有一個jquery對象被創建。
如果仔細想想，我們趨向于用jQuery()包裝元素以便我們可以使用jq對象的方法。
很罕見的我們改變了對象本身，即便當你調用parent()或者children()時，
jq對象本身也不會被改變，因為已經返回了一個新的對象。 這是this的不變性讓這個方案可行。

--------------------------------------
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只用在你傳遞一個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.

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

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):

你也許會認為我們也可以用簡單的對象把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.

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

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

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

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

?

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

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

轉載于:https://www.cnblogs.com/netlaw/p/3303567.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。