Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #28995 > unrolled thread

What Does This Code Do?

Back to article view | Back to comp.lang.javascript

Contents

  What Does This Code Do? Gene Wirchenko <genew@telus.net> - 2015-12-09 10:44 -0800
    Re: What Does This Code Do? Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2015-12-09 18:17 -0200
    Re: What Does This Code Do? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-12-10 00:31 +0100

#28995 — What Does This Code Do?

Hello:

     Could someone please explain to me what this block of JavaScript
code is for?  It is near the start of a Web page.

     While I understand basic JavaScript, I do not know much idiom or
much of the object model.

     I am stuck at the start.  What does "!function" mean?

     I suspect that this code was run through a compresser of some
sort.  ("3e3" to save a byte over "3000" and the like.)  I can
understand bits of it, but I can not parse it in total.

*** Start of Code ***
!function(a,b,c){function d(a){var
c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return
d&&d.fillText?(d.textBaseline="top",d.font="600 32px
Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56806,55356,56826),0,0),c.toDataURL().length>3e3):("simple"===a?d.fillText(String.fromCharCode(55357,56835),0,0):d.fillText(String.fromCharCode(55356,57135),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function
e(a){var
c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var
f,g;c.supports={simple:d("simple"),flag:d("flag"),unicode8:d("unicode8")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag&&c.supports.unicode8||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
*** End of Code ***

Sincerely,

Gene Wirchenko

[toc] | [next] | [standalone]

#28998

Em 09/12/2015 16:44, Gene Wirchenko escreveu:
>
>       I am stuck at the start.  What does "!function" mean?
>

"!function" is another form of writing an Immediately-Invoked Function 
Expression (IIFE) in ES5:

(function() {
   /* ... */
})();

Or

(function() {
   /* etc. */
}()); // Douglas Crockford's preference.

We can also use unary operators instead of the wrapping parentheses,
if we don't care about the return value of the IIFE:

+function() { /*...*/ }();
!function() { /*...*/ }();
-function() { /*...*/ }();
~function() { /*...*/ }();

Even the void operator can be used:
void function () { /*...*/ }();

The whole point of using parens or an operator is to enforce an
expression context.


In ES2015 (aka ES6), we can replace IIFE with a block and a let declaration:
     {  // open block
         let tmp = ···;
         ···
     }  // close block

or with a module [2].

[2] <http://exploringjs.com/es6/ch_callables.html#sec_iifes-in-es6>


> I suspect that this code was run through a compresser of some sort.
> ("3e3" to save a byte over "3000" and the like.) I can understand
> bits of it, but I can not parse it in total.
>
> *** Start of Code ***
 > !function(a,b,c){function d(a){var ... (snip)


There are some dev tools called "beautifiers" to make the code more 
readable, such as http://jsbeautifier.org/ or 
http://codebeautify.org/jsviewer. Also you can try the Sublime-text 
editor with a package to do so (jsBeautifier, jsFormat, etc.)


-- 
Joao Rodrigues

[toc] | [prev] | [next] | [standalone]

#29004

[This follow-up accidentally went out as an e-mail at first; please ignore 
that.]

Gene Wirchenko wrote:

>      I suspect that this code was run through a compresser of some
> sort.  ("3e3" to save a byte over "3000" and the like.)  I can
> understand bits of it, but I can not parse it in total.

This source code was generated by a tool called a “minifier”, which you can 
deduce from observing that all variable and parameter identifiers are only 
one character long where the characters have successive Unicode code points 
(“a”, “b”, “c”, “d”, …).

Presumably you have seen this source code in a Web browser.  If so, and you 
have seen it in a script resource (usually with suffix “.js”) as well, you 
can use the *built-in* developer tools’ “pretty print” feature to make the 
source code easier readable.

For example, in Chrome Dev Tools it is toggled with the “{}” icon in the 
left bottom corner of the source code pane of the “Sources” tab; in 
Firefox/Iceweasel it is available as “Auto Prettify Minified Sources” in 
the Settings menu of the source code pane, and as “Prettify Sources” in its 
context menu, of the Web Developer Tools (not to be confused with the Web 
Developer extension [0a]).  Firebug 2.0.x [0b] also has the “{}” button; as 
a point of note, it also has a “Pretty Print” Command in the Command Editor 
of the Console (triangle buttons) that works if block braces were used, and 
a “Copy” button that is suited to create (non-minified) one-line code for 
bookmarklets out of the code in the Command Editor.

See also <http://devtoolsecrets.com/> (referred to by the FAQ in the 
section “Debugging”), section “Debugging Minified JavaScript” there.
 
As indicated, you can then use an editor that supports ECMAScript 
implementations insofar as that it can refactor a symbol in context to make 
the source code even easier to understand.  Eclipse JSDT [1] is one such 
editor (Ctrl+1 → “Rename in file”, or Ctrl+2 → R by default), Visual Studio 
Code (which is available even for Linux, and looks like a Sublime/Atom 
clone ;-)) is another; Atom can do it with the js-refactor package, and 
Sublime Text with Multiple Selections (built-in).

[0a] <http://chrispederick.com/work/web-developer/>
[0b] <http://getfirebug.com/>
[1]  <https://www.eclipse.org/webtools/jsdt/> pp.
[2]  <https://www.visualstudio.com/>
[3]  <https://atom.io/>
[4]  <http://www.sublimetext.com/>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web