JavaScript Loading Guide

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:

(function(){})();

But here are a few ways to do it:

• !function(){}();
• +function(){}();
• -function(){}();
• ~function(){}();
• ~(function(){})();
• void function(){}();
• (function(){}());

In fact, a closer look can see the law, because +-!~ these have a very high priority, so the function declaration on the right side with parentheses (in fact, is 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:

var data = undefined;

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:

var data = void 0; // undefined

Void in JavaScript is an operator that does not execute on an incoming operation and returns undefined. After void can be followed () with, for example void(0) , seems to be not very familiar with? Yes, in the HTML block with HREF's default click operation, all like to write the 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. void 0the code is obscure and 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:

if () {  // ...} else if () { // ...} else if () { // ...} else { // ...}

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 the !! operator can also simplify the if-else mode. For example, this:

// 普通的if-else模式var isValid = false;if (value && value !== ‘error‘) { isValid = true;}// 使用!!符号var isValid = !!(value && value !== ‘error‘);

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

4. Do not add semicolons

The debate over whether or not to add a semicolon to JavaScript has been arguing for years. Google's JavaScript Grammar guide tells us to add semicolons, and many JavaScript grammar books tell us that it's safer to add semicolons. However, the semicolon is not added, all rely on the code of the individual writing, you are sure to write safe enough, do not add semicolons appear taller.

5. Catch ES6 's early bus

ES6 will be officially released by the end of the year, the trendy developers, quickly in their own code to use up. 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? It's also a ES5 of the code head "use strict"; .

6. Add AMD Module support

Give your code a statement about the AMD module specification so that others can load your module directly from AMD's specifications, and you can gracefully return a regular global object if someone else doesn't load your module by spec. Let's take a look at jQueryUI's wording:

(function (Factory) {  if (typeof define = =  "function" && define.amd) {  //AMD. register as an anonymous module.  define ([ "jquery"], factory); } else {  // Browser globals  factory (jQuery); }} (Function ($) { //Place module code  span class= "keyword" >return $.widget;}));          

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); the notation that should be used var arr = [1, 2]; instead. 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.

var f = new Function(‘a‘, ‘alert(a)‘);f(‘test‘); // 将会弹出窗口显示test

Perhaps you are puzzled, how do you write like this, and function f(a) {alert(a);} what is the advantage?
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.

Summarize

All of the above JavaScript is forced to write, some are for the program to understand or improve the efficiency of the syntax of sugar, such a practice is preferable, such as the above-mentioned omission of if-else practice, and some of the writing is easy to make the code obscure or inefficient, such as the above-mentioned void 0 wording, actually not advisable. 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, pretending to be good-looking.

JavaScript Loading Guide