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

Why stop using JavaScript IIFE! Aiming at this problem, this article introduces the corresponding analysis and answer in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

In the JavaScript language, IIFE stands for calling a function expression immediately, which is a function that executes immediately after definition.

Why did I say stop writing IIFE in your code? This article will give you the answer.

You can define Block-Scoped variables in JavaScript

With ES6 as the standard release, you can use let and const to declare variables and constants at the block level. It also introduces independent blocks that can isolate variables and constants into their own blocks that cannot be used externally.

For example, you can write:

{let x = 1;}

Then x is not available externally.

This is much clearer than the following code:

() = > {let x = 1;}) ()

Nowadays, almost all browsers support ES6, and stopping using IIFE can separate variables from the outside.

Another way to isolate variables is to use modules, which are also widely supported. As long as it is not exported, other modules cannot be used.

Closures are no longer needed

A closure is a function that returns another function. The returned function can run on its external code, but the internal code is run by the closure function.

For example, it might produce:

Const id = () = > {let count = 0; return () = > {+ + count; return `id_$ {count} `;}) ()

Now that there are blocks and modules to isolate the data, the above functions become more complex and unnecessary.

You can put all functions into their own modules so you don't have to worry about exposing data, but this can also have side effects. Because it is not a pure function, it is difficult to test it.

Functions that return functions also introduce nesting when nesting can be avoided, so it is more confusing than functions that do not return functions. Replacing it with modules is the best way. Using the module, you can write:

Let count = 0 native export const id = () = > {+ + this.count; return `id_$ {count} `}

In the above code, there is the same count declaration and the id function is exported for use by other modules. This, like IIFE, hides the count and exposes the function we want, but with less nesting, there is no need to define another function to run it.

Alias variable

Similarly, write the following:

Window.$ = function foo () {/ /...}; (function ($) {/ /...}) (jQuery)

You can write using modules, so why write IIFE just to create aliases for variables? With the module, you can import content with different names.

You can create aliases for variables in this way:

Import {$as jQuery} from "jquery"; const $= () = > {}

In addition, do not add new properties to the window object, which affects the global scope.

Snap to global object

With globalThis, you don't have to worry about the names of global objects in different scopes, which is becoming a standard. Instead of using IIFE to capture global objects, you can write the following at the zone level:

(function (global) {/ /...}) (this)

Even before "globalThis", it was not too difficult to write something like this to set up the global object:

Const globalObj = self | | window | | global

Or if you want to be more accurate, you can write:

Const getGlobal = () = > {if (typeof self! = = 'undefined') {return self;} if (typeof window! = =' undefined') {return window;} if (typeof global! = = 'undefined') {return global;} throw new Error (' unable to locateglobal object');}

You don't have to add additional function calls and introduce nesting through IIFE.

Optimized compression

With the JavaScript module, you don't have to use IIFE to isolate the code, which compresses the file appropriately.

Network packages, browsing, parcels, summaries, etc. (Webpack, Browserify, Parcel, Rollup, etc.) can handle modules correctly, so why not use these programs to create clearer code.

Writing IIFE in your code is out of date, and it adds additional function definitions and nesting. In 2020, please choose to use modules and blocks to separate the code!

About why you stopped using JavaScript IIFE! The answer to the question is shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.