Explain how to execute the function expression IIFE and javascriptiife in javascript immediately

Explain how to execute the function expression IIFE and javascriptiife in javascript immediately

I. IIFE explanation

Fully spell Imdiately Invoked Function Expression, the Function Expression to be executed immediately.

As shown in the following code, a function is executed anonymously immediately:

(Function (window, undefined) {// code...}) (window );

Ii. Meanings of parentheses

2.1 meaning of braces wrapped in function () {}

This bracket aims to convert function () {} into an expression. Like the source code of some libraries, you prefer to use the following method:

~ Function () {// code ...}();

Or in this way:

+ Function () {// code ...}();

In fact, all functions are the same. function () {} is converted into an executable expression for convenient execution.

If this bracket is removed, an error is returned. Because function () {} is not an executable expression, an error is reported directly. For example:

2.1 meaning of the second bracket

After understanding the meaning of the first bracket, the second bracket is very simple, that is, the execution expression.

Iii. Significance of parameters

The following code is used as an example to describe the parameters.

var wall = {};(function(window, WALL, undefined){})(window, wall);

Parameters are divided into form parameters and real parameters.

Function (window, WALL, undefined) parameters are form parameters, and the two parameters of the second bracket (window, wall) are real parameters.

Window = window, wall = WALL.

2.1 common parameters

Common parameters are input and specified by actual variables such as window and wall. They can be any type of variables. A parameter corresponds to a real parameter.

2.2 Special parameter undefined

This is a very interesting topic about how to write an undefined parameter.

In this example, there are only two real parameters and three form parameters. Therefore, when the function is executed, the parameter undefined is assigned an undefined value by default.

The role of the parameter undefined is as follows:

2.2.1 prevent special undefined values from being tampered with by malicious code.

In earlier versions such as IE6, undefined supports modification. After this special value is modified, the judgment as follows becomes invalid.

If (wall = undefined) {// code ...}

Therefore, the purpose of adding a parameter here is to prevent this situation. Undefined can be obtained normally within the IIFE scope.

2.2.2 compression code can be compressed undefined

Undefined is used as the parameter. Code compression tools such as YUI compressor can compress their values to reduce the file size.

Iv. Writing Analysis

4.1 normal writing

Var wall ={}; // declare and define a namespace wall // define a method (function (window, WALL, undefined) {// bind the method to the wall namespace: say WALL. say = function () {console. log ('hello') ;};}) (window, wall); (function (window, WALL, undefined) {// bind the whoIam wall method to the WALL namespace. whoIam = function () {console. log ('wall') ;};} (window, wall); // call wall. say (); wall. whoIam ();

First define a namespace and then add something to the namespace. This is the most common way of writing and is also the best to understand.

The disadvantage is that you must declare a namespace before executing the relevant binding code. There is an issue of sequential loading.

4.2 zoom in Mode

Var wall = (function (window, WALL, undefined) {if (typeof WALL = 'undefined') {WALL = {};} // bind the "say wall" method to the WALL namespace. say = function () {console. log ('hello');} return WALL; // return reference}) (window, wall); var wall = (function (window, WALL, undefined) {if (typeof WALL = 'undefined') {WALL = {};}// bind the whoIam wall method to the WALL namespace. whoIam = function () {console. log ('wall');} return wall; // return reference}) (window, WALL); // call wall. say (); wall. whoIam ();

The advantage of the zoom-in mode is that you do not need to consider the order of code loading.

Because js allows the wall variable to repeat var Declaration, this code can be executed.

I can split the IIFE function into multiple files for loading without having to pay attention to common writing.

Notes:

1. the IIFE header must first check whether the namespace has been instantiated. If it has not yet been instantiated, it will be instantiated.

2. The end of IIFE must return the reference of the namespace so that subsequent code can obtain the latest wall namespace content.

4.3-width zoom-in Mode

(Function (window, WALL, undefined) {// bind the method to the wall namespace: say WALL. say = function () {console. log ('hello') ;}} (window, window. wall | (window. wall = {}); (function (window, WALL, undefined) {// bind the whoIam wall method to the WALL namespace. whoIam = function () {console. log ('wall') ;}} (window, window. wall | (window. wall ={}); // call wall. say (); wall. whoIam ();

Important points of attention in the Wide-zoom mode: window. wall | (window. wall ={}) in the real parameter section {}).

Use the | Operator.

If window. wall is instantiated, It is not defined. Then, the reference of window. wall is directly returned and assigned to the WALL parameter. Not executed | content following the operator.

If window. wall has not been instantiated, it will be instantiated. The note here is that instantiation is a value assignment operation. You need to wrap it in parentheses and convert it into an expression for execution so that no error is reported.

After the expression (window. wall = {}) is executed, a reference to the new window. wall object is returned.

The advantage of the wide amplification mode is that it can be cut into multiple files for loading without considering the order of file loading and there is no strong coupling relationship.

Of course, if the methods in IIFE reference each other, there is still a problem of loading dependencies. This problem can be solved by tools such as the loader Require. js, which will not be discussed here.

5. Notes for loading IIFE files

; (Function (window, WALL, undefined) {// bind the wall namespace to the method say WALL. say = function () {console. log ('hello') ;}} (window, window. wall | (window. wall = {}));

You can see the difference at the beginning of the file. Write a semicolon first ;.

In this way, when multiple files are merged, there will be no ending connection and code disorder. For example:

//. Js file wall. log () // B. js file (function (window, WALL, undefined) {// bind the method to the wall namespace to say WALL. say = function () {console. log ('hello') ;}} (window, window. wall | (window. wall = {}));

Because. the wall. log () writes less semicolons, and B. after the js file is merged, js considers 'Wall. log ()(...) 'If this is the case, the result code returns an error.

I think it's good. You can pay attention to the articles in the modular series. Let's take a look at the subsequent code!

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!