Skip to content

Commit d617895

Browse files
scottgonzalezscottgonzalez
committed
All: Don't use Hungarian notation for jQuery objects
Fixes gh-292 Closes gh-487
1 parent aa79d94 commit d617895

19 files changed

+188
-183
lines changed

‎page/code-organization/concepts.md

+33-29
Original file line numberDiff line numberDiff line change
@@ -94,11 +94,11 @@ written in the traditional jQuery style:
9494
$( document ).ready(function() {
9595
9696
$( "#myFeature li" ).append( "<div/>" ).click(function() {
97-
var $this = $( this );
98-
var $div = $this.find( "div" );
99-
$div.load( "foo.php?item=" + $this.attr( "id" ), function() {
100-
$div.show();
101-
$this.siblings().find( "div" ).hide();
97+
var item = $( this );
98+
var div = item.find( "div" );
99+
div.load( "foo.php?item=" + item.attr( "id" ), function() {
100+
div.show();
101+
item.siblings().find( "div" ).hide();
102102
});
103103
});
104104
@@ -118,8 +118,8 @@ var myFeature = {
118118
119119
init: function( settings ) {
120120
myFeature.config = {
121-
$items: $( "#myFeature li" ),
122-
$container: $( "<div class='container'></div>" ),
121+
items: $( "#myFeature li" ),
122+
container: $( "<div class='container'></div>" ),
123123
urlBase: "/foo.php?item="
124124
};
125125
@@ -130,36 +130,40 @@ var myFeature = {
130130
},
131131
132132
setup: function() {
133-
myFeature.config.$items.each( myFeature.createContainer ).click( myFeature.showItem );
133+
myFeature.config.items
134+
.each( myFeature.createContainer )
135+
.click( myFeature.showItem );
134136
},
135137
136138
createContainer: function() {
137-
var $i = $( this );
138-
var $c = myFeature.config.$container.clone().appendTo( $i );
139-
$i.data( "container", $c );
139+
var item = $( this );
140+
var container = myFeature.config.container
141+
.clone()
142+
.appendTo( item );
143+
item.data( "container", container );
140144
},
141145
142146
buildUrl: function() {
143-
return myFeature.config.urlBase + myFeature.$currentItem.attr( "id" );
147+
return myFeature.config.urlBase + myFeature.currentItem.attr( "id" );
144148
},
145149
146150
showItem: function() {
147-
var myFeature.$currentItem = $( this );
151+
var myFeature.currentItem = $( this );
148152
myFeature.getContent( myFeature.showContent );
149153
},
150154
151155
getContent: function( callback ) {
152156
var url = myFeature.buildUrl();
153-
myFeature.$currentItem.data( "container" ).load( url, callback );
157+
myFeature.currentItem.data( "container" ).load( url, callback );
154158
},
155159
156160
showContent: function() {
157-
myFeature.$currentItem.data( "container" ).show();
161+
myFeature.currentItem.data( "container" ).show();
158162
myFeature.hideContent();
159163
},
160164
161165
hideContent: function() {
162-
myFeature.$currentItem.siblings().each(function() {
166+
myFeature.currentItem.siblings().each(function() {
163167
$( this ).data( "container" ).hide();
164168
});
165169
}
@@ -249,46 +253,46 @@ $( document ).ready(function() {
249253
250254
var feature = (function() {
251255
252-
var $items = $( "#myFeature li" );
253-
var $container = $( "<div class='container'></div>" );
254-
var $currentItem = null;
256+
var items = $( "#myFeature li" );
257+
var container = $( "<div class='container'></div>" );
258+
var currentItem = null;
255259
var urlBase = "/foo.php?item=";
256260
257261
var createContainer = function() {
258-
var $i = $( this );
259-
var $c = $container.clone().appendTo( $i );
260-
$i.data( "container", $c );
262+
var item = $( this );
263+
var container = container.clone().appendTo( item );
264+
item.data( "container", container );
261265
},
262266
263267
buildUrl = function() {
264-
return urlBase + $currentItem.attr( "id" );
268+
return urlBase + currentItem.attr( "id" );
265269
},
266270
267271
showItem = function() {
268-
$currentItem = $( this );
272+
currentItem = $( this );
269273
getContent( showContent );
270274
},
271275
272276
showItemByIndex = function( idx ) {
273-
$.proxy( showItem, $items.get( idx ) );
277+
$.proxy( showItem, items.get( idx ) );
274278
},
275279
276280
getContent = function( callback ) {
277-
$currentItem.data( "container" ).load( buildUrl(), callback );
281+
currentItem.data( "container" ).load( buildUrl(), callback );
278282
},
279283
280284
showContent = function() {
281-
$currentItem.data( "container" ).show();
285+
currentItem.data( "container" ).show();
282286
hideContent();
283287
},
284288
285289
hideContent = function() {
286-
$currentItem.siblings().each(function() {
290+
currentItem.siblings().each(function() {
287291
$( this ).data( "container" ).hide();
288292
});
289293
};
290294
291-
$items.each( createContainer ).click( showItem );
295+
items.each( createContainer ).click( showItem );
292296
293297
return {
294298
showItemByIndex: showItemByIndex

‎page/code-organization/dont-repeat-yourself.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,22 @@ Don't repeat yourself; if you're repeating yourself, you're doing it wrong.
99

1010
```
1111
// BAD
12-
if ( $eventfade.data( "currently" ) !== "showing" ) {
13-
$eventfade.stop();
12+
if ( eventfade.data( "currently" ) !== "showing" ) {
13+
eventfade.stop();
1414
}
1515
16-
if ( $eventhover.data( "currently" ) !== "showing" ) {
17-
$eventhover.stop();
16+
if ( eventhover.data( "currently" ) !== "showing" ) {
17+
eventhover.stop();
1818
}
1919
20-
if ( $spans.data( "currently" ) !== "showing" ) {
21-
$spans.stop();
20+
if ( spans.data( "currently" ) !== "showing" ) {
21+
spans.stop();
2222
}
2323
2424
// GOOD!!
25-
var $elems = [ $eventfade, $eventhover, $spans ];
25+
var elems = [ eventfade, eventhover, spans ];
2626
27-
$.each( $elems, function( i, elem ) {
27+
$.each( elems, function( i, elem ) {
2828
if ( elem.data( "currently" ) !== "showing" ) {
2929
elem.stop();
3030
}

‎page/effects/intro-to-effects.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -134,20 +134,20 @@ testing whether your selection returned any elements; if not, you can just run t
134134

135135
```
136136
// Run a callback even if there were no elements to animate
137-
var $someElement = $( "#nonexistent" );
137+
var someElement = $( "#nonexistent" );
138138
139139
var cb = function() {
140140
console.log( "done!" );
141141
};
142142
143-
if ( $someElement.length ) {
144-
$someElement.fadeIn( 300, cb );
143+
if ( someElement.length ) {
144+
someElement.fadeIn( 300, cb );
145145
} else {
146146
cb();
147147
}
148148
```
149149

150-
##Managing Animation Effects
150+
## Managing Animation Effects
151151

152152
jQuery provides some additional features for controlling your animations:
153153

‎page/effects/uses-of-queue-and-dequeue.md

+10-10
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ function.
6363
## Quick Examples:
6464

6565
```
66-
// Let's assume $elem is a jQuery object that points to some element we are animating.
67-
var queue = $elem.queue();
66+
// Let's assume elem is a jQuery object that points to some element we are animating.
67+
var queue = elem.queue();
6868
6969
// Remove the last function from the animation queue.
7070
var lastFunc = queue.pop();
@@ -73,15 +73,15 @@ var lastFunc = queue.pop();
7373
queue.unshift( lastFunc );
7474
7575
// Replace queue with the first three items in the queue.
76-
$elem.queue( queue.slice( 0, 3 ) );
76+
elem.queue( queue.slice( 0, 3 ) );
7777
```
7878

7979
### An animation (fx) queue example:
8080

8181
```
8282
$(function() {
8383
// Let's do something with Google Maps:
84-
var $map = $( "#map_canvas" );
84+
var canvas = $( "#map_canvas" );
8585
8686
var myLatlng = new google.maps.LatLng( -34.397, 150.644 );
8787
@@ -93,25 +93,25 @@ $(function() {
9393
9494
var geocoder = new google.maps.Geocoder();
9595
96-
var map = new google.maps.Map( $map[0], myOptions );
96+
var map = new google.maps.Map( canvas[0], myOptions );
9797
9898
var resized = function() {
9999
// simple animation callback - let maps know we resized
100100
google.maps.event.trigger( map, "resize" );
101101
};
102102
103-
$map.delay( 2000 ); // Wait for two seconds.
103+
canvas.delay( 2000 ); // Wait for two seconds.
104104
105105
// resize the div:
106-
$map.animate({
106+
canvas.animate({
107107
width: 250,
108108
height: 250,
109109
marginLeft: 250,
110110
marginTop:250
111111
}, resized );
112112
113113
// geocode something
114-
$map.queue(function( next ) {
114+
canvas.queue(function( next ) {
115115
// find stackoverflow's whois address:
116116
geocoder.geocode( {
117117
address: "55 Broadway New York NY 10006"
@@ -134,10 +134,10 @@ $(function() {
134134
});
135135
136136
// after we find stack overflow, wait 3 more seconds
137-
$map.delay( 3000 );
137+
canvas.delay( 3000 );
138138
139139
// and resize the map again
140-
$map.animate({
140+
canvas.animate({
141141
width: 500,
142142
height: 500,
143143
marginLeft:0,

‎page/events/event-basics.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -121,18 +121,18 @@ the DOM element into a jQuery object that we can use jQuery methods on, we
121121
simply do `$( this )`, often following this idiom:
122122

123123
```
124-
var $this = $( this );
124+
var element = $( this );
125125
```
126126

127127
A fuller example would be:
128128

129129
```
130130
// Preventing a link from being followed
131131
$( "a" ).click(function( eventObject ) {
132-
var $this = $( this );
133-
if ( $this.attr( "href" ).match( /evil/ ) ) {
132+
var elem = $( this );
133+
if ( elem.attr( "href" ).match( /evil/ ) ) {
134134
eventObject.preventDefault();
135-
$this.addClass( "evil" );
135+
elem.addClass( "evil" );
136136
}
137137
});
138138
```

‎page/events/event-delegation.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,9 @@ What if we wanted to open the link in a new window if that link is an external o
8080
```
8181
// attach a delegated event
8282
$( "#list" ).on( "click", "a", function( event ) {
83-
var $elem = $( this );
84-
if ( $elem.is( "[href^='http']" ) ) {
85-
$elem.attr( "target", "_blank" );
83+
var elem = $( this );
84+
if ( elem.is( "[href^='http']" ) ) {
85+
elem.attr( "target", "_blank" );
8686
}
8787
});
8888
```

‎page/events/event-extensions.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -112,23 +112,23 @@ When these properties are defined, the following behavior occurs in the jQuery e
112112
So given the special event above, this code shows that a pushy isn't removed by removing clicks. That might be an effective way to defend against an ill-behaved plugin that didn't namespace its removal of click events, for example:
113113

114114
```
115-
var $p = $( "p" );
115+
var elem = $( "p" );
116116
117-
$p.on( "click", function( e ) {
118-
$( "body" ).append( "I am a " + e.type + "!" );
117+
elem.on( "click", function( event ) {
118+
$( "body" ).append( "I am a " + event.type + "!" );
119119
});
120120
121-
$p.on( "pushy", function( e ) {
122-
$( "body" ).append( "I am pushy but still a " + e.type + "!" );
121+
elem.on( "pushy", function( event ) {
122+
$( "body" ).append( "I am pushy but still a " + event.type + "!" );
123123
});
124124
125-
$p.trigger( "click" ); // triggers both handlers
125+
elem.trigger( "click" ); // triggers both handlers
126126
127-
$p.off( "click" );
127+
elem.off( "click" );
128128
129-
$p.trigger( "click" ); // still triggers "pushy"
129+
elem.trigger( "click" ); // still triggers "pushy"
130130
131-
$p.off( "pushy" );
131+
elem.off( "pushy" );
132132
```
133133

134134
These two properties are often used in conjunction with a `handle` hook function; the hook might, for example, change the event name from "click" to "pushy" before calling event handlers. See below for an example.

0 commit comments

Comments
 (0)