Add metrics queriesWithoutResults, jQueryCalls, jQueryCallsOnEmptyObject, jQueryNotDelegatedEvent

front/src/js/directives/offendersDirectives.js

@@ -670,8 +670,10 @@
 
             if (node.data.callDetails.context && node.data.callDetails.context.length === 0) {
                 html += '<h4>Called on 0 jQuery element</h4><p class="advice">Useless function call, as the jQuery object is empty.</p>';
-            } else if (node.data.type === 'jQuery - bind' && node.data.callDetails.context.length > 5) {
-                html += '<p class="advice">The .bind() method attaches the event listener to each jQuery element one by one. Using the .on() method is preferable if available (from v1.7).</p>';
+            } else if (node.data.type === 'jQuery - bind' && node.data.callDetails.context.length > 3) {
+                html += '<p class="advice">The .bind() method attaches the event listener to each jQuery element one by one. Using the .on() method with event delegation is preferable if available (from v1.7).</p>';
+            } else if (node.data.type === 'jQuery - on' && node.data.callDetails.context.length > 3) {
+                html += '<p class="advice">The .on() method used this way attaches the event listener to each jQuery element one by one. Using the event delegation version of the method is preferable if available (from v1.7).</p>';
             }
 
             if (node.data.resultsNumber === 0) {

lib/tools/jsExecutionTransformer.js

@@ -10,10 +10,11 @@ var jsExecutionTransformer = function() {
         
         var metrics = {
             DOMaccesses: 0,
+            DOMaccessesOnScroll: 0,
             queriesWithoutResults: 0,
             jQueryCalls: 0,
             jQueryCallsOnEmptyObject: 0,
-            DOMaccessesOnScroll: 0
+            jQueryNotDelegatedEvent: 0
         };
 
         try {
@@ -24,14 +25,27 @@ var jsExecutionTransformer = function() {
             if (javascriptExecutionTree.children) {
                 javascriptExecutionTree.children.forEach(function(node) {
                     
-                    // Mark abnormal things with a warning flag
                     var contextLenght = (node.data.callDetails && node.data.callDetails.context) ? node.data.callDetails.context.length : null;
-                    if ((node.data.type === 'jQuery - bind' && contextLenght > 5) ||
-                            node.data.resultsNumber === 0 ||
-                            contextLenght === 0) {
+
+                    if ((node.data.type === 'jQuery - bind' || node.data.type === 'jQuery - on') && contextLenght > 3) {
+                        metrics.jQueryNotDelegatedEvent += contextLenght - 1;
                         node.warning = true;
                     }
 
+                    if (node.data.resultsNumber === 0) {
+                        metrics.queriesWithoutResults ++;
+                        node.warning = true;
+                    }
+
+                    if (contextLenght === 0) {
+                        metrics.jQueryCallsOnEmptyObject ++;
+                        node.warning = true;
+                    }
+
+                    if (node.data.type.indexOf('jQuery - ') === 0) {
+                        metrics.jQueryCalls ++;
+                    }
+
                     // Mark errors with an error flag
                     if (node.data.type === 'error' || node.data.type === 'jQuery version change') {
                         node.error = true;