However, the script is longer, the need to replicate a large section of the address bar, it is very beautiful, and the script is not easy to modify. So the script is usually written in a single file, and then dynamically loaded into the page in JavaScript: form. Many web Plug-ins are loaded with this method.
Normally, we use the simplest code to implement dynamic loading:
Copy Code code as follows:
Javascript:var o=document.createelement (' script '); o.src= ' ... ';d ocument.body.appendChild (o); void (0)
Of course, this is ok enough for the plug-in to load. But not long ago I saw a slightly modified method, so I began to wonder how short this code can compress!
His code is roughly the same, but more rigorous:
Copy Code code as follows:
JavaScript: (function (o) {o.src= ' ... ';d ocument.body.appendChild (O)}) (Document.createelement (' script ')); void (0)
Although the code is longer than previous, the variable is placed in a closure to avoid potential conflicts. And the document.createelement as a closure parameter, cleverly save a var word.
There is nothing to do, so consider whether the code can be streamlined and streamlined. By the way to review the various characteristics of JS inside.
Of course, first of all, default to the rules to be followed by several address bar loading scripts:
1. Do not introduce global variables
2. Compatible with mainstream browsers
3. Loading process does not affect the page
> does not affect global variables, we need to use closures to hide our private variables;
> compatible with the mainstream browser, you must use the standard method, compatibility judgment will only increase the length of the code;
> If the simple use of innerhtml to add elements, it is possible to cause the presence of elements to refresh;
So we began to analyze it gradually.
Obviously, the first thought was the invocation of anonymous closures.
Usually we invoke an anonymous closure in the form of: (function () {}) (). Note that the red precedence bracket is essential, otherwise it is a bad syntax.
But you can also use another form: the + number in front of the +function () {} () can be replaced with-!~, and so on. But this is only 1 byte difference.
Another obvious one is that you can replace the parameter of void (0) with the expression of the closure call. Void is just a keyword, but has functions like functions that return undefined for any parameter. If there is no void, JavaScript is executed in the address bar: After that, the page becomes the return value of the script expression, which everyone should have seen.
So after the obvious observation, a slight reduction of 3 characters.
Copy Code code as follows:
Javascript:void (+function (o) {o.src= ' ... ';d ocument.body.appendChild (o)} (document.createelement (' script '))
But above all is the shallow level observation. Now let's make a careful analysis.
Why we use closures is to prevent conflicts in our variables and pages. So can I use a variable? The only way to avoid a variable is to use a chain-like operation: Use the return value of the previous operation as an argument for the next operation. This code has 3 operations: Create a SCRIPT element/SCRIPT element src Assignment/Add script element. With a careful reference to the handbook of the Dom.appendchild, not only can you add elements, but the return value is also this element. And the sequence of src assignment and element additions can be interchanged. So we can completely say goodbye to closures and variables with chained operations:
Copy Code code as follows:
Javascript:void (Document.body.appendChild (document.createelement (' script ')). src= ' ... ')
This step, we have streamlined 19 characters!
We continue to observe. There are 2 document in the code above. We can reduce the number of words if we replace them with a short variable. However, the use of variables will be the problem of conflict, and then use the closure ... Careful recollection, JS has a we usually do not recommend the use of things: with. Yes, using him can solve the problem. I am just with (document) {...} Can. Because there is only one line of code, the braces can also be removed. And then reduced by 4 characters:
Copy Code code as follows:
Javascript:with (document) void (Body.appendchild (createelement (' script ')). src= ' ... ')
It is noteworthy that void is no longer in the outermost layer, as with and if, for them, is no longer an expression, but a statement.
At this point, every sentence in the code is the responsibility of each division, even repeated words are not found. Can we be more streamlined? If it is hard to find, it must be found in the void this guy. If you remove it, the address bar executes, and the page becomes the SRC character of the script element. It is clearly not deleted. But we can try a different one, like alert. After the dialog box, the page remains.
Previously, the function of void was simply to return a undefined, and alert did not return a value. Here we have to say that JavaScript is different from other languages. In other languages, there are almost two concepts of functions/processes, which are functions that do not return a value. But JS can be different, in JS any function has a return value, even if "no return value" is a return value, he is undefined. So alert and void have the same return value: undefined. As soon as the address bar executes, the page does not jump, and other things like False,0,null,nan and so on are not.
So we just let the expression return undefined, but it has to be shorter than the void () characters. To produce a undefined, in addition to its literal constants, the other is to invoke a function that does not return a value, or to access an attribute that does not exist for an object. We need to be as brief as possible. If jquery is used on the page, we use $. X can get a undefined. But without JQ, there is no guarantee of the existence of the variable $. Since we can't find a short enough global variable, we can use JSON to create an anonymous, such as [] or {}, and then access his nonexistent attributes, such as []. X. So we can say goodbye to void:
Copy Code code as follows:
Javascript:with (document) Body.appendchild (createelement (' script ')). src= ' ... '; []. X
This reduces the 1 bytes. We can also merge the code and replace x with an expression:
Copy Code code as follows:
Javascript:with (document) [][body.appendchild (createelement (' script ')). src= ' ... ']
This reduces the 1 bytes.
In fact, any variable in JS is inherited from object, even if the numbers are no exception. So, we can completely replace [] with a number, which is further reduced by 1 characters:
Copy Code code as follows:
Javascript:with (document) 0[body.appendchild (createelement (' script ')). src= ' ... '
In addition to the SRC character, the code is shortened to 76 bytes.
Of course, the ultimate limit is still being explored ...
With Google's short domain name service Google URL Shortener, we can shorten the URL of the script, for example:
Copy Code code as follows:
Javascript:with (document) 0[body.appendchild (createelement (' script ')). src= ' Http://goo.gl/QPp29 ']
