How to compress javascript code in Base62 encoding without using eval()? - javascript

I used this javascript compressor and checked "Base62 Encode". I noticed that the very first thing it does is enclose everything in an eval() function (which makes sense) but I really want to avoid using it. Is there any alternative?? Like an immediately invoked function expression?
Edit:
I want to compress my code because there's a ton of conditional ifs for feature detection. (The reason I'm not using Modernizr is because I
don't want to load a whole library for just what I'm doing), and the ifs are ugly. (Plus I'm new to javascript and I'd rather learn javascript
than learn Modernizr).

You can replace eval(...) with new Function(...)() like so:
new Function(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2(a.6){3.4("5")[0].1+=" 6"}2(b.7){3.4("5")[0].1+=" 7"}2(8.9){3.4("5")[0].1+=" 9"}2(8.c){3.4("5")[0].1+=" d"}',14,14,'|className|if|document|getElementsByTagName|html|opacity|touch|html5|webworkers|css3|has|audio|html5audio'.split('|'),0,{}))()
It's not really much of an improvement but it avoids using eval.

On first inspection, Closure Compile doesn't wrap your code in an eval() call. Here's a tutorial on using the GUI version.

Related

Why jQuery-migrate in not replacing depreciated functions directly in the code?

Im using jQuery-migrate on a big project. I corrected all the warnings I could but now the warnings are inside libraries.
Some libraries are not updated anymore so I can't update them to make them work with jQuery-3.3.1.
Also, I can't replace the depreciated functions directly in the libraires because it is creating errors.
So I think that I'll keep jQuery-migrate in my project.
My question is : If jQuery-migrate is able to correct the depreciated functions when called, why it can not correct them directly in the code ?
JavaScript does not lend itself to static code analysis.
Say you needed to replace the foo function.
That would be fairly trivial if the code that called it was simply:
something.foo();
It becomes rather harder if it is:
function call(bar, method) {
bar[method]();
}
call(something, "foo");
… and even harder if the logic needed to get there was more complicated.
Creating something.foo so it just exists if anything try to access it at runtime is much simpler.

How can I wrap my javascript rails assets in Immediately Invoked Function Expressions (IIFE)?

I know that's it's best practice to isolate your javascript code into IIFEs. This also allows me to make use of the "use strict" magic string.
However, Adding this to every file by hand is not only cumbersome but prone to human error (aka forgetting).
It seems like the sprockets preprocessing would be ideal but the only example I could find was from 2 years ago and it doesn't appear to work:
http://eviltrout.com/2013/02/25/iife-in-rails.html
Does anyone have a working solution? Is the a gem I can use?
I think it did work and I missed a small detail:
One caveat – if you change the IIFE code, you’ll have to clear your tmp directory in order to get your assets to recompile.
Once I clear that out it worked beautifully.

Can i publish my javascript file in minimal mode and hard to read by others? like jquery library

Sample my code
function doit(){
var num=num1+num2
}
After publish i want like in abstract format. Like -
function a(){var b=c+d}; //should not be easily readable
Yes all these minifiers do is rename functions and variables to obfuscated names so they have no meaning to anyone reading them. Then they remove all indentation, line returns, and unnecesary spaces. I personally use jsMIN and ocassionally this online tool. http://javascript-minifier.com/

Why do most JavaScript frameworks use such short variable names?

I have been told to use a meaningful variable name for years. However, every time I've tried to debug some JavaScript code and dig in to the third party framework, I found that every JavaScript framework would have variable names like a, ac, b, c.
Why are such short variable names common practice? It seems like it would harm maintainability.
Its called minification. Its done in all languages but mostly JavaScript to remove all unnecessary characters from source code. Its mostly JavaScript because large JavaScript files can be made much smaller thereby loading quicker in the browser.
Most JavaScript libraries have a version available for developers that is not minified so that debugging can be done and then in production the minified version is used to reduce the transfer overhead.
When writing code you should always use sensible variables, but that's only so the developer can read it, the browser doesn't care.
You are most likely looking at minified javascript. This is the result of passing the original (and hopefully more readable) source code through a minification tool.
What you're probably looking at is minimized code. Minimizers rewrite the Javascript to take the minimum amount of space, so it will download as quickly as possible -- unnecessary whitespace is removed, variables and functions are replaced with short names, and some other tricks are used.
It might be the javascript you're debugging is minified. There's no way to convert a minified javascript to original code with meaningful names written by the author. You just use your instinct and analyzing skills to understand others code even if the keywords there are unreadable.
What you are seeing could be a minified version of the actual javascript. it is done so that the size of the file is reduced for performance reasons.
A good example is the jQuery library, you can look at the development version and minified version
As the others have said, it's the minified version. My contribution to this thread is simply to show an example.
take this example:
(function () {
"use strict";
var foo = function () {
return;
};
var bar = foo;
var baz = bar;
})();
And run it through jscompress.com. The result will be
(function(){"use strict";var e=function(){return};var t=e;var n=t})()

strange syntax in javascript to access a specific id in the dom

I am currently working on an old project with ton of legacy code.
A syntax I have never met is used to access a specific id in the dom in javascript.
Instead of using document.getElementById("btnsubmit"), $('btnsubmit') is used.
I have never met this syntax. Moreover it seems that firebug doesn't like it either as it seems to break the debugger. I have issues where the code doesn't seem to be executed in a debugging environment although this code is used on a production site and seems to work.
Does any one have a reference on this syntax? Where does it comes from, is it deprecated?
It's from a javascript library, and in general it's more modern than getElementById. You need the script include though.
Your example looks like Prototype
$ is just a regular character in javascript and it is often used by javascript libraries and defined to be a function name so that $() is just a function call. In some cases, $ might be defined to be a synonym for document.getElementById() as shorthand to save typing and in other cases, it's a more robust CSS3 style selector engine (as in the jQuery library).
In either case, if its undefined in your code, then you are probably missing a library reference that your code relies on. You will need to find out what library your code was written to use and make sure that library is included in the code before this spot so that the $() function is defined properly.

Categories