Shulou(Shulou.com)06/02 Report--

How to dress up the JavaScript code as a Christmas tree, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

It's not amazing, we use a nodejs library we wrote ourselves, and if you want to achieve this effect, just follow the following method.

The following two chapters explain how to use the js2image library and js2image library respectively.

Github address: https://github.com/xinyu198736/js2image ps: ask star

Online translation address: http://f2e.souche.com/cheniu/js2image.html

Js2image usage

Github address: https://github.com/xinyu198736/js2image Welcome to star or follow.

Js2image has two main special features:

Compress any js source code into the final code stacked into a graph. For example, Christmas tree, Santa Claus, code and pictures can be customized.

The compressed js code format is corrupted, but it can still run. This is the key point!

For the compressed example, you can view these js (all from the official website of car search):

Http://assets.souche.com/assets/js/souche.js souche main script

Http://assets.souche.com/assets/js/lib/jquery-1.7.1.min.js jquery 1.7.1

Http://assets.souche.com/assets/js/lib/mustache.js mustache

The method of use is simple:

Npm install js2image-g

Then execute in the folder where the js exists:

Js2image-s. / resource/jquery.js

Or execute for all js in a directory (use with caution), deeply traverse all the js files in this directory and compress the result file with the .xmas.js suffix.

Js2image-s. / resource/

You can generate a corresponding *. Xmas.js file.

If you want to integrate js2image into gulp or other nodes projects, you can use the form of modules:

Var Js2Image = require ("js2image"); / / codeJs2Image.getCode (". / resource/jquery.js", ". / resource/tree.png", {}) .then (function (code) {console.log (code);})

For more information, please refer to the documentation on github.

If you just want to use this effect, see here on the ok, the following explain the principle of this library, some places may be more around.

Principle of js2image implementation

From a macro point of view, there are only three main points in the implementation of js2image.

Generate character paintings from pictures, which has a ready-made library.

Divide the js code into small chunks, as small as possible, and then replace them with line-by-line filling into the character drawing generated in the previous step.

There are a lot of syntax in js code that cannot be separated, so keep these syntax in one block when you divide them into blocks. This is the difficulty of this library, and it is also the place with the most code.

Students who have some ideas are expected to see that they have basically understood what is going on here. Let's explain these three main points one by one.

① generates 2 worthwhile character drawings from pictures.

A ready-made npm package is used here: image-to-ascii. The purpose of this library is to restore an image with the specified characters. And we use this library to generate a character painting that uses ☃ characters and spaces to represent black and white respectively, and then decomposes each line of the character painting into an element of an array for the second step, which is a struct generated among us. For the code, see utils/image-to-struct.js.

② divides the js source code into small pieces as small as possible.

This is a very important step. How small pieces of js code can be broken down?

Take a look at the following code:

! function (e T) {("objec" + "t") = = typeof module & & ("objec" +) "t") = = typeof module. Module. Exports=e.document?t (e,! 0): function (e) {if (! e.document) throw new Error (("jQuer" + "y req" + "uires" + "a wi" + "ndow" + "with" + "a doc" + "ument") Return t (e)}: t (e)} (("undef" + "ined")! = typeof window? window:this,function (eMagin t) {var

This is a piece of code at the beginning of jQuery, and you can see that most operators allow as many spaces or newlines to be inserted in the middle, and we use this feature to disarm the js code and splice it into an arbitrarily shaped picture.

The core code is actually a regular, which we use to decompose the js source code into an array, and then continue to take fragments from this array according to the number of characters required for each line.

/ / separate the code and split it into arrays in divisible units. Var lines = hold_code.replace (/ (^ a-zA-Z_0-9pm! | & $]) / g, "/ nasty 1plantasia") .split ("/ n") / / after having this lines array, it is simple. According to the struct generated in the * step, you can continuously traverse the extraction code from lines and fill it into struct to generate the final code: while (lines.length > 0) {/ / loop fills the struct with the code struct.forEach (function (s) {var chars_arr = s.replace (/ + / g, "")) / / multiple groups of separated * var r = s; chars_arr.split (/ + /) .forEach (function (chars) {if (chars.length = = 0) {return;} var char_count = chars.length) / / take the number of char_count codes from lines to fill them, which may not be accurate. Make sure that the broken lines are correct var l = pickFromLines (lines,char_count); r = r.replace (chars,function () {return l;})}) result + = r + "/ n"})}

③ retains the indivisible syntax

Note: at this stage, it is still very early, your decomposed code can not be run, a lot of code that can not wrap and add spaces are separated by you, it will naturally report an error, so how to deal with these situations?

What we have done in this step is:

Before performing a code split, extract all the indivisible syntax in the code, keep them in an object, replace them with placeholders in the source code, and then let the placeholders participate in the separation of the previous step. Because the placeholder is a complete hyphen variable, it will not be split. After the segmentation is complete, we can replace these placeholders back.

But which grammars in js must be concatenated to work properly?

Here is a summary:

Strings cannot be separated from the contents of double quotation marks and single quotation marks.

It is difficult to deal with the escaping in regular expressions which are absolutely indivisible, which is the difficulty in this algorithm.

Operation operators include 3 characters of 2 characters, such as the following two types of operators

Var double_operator = ["=", "> =", ">", "

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.