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

This article will explain in detail how to use the keywords import and export to implement a module interface in native JavaScript. The content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

In the era of the Internet, websites were mainly developed with HTML and CSS. If JavaScript is loaded into a page, usually providing effects and interactions in small fragments, it is common to write all the JavaScript code in a file and load it into a script tag. Although JavaScript can be split into multiple files, all variables and functions are still added to the global scope.

But later, JavaScript plays an important role in browsers, there is an urgent need to use third-party code to accomplish common tasks, and the code needs to be broken down into modular files to avoid polluting the global namespace.

The ECMAScript 2015 specification introduces module into the JavaScript language, as well as import and export statements. In this article, let's learn about the JavaScript module and how to organize code in import and export.

Modular programming

Before the concept of modules appeared in JavaScript, when we wanted to organize our code into multiple blocks, we used to create multiple files and link them as separate scripts. Let's start with an example by creating an index.html file and two JavaScript files, "functions.js and script.js."

The index.html file is used to display the sum, difference, product, and quotient of two numbers and to link to two JavaScript files in the script tag. Open index.html and add the following code:

Index.html

JavaScript Modules Answers and Addition

Subtraction

Multiplication

Division

This page is very simple, so I won't elaborate on it.

The functions.js file contains the mathematical functions that will be used in the second script. Open the file and add the following:

Functions.js

Function sum (x, y) {return x + y} function difference (x, y) {return x-y} function product (x, y) {return x * y} function quotient (x, y) {return x / y}

Finally, the script.js file is used to determine the values of x and y, as well as to call the previous functions and display the results:

Script.js

Const x = 10 const y = 5 document.getElementById ('x'). TextContent = x document.getElementById ('y'). TextContent = y document.getElementById ('addition'). TextContent = sum (x, y) document.getElementById (' subtraction'). TextContent = difference (x, y) document.getElementById ('multiplication'). TextContent = product (x, y) document.getElementById (' division'). TextContent = quotient (x, y)

After saving, open index.html in the browser to see all the results:

For sites that only need a few small scripts, this is an effective way to organize code. But there are some problems with this approach:

Pollute the global namespace: all variables you create in the script (sum, difference, etc.) now exist in the window object. If you plan to use another variable named sum in another file, it will be difficult to know which value variable is used elsewhere in the script, because they all use the same window.sum variable. The only way to make a variable private is to put it in the scope of the function. Even an id named x in DOM may conflict with var x.

Dependency management: scripts must be loaded from top to bottom to ensure that the correct variables can be used. Saving scripts as separate files creates the illusion of separation, but it is essentially the same as in a single file on the page.

Before ES6 added native modules to the JavaScript language, the community tried to provide several solutions. The first solution is written in native JavaScript, such as writing all code in objects or immediately called function expressions (IIFE) and placing them on a single object in the global namespace. This is an improvement on the multi-scripting approach, but there is still the problem of putting at least one object into the global namespace, which does not make it easier to share code consistently among third parties.

Then there are some module solutions: CommonJS is a synchronous method implemented in Node.js, Asynchronous Module definition (AMD) is an asynchronous method, and there are general methods that support the first two styles-General Module definition (UMD).

The advent of these solutions makes it easier to share and reuse code in the form of packages, that is, modules that can be distributed and shared, such as npm. But because there are many solutions that are not native to JavaScript, you need to rely on tools such as Babel, Webpack, or Browserify to be used in browsers.

Because there are many problems with the multi-file approach and the solutions are complex, developers are very interested in introducing modular development methods into the JavaScript language. So ECMAScript 2015 began to support JavaScript module.

Module is a set of code that provides the functionality used by other modules and can use the functionality of other modules. The export module provides the code, and the import module uses other code. Modules are useful because they allow us to reuse code, they provide many stable, consistent interfaces available, and do not pollute the global namespace.

Modules (sometimes called ES modules) can now be used in native JavaScript, and in this article, let's explore how to use and implement them in code.

Native JavaScript module

Modules in JavaScript use the import and export keywords:

Import: used to read code exported from another module.

Export: used to provide code to other modules.

Next, update the previous functions.js file to the module and export the function. Add export in front of each function.

Functions.js

Export function sum (x, y) {return x + y} export function difference (x, y) {return x-y} export function product (x, y) {return x * y} export function quotient (x, y) {return x / y}

Use import in script.js to retrieve the code from the previous functions.js module.

Note: the import must always be at the top of the file before writing other code, and must also include the relative path (in this case. /).

Change the code in script.js to look like this:

Script.js

Import {sum, difference, product, quotient} from'. / functions.js' const x = 10 const y = 5 document.getElementById ('x'). TextContent = x document.getElementById ('y'). TextContent = y document.getElementById ('addition'). TextContent = sum (x, y) document.getElementById (' subtraction'). TextContent = difference (x, y) document.getElementById ('multiplication'). TextContent = product (x, y) document.getElementById (' division'). TextContent = quotient (x, y)

Note: import by naming a single function in curly braces.

To ensure that the code is imported as a module and not loaded as a regular script, add the type= "module" to the script tag in index.html. Any code that uses import or export must use this property:

Index.html

Due to CORS policies, modules must be used in the server environment, otherwise the following error will occur:

Access to script at 'file:///Users/your_file_path/script.js' from origin' null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

The module is different from the regular script:

The module does not add anything to the global (window) scope.

The module is always in strict mode.

There is no problem loading the same module twice in the same file, because the module is executed only once.

The module requires a server environment.

Modules are still often used in conjunction with packaged programs such as Webpack to add support and additional functionality to browsers, but they can also be used directly in browsers.

Next, explore more ways to use import and export syntax.

Named export

As mentioned earlier, using export syntax allows you to import values exported by name separately. Take this simplified version of function.js as an example:

Functions.js

Export function sum () {} export function difference () {}

This allows you to import sum and difference by name using curly braces:

Script.js

Import {sum, difference} from'. / functions.js'

You can also rename the function with an alias. This avoids naming conflicts in the same module. In this example, sum will be renamed to add and difference will be renamed to subtract.

Script.js

Import {sum as add, difference as subtract} from'. / functions.js' add (1,2) / / 3

Calling add () here produces the result of the sum () function.

Use the * syntax to import the contents of the entire module into an object. In this case, sum and difference will become methods on the mathFunctions object.

Script.js

Import * as mathFunctions from'. / functions.js' mathFunctions.sum (1,2) / / 3 mathFunctions.difference (10,3) / / 7

Primitive values, function expressions and definitions, asynchronous functions, classes, and instantiated classes can all be exported, as long as they have identifiers:

/ / original value export const number = 100export const string = 'string' export const undef = undefined export const empty = null export const obj = {name:' Homer'} export const array = ['Bart',' Lisa', 'Maggie'] / / function expression export const sum = (x, y) = > x + y / / function definition export function difference (x Y) {return x-y} / / Anonymous function export async function getBooks () {} / / Class export class Book {constructor (name, author) {this.name = name this.author = author}} / / instantiated class export const book = new Book ('Lord of the Rings',' J. R. R. Tolkein')

All of these exports can be imported successfully. Another type of export that we will explore next is called default export.

Default Export in the previous example we exported multiple named exports and imported each export separately or as an object, using each export as a method on the object. Modules can also include default exports with the keyword default. The default export does not use curly braces for import, but imports directly into named identifiers.

Take the functions.js file as an example:

Functions.js

Export default function sum (x, y) {return x + y}

In the script.js file, you can import the default function as sum with the following command:

Script.js

Import difference from'. / functions.js' difference (1,2) / / 3

However, this is dangerous because there are no restrictions on the naming of the default export during the import process. In this example, the default function is imported as difference, although it is actually a sum function:

Script.js

Import difference from'. / functions.js' difference (1,2) / / 3

So it is generally preferred to use named exports. Unlike a named export, a default export does not require an identifier-either the original value itself or an anonymous function can be used as a default export. The following is an example of an object that is used as a default export:

Functions.js

Export default {name: 'Lord of the Rings', author:' J. R. R. Tolkein',}

You can import it as book with the following command:

Functions.js

Import book from'. / functions.js'

Similarly, the following example shows how to export the anonymous arrow function as the default export:

Functions.js

Export default () = > 'This function is anonymous'

You can import it like this:

Script.js

Import anonymousFunction from'. / functions.js'

Named and default exports can be used in conjunction with each other, for example, in this module, two named values and a default value are exported:

Functions.js

Export const length = 10 export const width = 5 export default function perimeter (x, y) {return 2 * (x + y)}

You can import these variables and default functions with the following command:

Script.js

Import calculatePerimeter, {length, width} from'. / functions.js' calculatePerimeter (length, width) / / 30

Both default and named values are now available for scripting.

Summary

Modular programming allows us to divide the code into individual components, which helps code reuse while protecting the global namespace. A module interface can be implemented in native JavaScript using the keywords import and export.

On the native JavaScript how to use the keywords import and export to achieve a module interface to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.