A jQuery object converted to a regular variable after minimization using the RequireJS r.js optimizer

Question

I have this feature in CoffeeScript

render: -> _.each @$elements, ($el) => if $el[0].id is 'tabs-div' emptySlate = "<div class='js-empty-slate' style='padding:40px;'><h3>no data available</h3><div>" @setEmptyPlacholde($el, emptySlate) return @setEmptyPlacholde($el) setEmptyPlacholde: ($el, emptySlate)-> emptySlateHTML = emptySlate or "<h3 class='js-empty-slate'>no data available</h3>" if $el.hasClass('mobile-os-con') or $el.hasClass('time-of-visit-con') or $el.hasClass('gender-visit-con') or $el.hasClass('time-redemption-sales-con') or $el.hasClass('gender-redemption-con') $el.children().hide() else $el.empty() $el.append emptySlateHTML 

$ elements is a jQuery variable that uses an array as follows:

 $elements: [ $("#tabs-div") $("#visits-male") $("#visits-female") $("#days-of-visits") $(".time-of-visit-con") ] 

When I used the RequireJS r.js optimizer that uses Uglify , the generated mini-code looks like this:

 render:function(){var e=this;return _.each(this.$elements,function(t){var n;if(t[0].id==="tabs-div"){n="<div class='js-empty-slate' style='padding:40px;'><h3>no data available</h3><div>",e.setEmptyPlacholde(t,n);return}return e.setEmptyPlacholde(t)})} 

In the previous abbreviated code, $el became t .. Thus, it refused to execute the $el element as jQuery in the product.

This is a problem, but I do not know why this is happening. Can someone explain why this is happening to me, thanks.

Update: Minimized code was not a problem, but the script was executed before the nodes in the array loaded correctly, however I call the function after the document is ready , which means that the DOM must be fully loaded.

Hint: I put the script tag on this and it works correctly when the code is not reduced.

Answer 1

First of all, your <div class='js-empty-slate' style='padding:40px;'><h3>no data available</h3><div> <- does not display properly.

As for the variable ... this is similar to the default behavior for UgliyJS , it just shortens the variable name that you provided as part of the optimization. This should not cause any problems ... however, if you want to prevent it, try adding the uglify: { no_mangle: true } r.js optimizer r.js in the parameters:

 english: { ..your settings... options: { ...your other options... uglify: { no_mangle: true }, } } 

For Uglify2 use instead:

 uglify2: { mangle: false } 

Answer 2

Just on a technical note, you can improve the code with things like -

 $elements: $("#tabs-div,#visits-male,#visits-female,#days-of-visits,.time-of-visit-con") 

and

 $elements.filter("#tabs-div") 

As for renaming variables - variable names have absolutely no meaning whatsoever except for the public API - therefore, the minifier / uglifier code will change the variable names to the shortest, in other words, starting with one character, and often in random order (although some start with a, b, c, etc.). By default, uglifier will understand that window , etc. It is global, and does not rename it.

If you don't close everything in closing, you should start with something like $: window["jQuery"] so that your local var $ correct when renaming a variable and it will point to the right thing.

If you wrap everything in closure (wrapping a function around everything can call it right away), you will pass jQuery as an argument - often you will also miss longer global characters, which will also be used as window and document .

Typically, you include your script at the end of the HTML, or wrap it in $() , which is equivalent to the state of document.ready.