teach you how to shape a JavaScript image

How do you write JavaScript to make it taller? How can you organize JavaScript to make it easier for others to see you at a glance? Do you expect others to read your code and say, "Can you write like this?" Here are some of the loading techniques for JavaScript.

1. n Notation of anonymous functions

do you know the four ways of "anise"? ε= (? д? ' *)?? ... Nonsense, but you may not know several ways to get an anonymous function. In general, the write anonymous function is this:

1. (function () {}) ();

Copy Code

But here are a few ways to do it:

1. !function () {} ();
2. +function () {} ();
3. -function () {} ();
4. ~function () {} ();
5. ~ (function () {}) ();
6. void function () {} ();
7. (function () {} ());

Copy Code

In fact, a closer look can see the law, because +-!~ these have a very high priority, so the function declaration on the right and the parentheses of the part (in fact, the function of the execution of the writing) directly executed. Of course, this kind of writing, no difference, purely to see the degree of force.

2. Another type of undefined

It is never necessary to declare the value of a variable to be undefined, because JavaScript automatically resets an unassigned variable to undefined. All if you write in this code, you will be despised:

1. var data = undefined;

Copy Code

But if you are obsessive-compulsive, be sure to declare a variable that has no value for the moment and assign a undefined. Then you might consider doing this:

1. var data = void 0; Undefined

Copy Code

void in JavaScript is an operator that does not execute on an incoming operation and returns undefined. Can the void be followed () to use, for example void (0), which seems to be familiar? Yes, in the HTML block with HREF's default click operation, all like to write href javascript:void (0), in fact, also rely on the void operation does not execute the meaning.

of course, in addition to the reasons for the force, the actual use of void, because the appearance of void is to be compatible with the early ECMAScript standard does not have the undefined attribute. The notation of void 0 makes the code difficult to understand.

3. Discard your if and else

when there is a lot of conditional logic in the JS code, the code looks awful:

1. if () {
2. // ...
3. } else if () {
4. // ...
5. } else if () {
6. // ...
7. } else {
8. // ...
9. }

Copy Code

Needless to say, you guessed what syntax to use to simplify if-else. Yes, with | | And &&, the simple principle is needless to say. It is worth mentioning that sometimes use!! Operator can also simplify the if-else mode. For example, this:

1. Normal If-else mode
2. var isValid = false;
3. if (value && value!== ' error ') {
4. IsValid = true;
5. }
6. Use!! Symbol
7. var isValid =!! (Value && value!== ' error ');

Copy Code

        "!" is to take the anti-operation, two "!" Naturally, the negative is positive.

4. No semicolon

       

5. Catch the early bus of ES6

       es6 will be officially released by the end of the year, the trendy developers, Hurry up and use it in your own code. Using the module declaration, writing class, and tinkering with the map will make your code a bit taller. God horse? You don't even use it? Well, at least add a ES5 "use strict" to the head of the code.

6. Add AMD Module support

        The code you write is a statement of the AMD module specification so that others can load your module directly from AMD's specifications, and if others don't load your module by spec, You can also return gracefully to a regular global object. Let's take a look at jQueryUI's notation:

1. (function (Factory) {
2. if (typeof define = = = "function" && define.amd) {
3. Amd. Register as an anonymous module.
4. define (["jquery"], factory);
5. } else {
6. Browser Globals
7. Factory (JQuery);
8. }
9. } (function ($) {
10. Put the module code here
11. return $.widget;
12. }));

Copy Code

use it to wrap your actual code, and make sure that you are a professional developer by looking at the code.

7. Function constructors

Many JavaScript tutorials tell us not to use built-in object constructors directly to create basic variables, such as var arr = new Array (2), which should be replaced with the notation of var arr = [1, 2]; However, the function constructor (note that the function is uppercase) is a bit special. The function constructor accepts parameters, the first of which is the name of the parameter to pass in, and the second is the code within the functions, represented by a string.

1. var f = new Function (' A ', ' alert (a) '); F (' Test '); A pop-up window will display the test

Copy Code

Perhaps everyone doubts that you are writing around like this, with function f (a) {alert (a);} than what good is it?
in fact, in some cases it's good, like when you can't use eval, you need to pass in the string content to create a function. In some JavaScript template language parsing, and string conversion JSON object is more practical.

8. Use native DOM interface without jquery

a proud front-end engineer does not need jquery, if you can withstand the toss. In fact, almost all jquery methods can be implemented with the same DOM native interface, because the goods are originally implemented with the native interface, haha. How do I do without jquery (also called jquery-free)? Mr. Ruan's blog "How To do jquery-free?" "Gives us a good explanation of the practice. Depending on the interfaces of the two modern browsers, Queryselector and Queryselectorall, you can achieve DOM lookups that are as convenient and efficient as jquery, and other similar Ajax and CSS interface can also be native methods to do some compatibility aspects of packaging can be done jquery-free.

Summary

all of the above JavaScript is forced to write, some are for the program to understand or improve the efficiency of the syntactic sugar, such a practice is preferable, such as the above-mentioned omission of If-else, and some of the writing is easy to make the code obscure or inefficient, such as the above said void The 0 notation is actually undesirable. JavaScript syntax is flexible, so that you have a different way of writing the same function, the optimization of the writing is very helpful to the program structure and code maintenance. So, it's a good outfit.

teach you how to shape a JavaScript image