r87046 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r87045‎ | r87046 | r87047 >
Date:21:44, 27 April 2011
Author:krinkle
Status:ok (Comments)
Tags:
Comment:
AFT/ClickTracking JsPerf + JsLint fixes:
* Combining (function($){}(jQuery); and $(document).ready (check [[Conventions]] for details)
* Cache $(this) instead of re-initializing the same object multiple times.
* Don't use .each() for plugings that do this already internally. (ie. .remove(), .css() etc.)
* Make use of jQuery chaining where possible ($(...).foo().bar().more().calls(); etc.);
* Delete $.json_encode, using jquery.json module instead
* Use dot.notation instead array['brackets'] whenever possible.
* Using Array literal instead of Object constructor (var = []; / var = new Array();)
Modified paths:
  • /trunk/extensions/ArticleFeedback/modules/jquery.articleFeedback/jquery.articleFeedback.css (modified) (history)
  • /trunk/extensions/ClickTracking/ClickTracking.php (modified) (history)
  • /trunk/extensions/ClickTracking/modules/ext.clickTracking.js (modified) (history)
  • /trunk/extensions/ClickTracking/modules/ext.clickTracking.special.js (modified) (history)

Diff [purge]

Index: trunk/extensions/ArticleFeedback/modules/jquery.articleFeedback/jquery.articleFeedback.css
@@ -320,7 +320,7 @@
321321 }
322322
323323 .articleFeedback-expertise-options label {
324 - line-height: 1.6em;
 324+ line-height: 1.6em;
325325 }
326326
327327 .articleFeedback-expertise-options .articleFeedback-helpimprove-email {
Index: trunk/extensions/ClickTracking/modules/ext.clickTracking.special.js
@@ -3,40 +3,18 @@
44 */
55
66 ( function( $ ) {
7 - /* Very limited JSON encoder */
8 - $.json_encode = function( js_obj ) {
9 - var returnstr = "{ ";
107
11 - // trailing commas and json don't mix
12 - var propertynum = 0;
13 - for ( property in js_obj ) {
14 - if ( propertynum > 0 ) {
15 - returnstr += ", ";
16 - }
17 - returnstr += "\"" + property + "\"" + " : ";
18 - if ( typeof js_obj[property] == 'object' ) {
19 - returnstr += $.json_encode( js_obj[property] );
20 - } else {
21 - returnstr += "\"" + js_obj[property] + "\" ";
22 - }
23 - propertynum++;
24 - }
25 -
26 - returnstr += " }";
27 - return returnstr;
28 - };
29 -
308 $.getUserDefsFromDialog = function() {
31 - var currUserDefs = new Array();
 9+ var currUserDefs = [];
3210 if ( $( '#anon_users_checkbox' ).is( ':checked' ) ) {
33 - currUserDefs['anonymous'] = 1;
 11+ currUserDefs.anonymous = 1;
3412 } else {
35 - currUserDefs['anonymous'] = 0;
 13+ currUserDefs.anonymous = 0;
3614 }
3715
3816 var getCheckBoxData = function( contribName ) {
3917 if ( $( '#' + contribName + '_checkbox' ).is( ':checked' ) ) {
40 - currUserDefs[contribName] = new Array();
 18+ currUserDefs[contribName] = [];
4119 } else {
4220 return;
4321 }
@@ -47,25 +25,25 @@
4826 if ( $( '#' + contribName + '_' + i + '_checkbox' ).is( ':checked' ) ) {
4927 $( '#' + contribName + '_' + i + '_ltgt' ).children().each( function() {
5028 if ( $( this ).is( ':selected' ) ) {
51 - var currentCond = new Array();
 29+ var currentCond = [];
5230 switch ( $( this ).attr( "value" ) ) {
5331 case 'lt':
54 - currentCond['operation'] = '<';
 32+ currentCond.operation = '<';
5533 break;
5634 case 'lteq':
57 - currentCond['operation'] = '<=';
 35+ currentCond.operation = '<=';
5836 break;
5937 case 'gt':
60 - currentCond['operation'] = '>';
 38+ currentCond.operation = '>';
6139 break;
6240 case 'gteq':
63 - currentCond['operation'] = '>=';
 41+ currentCond.operation = '>=';
6442 break;
6543 default:
66 - currentCond['operation'] = '<';
 44+ currentCond.operation = '<';
6745 break;
6846 }
69 - currentCond['value'] = $( '#' + contribName + '_' + i + '_text' ).val();
 47+ currentCond.value = $( '#' + contribName + '_' + i + '_text' ).val();
7048 currUserDefs[contribName].push( currentCond );
7149 }
7250 } );
@@ -128,7 +106,7 @@
129107 cOpt1.addClass( 'number_select_ltgt_opt' );
130108 cOpt1.attr( 'value', 'lt' );
131109 cOpt1.text( '<' );
132 - if ( condition['operation'] == '<' ) {
 110+ if ( condition.operation == '<' ) {
133111 cOpt1.attr( 'selected', true );
134112 }
135113
@@ -136,7 +114,7 @@
137115 cOpt2.addClass( 'number_select_ltgt_opt' );
138116 cOpt2.attr( 'value', 'gt' );
139117 cOpt2.text( '>' );
140 - if ( condition['operation'] == '>' ) {
 118+ if ( condition.operation == '>' ) {
141119 cOpt2.attr( 'selected', true );
142120 }
143121
@@ -144,7 +122,7 @@
145123 cOpt3.addClass( 'number_select_ltgt_opt' );
146124 cOpt3.attr( 'value', 'lteq' );
147125 cOpt3.text( '<=' );
148 - if ( condition['operation'] == '<=' ) {
 126+ if ( condition.operation == '<=' ) {
149127 cOpt3.attr( 'selected', true );
150128 }
151129
@@ -152,7 +130,7 @@
153131 cOpt4.addClass( 'number_select_ltgt_opt' );
154132 cOpt4.attr( 'value', 'gteq' );
155133 cOpt4.text( '>=' );
156 - if ( condition['operation'] == '>=' ) {
 134+ if ( condition.operation == '>=' ) {
157135 cOpt4.attr( 'selected', true );
158136 }
159137
@@ -164,7 +142,7 @@
165143
166144 cTextInput = $( '<input></input>' ).attr( 'id', contribName + '_' + counter + '_text' );
167145 cTextInput.addClass( 'number_select_text' );
168 - cTextInput.attr( 'value', condition['value'] );
 146+ cTextInput.attr( 'value', condition.value );
169147 conditionDiv.append( cTextInput );
170148
171149 return conditionDiv;
@@ -188,9 +166,9 @@
189167 var totalConds = initDiv.data( 'totalConditions' );
190168 totalConds++;
191169 initDiv.data( 'totalConditions', totalConds );
192 - var tmpCond = new Array();
193 - tmpCond['operation'] = ' ';
194 - tmpCond['value'] = ' ';
 170+ var tmpCond = [];
 171+ tmpCond.operation = ' ';
 172+ tmpCond.value = ' ';
195173
196174 buildConditionDiv( tmpCond, totalConds ).insertBefore( $( this ) );
197175 initDiv.data( 'totalConditions', totalConds, false );
@@ -201,7 +179,7 @@
202180
203181 // check anonymous
204182 var anon = false;
205 - if ( parseInt( userDef['anonymous'] ) == 1 ) {
 183+ if ( parseInt( userDef.anonymous ) == 1 ) {
206184 anon = true;
207185 }
208186 $( '#anon_users_checkbox' ).attr( 'checked', anon );
@@ -212,7 +190,7 @@
213191 var setup_set_contribs = function( contribName ) {
214192 var current_contribs = userDef[contribName];
215193 if ( current_contribs == undefined ) {
216 - current_contribs = new Array();
 194+ current_contribs = [];
217195 }
218196 $( '#contrib_opts_container' ).append( setContribs( current_contribs, contribName ) );
219197 };
@@ -250,15 +228,15 @@
251229 return retval;
252230 };
253231
254 - max1 = getMax( data['datapoints']['expert'] );
255 - max2 = getMax( data['datapoints']['intermediate'] );
256 - max3 = getMax( data['datapoints']['basic'] );
 232+ max1 = getMax( data.datapoints.expert );
 233+ max2 = getMax( data.datapoints.intermediate );
 234+ max3 = getMax( data.datapoints.basic );
257235 max = Math.max( max3, Math.max( max1, max2 ) );
258236 chartURL = 'http://chart.apis.google.com/chart?' + 'chs=400x400&' + 'cht=lc&'
259237 + 'chco=FF0000,0000FF,00FF00&' + 'chtt=' + event_name + ' from ' + $( '#start_date' ).val()
260238 + ' to ' + $( '#end_date' ).val() + '&' + 'chdl=' + 'Expert|Intermediate|Beginner' + '&'
261 - + 'chxt=x,y&' + 'chd=t:' + data['datapoints']['expert'].join( ',' ) + '|'
262 - + data['datapoints']['intermediate'].join( ',' ) + '|' + data['datapoints']['basic'].join( ',' )
 239+ + 'chxt=x,y&' + 'chd=t:' + data.datapoints.expert.join( ',' ) + '|'
 240+ + data.datapoints.intermediate.join( ',' ) + '|' + data.datapoints.basic.join( ',' )
263241 + '&' + 'chds=0,' + max + ',0,' + max + ',0,' + max;
264242 $( '#chart_img' ).attr( 'src', chartURL );
265243 };
@@ -281,7 +259,7 @@
282260 'increment' : $( '#chart_increment' ).val(),
283261 'startdate' : start_date,
284262 'enddate' : end_date,
285 - 'userdefs' : $.json_encode( wgClickTrackUserDefs )
 263+ 'userdefs' : $.toJSON( wgClickTrackUserDefs )
286264 }, processChartJSON, 'json' );
287265 };
288266
@@ -341,21 +319,27 @@
342320 var bval = rval;
343321 rgbString = 'rgb(' + parseInt( rval ) + ',' + parseInt( gval ) + ',' + parseInt( bval ) + ')';
344322 $( this ).data( 'rgb', rgbString );
345 - $( this ).css( 'color', rgbString );
346 - $( this ).css( 'background-color', rgbString );
 323+ $( this ).css( {
 324+ 'color': rgbString,
 325+ 'background-color': rgbString
 326+ } );
347327 } );
348328
349329 // I wanted to do this with classes, but the element's style rule wins over class rule
350330 // and each element has its own alternative color
351331 $( '.event_data' ).mouseover( function() {
352 - $( this ).css( 'color', '#000000' );
353 - $( this ).css( 'background-color', '#FFFFFF' );
 332+ $( this ).css( {
 333+ 'color': '#000000',
 334+ 'background-color': '#FFFFFF'
 335+ } );
354336 } );
355337
356338 $( '.event_data' ).mouseout( function() {
357339 rgbString = $( this ).data( 'rgb' );
358 - $( this ).css( 'color', rgbString );
359 - $( this ).css( 'background-color', rgbString );
 340+ $( this ).css( {
 341+ 'color': rgbString,
 342+ 'background-color': rgbString
 343+ } );
360344 } );
361345
362346 }; // colorize
@@ -363,22 +347,21 @@
364348 $.updateTable = function() {
365349 var processTableJSON = function( data, status ) {
366350 // clear
367 - $( '.table_data_row' ).each( function() {
368 - $( this ).remove();
369 - } );
 351+ $( '.table_data_row' ).remove();
370352
371353 var row_count = 0;
372 - for ( var row_iter in data['tablevals']['vals'] ) {
373 - var row = data['tablevals']['vals'][row_iter]; // really, JS?
 354+ for ( var row_iter in data.tablevals.vals ) {
 355+ var row = data.tablevals.vals[row_iter]; // really, JS?
374356 row_count++;
375357
376358 var outputRow = $( '<tr></tr>' );
377359 outputRow.addClass( 'table_data_row' );
378360
379361 var cell = $( '<td></td>' ).attr( 'id', 'event_name_' + row_count );
380 - cell.addClass( 'event_name' );
381 - cell.attr( 'value', row['event_id'] );
382 - cell.text( row['event_name'] );
 362+ cell
 363+ .addClass( 'event_name' )
 364+ .attr( 'value', row.event_id )
 365+ .text( row.event_name );
383366 outputRow.append( cell );
384367
385368 var createClassCell = function( userclass ) {
@@ -419,7 +402,7 @@
420403 'increment' : $( '#chart_increment' ).val(),
421404 'startdate' : start_date,
422405 'enddate' : end_date,
423 - 'userdefs' : $.json_encode( wgClickTrackUserDefs ),
 406+ 'userdefs' : $.toJSON( wgClickTrackUserDefs ),
424407 'tabledata' : 1
425408 }, processTableJSON, 'json' );
426409
@@ -496,11 +479,12 @@
497480
498481 // Change user/intermediate/expert dialogs
499482 var loadHeaderInfo = function( headerName ) {
500 - $( '#' + headerName + '_header' ).css( 'cursor', 'pointer' );
501 - $( '#' + headerName + '_header' ).click( function() {
502 - $.renderUserDefDialogWith( wgClickTrackUserDefs[headerName], headerName );
503 - $( '#user_def_dialog' ).dialog( 'open' );
504 - } );
 483+ $( '#' + headerName + '_header' )
 484+ .css( 'cursor', 'pointer' )
 485+ .click( function() {
 486+ $.renderUserDefDialogWith( wgClickTrackUserDefs[headerName], headerName );
 487+ $( '#user_def_dialog' ).dialog( 'open' );
 488+ } );
505489 }; // headername
506490
507491 loadHeaderInfo( 'basic' );
@@ -509,21 +493,22 @@
510494 };
511495
512496 $.changeDataLinks = function() {
513 - $( '.event_name' ).each( function() {
514 - $( this ).css( 'cursor', 'pointer' );
515 -
516 - $( this ).click( function() {
 497+ $( '.event_name' )
 498+ .css( 'cursor', 'pointer' )
 499+ .click( function() {
517500 $( '#chart_img' ).data( 'eventid', $( this ).attr( 'value' ) );
518501 $( '#chart_img' ).data( 'event_name', $( this ).text() );
519502 $.updateChart();
520503 } ); // click
521 - } ); // each
522504 }; // addlink
523505
524 - return $( this );
525 -} )( jQuery );
 506+ // @FIXME: Where is this supposed to return to -- Krinkle 2011-04-27
 507+ // - commented out for now.
 508+ //return $( this );
526509
527510 // colorize the table on document.ready
528 -$( document ).ready( $.colorizeTable );
529 -$( document ).ready( $.changeDataLinks );
530 -$( document ).ready( $.setUIControls );
\ No newline at end of file
 511+$( $.colorizeTable );
 512+$( $.changeDataLinks );
 513+$( $.setUIControls );
 514+
 515+} )( jQuery );
Index: trunk/extensions/ClickTracking/modules/ext.clickTracking.js
@@ -2,16 +2,14 @@
33 * JavaScript for ClickTracking extension
44 */
55
6 -( function( $ ) {
 6+jQuery( function( $ ) {
77 // Add click tracking hooks to the sidebar
8 - $( document ).ready( function() {
9 - $( '#p-logo a, #p-navigation a, #p-interaction a, #p-tb a' ).each( function() {
10 - var href = $( this ).attr( 'href' );
11 - // Only modify local URLs
12 - if ( href.length > 0 && href[0] == '/' && ( href.length == 1 || href[1] != '/' ) ) {
13 - var id = 'leftnav-' + skin + '-' + ( $( this ).attr( 'id' ) || $( this ).parent().attr( 'id' ) );
14 - $( this ).attr( 'href', $.trackActionURL( href, id ) );
15 - }
16 - } );
 8+ $( '#p-logo a, #p-navigation a, #p-interaction a, #p-tb a' ).each( function() {
 9+ var $el = $(this), href = $el.attr( 'href' );
 10+ // Only modify local URLs
 11+ if ( href.length > 0 && href[0] == '/' && ( href.length == 1 || href[1] != '/' ) ) {
 12+ var id = 'leftnav-' + skin + '-' + ( $el.attr( 'id' ) || $el.parent().attr( 'id' ) );
 13+ $el.attr( 'href', $.trackActionURL( href, id ) );
 14+ }
1715 } );
18 -} )( jQuery );
\ No newline at end of file
 16+} )();
\ No newline at end of file
Index: trunk/extensions/ClickTracking/ClickTracking.php
@@ -85,7 +85,7 @@
8686 $wgResourceModules['ext.clickTracking.special'] = array(
8787 'scripts' => 'ext.clickTracking.special.js',
8888 'styles' => 'ext.clickTracking.special.css',
89 - 'dependencies' => array( 'jquery.ui.datepicker', 'jquery.ui.dialog' ),
 89+ 'dependencies' => array( 'jquery.json.js', 'jquery.ui.datepicker', 'jquery.ui.dialog' ),
9090 ) + $ctResourceTemplate;
9191 $wgResourceModules['ext.UserBuckets'] = array(
9292 'scripts' => 'ext.UserBuckets.js',

Follow-up revisions

RevisionCommit summaryAuthorDate
r87047FU: r87046: Fix module namekrinkle21:46, 27 April 2011
r87056Removed curious, but nonetheless invalid, parenthesis. jQuery() does not retu...tparscal23:28, 27 April 2011
r87087Fix redundant () from r87046krinkle17:09, 28 April 2011

Comments

#Comment by Nikerabbit (talk | contribs)   06:46, 28 April 2011

Is this correct?

-} )( jQuery );
\ No newline at end of file
+} )();
\ No newline at end of file
#Comment by Krinkle (talk | contribs)   17:09, 28 April 2011
#Comment by Krinkle (talk | contribs)   17:10, 28 April 2011

Seems it was already fixed by r87056.

Status & tagging log