编程知识 cdmana.com

JavaScript es module: necessary skills of modern front-end programming

since ES After the module is added to the specification ,JavaScript The module in is much simpler . Modules are separated by file , Load asynchronously . Export is to use export Keyword defined ; Value can be used import Keyword import .

Although the basics of importing and exporting individual values are very easy to master and use , But there are many other ways to use ES Modules to make your imports and exports work the way you want them to . In this paper , I'll show you all the ways you can export and import in modules .

One thing to remember is , Exports and static imports can only occur on the outermost layer of a module . You can't take a function 、if Statement or any other block to export or statically import . in addition , Dynamic import can be done in functions , We'll discuss it at the end of this article .

export

The default is derived

Each module has one " Default " export , It represents the main values exported by the module . There may be more derived values , But the default export value represents the definition of the module . There can only be one default export in a module .

const fruitBasket = new FruitBasket()

export default fruitBasket

Be careful , Before the default export , I have to define the value first . If I want to , I can also export my values immediately , Instead of assigning it to a variable , But then I can't export it and assign it to a variable .

We can export a function declaration and a class declaration by default , You don't have to assign it to a variable first .

export default function addToFruitBasket(fruit) {
  // ...
}

We can even export literals as default .

export default 123

Named export

Any variable declaration can be exported at creation time , This will create a " Named export ", Use the variable name as the export name .

export const fruitBasket = new FruitBasket()

We can also immediately export the declaration of functions and classes .

export function addToFruitBasket(fruit) {
  // ...
}
export class FruitBasket {
  // ...
}

If we want to export a defined variable , We can use curly braces to wrap variable names as objects .

const fruitBasket = new FruitBasket()

export { fruitBasket }

We can even use as Keyword to rename our export , Make it different from the variable name . if necessary , We can also export other variables at the same time .

const fruitBasket = new FruitBasket()
class Apple {}

export { fruitBasket as basketOfFruit, Apple }

Aggregate export

We're going to have this kind of situation all the time , It's importing modules from a module , And then immediately export these values . Such as this :

import fruitBasket from './fruitBasket.js'

export { fruitBasket }

When you want to import and export many things at the same time , It can become cumbersome .ES Module allows us to import and export multiple values at the same time .

export * from './fruitBasket.js'

This will put ./fruitBasket.js All named exports are repackaged and exported again , But it doesn't export the default export values , Because a module can only have one default export value . If we want to import and export multiple modules with default export , Which value will be the default export value of the export module ?

We can specifically export default modules from other files , Or name the default export when re exporting .

export { default } from './fruitBasket.js'

//  perhaps 

export { default as fruitBasket } from './fruitBasket.js'

We can also selectively export different projects from another module , Instead of re exporting all the items . under these circumstances , We also use braces .

export { fruitBasket as basketOfFruit, Apple } from './fruitBasket.js'

Last , We can use as Keyword to package the entire module into a single named export . Suppose we have the following documents :

// fruits.js
export class Apple {}
export class Banana {}

Now we can package it into a separate export object , This object contains all named and default export objects .

export * as fruits from './fruits.js'
// { Apple: class Apple, Banana: class Banana }

Import

The default import

When importing a default value , We need to give it a name . Since it's the default value , It doesn't matter what we name it .

import fruitBasketList from './fruitBasket.js'

We can also import all the exports at the same time , Including named export and default export . This will put all the exports into one object , And the default export will be given "default " The property name .

import * as fruitBasket from './fruitBasket.js'
// { default: fruitBasket }

Name import

We can import any named export by wrapping the name of the export with curly braces .

import { fruitBasket, Apple } from './fruitBasket.js'

We can also use as Keyword rename import .

import {fruitBasket as basketOfFruit, Apple} from './fruitBasket.js'

We can also mix named exports and default exports in the same import statement . The default exported content will be listed first , Then there's the named export in braces .

import fruitBasket, { Apple } from './fruitBasket.js'

Side effects are introduced

Sometimes a module does not export values , We just want to import the module in and execute it immediately . When importing such a module , There is no need to list any exported values in the file . This is known as ” side effect (side-effect)“ Import , It will execute the code in the module directly without providing any exported values .

import './fruitBasket.js'

Dynamic import

Sometimes we don't know the name of the file before we import it . Or we don't need to import a file until half of the code is executed , We can use dynamic import to import modules anywhere in the code . So it's called " dynamic ", Because the path of the import may be uncertain , It can be a string variable or a string expression , Unlike static import, it must be a string literal .

because ES Modules are asynchronous , So the module will not be available immediately . We have to wait for it to load before we can do anything about it . Because of that , Dynamic import will return a parsing module of Promise.

async function createFruit(fruitName) {
  try {
    const FruitClass = await import(`./${fruitName}.js`)
  } catch {
    console.error('Error getting fruit class module:', fruitName)
  }
  return new FruitClass()
}

summary

ES The exported content can be a value ( Including variables and literal quantities ) It can also be the declaration of classes and functions , From the export mode can be divided into default export 、 Named exports and aggregate exports . According to different export methods , Import can be divided into default import 、 Name import 、 Side effect import and dynamic import . Both named export and import can use as Specify alias .​ Export and static import must be on the outermost layer of the file , Dynamic import can be done asynchronously in the function of the code .

版权声明
本文为[Front end bee]所创,转载请带上原文链接,感谢

Scroll to Top