ecmascript_如何使用ECMAScript模块在JavaScript中构建模块化组件

最新推荐文章于 2024-04-10 12:38:55 发布

cumi6497

最新推荐文章于 2024-04-10 12:38:55 发布

阅读量543

点赞数

文章标签： java python javascript web vue ViewUI

原文链接：https://www.freecodecamp.org/news/how-to-use-ecmascript-modules-to-build-modular-components-in-javascript-9023205ea42a/

版权

本文探讨了如何在Web应用程序中使用JavaScript模块，介绍了ECMAScript2015引入的模块功能，以及其相对于传统脚本的优势，包括分离代码、提高性能、动态导入模块等。此外，还讲解了如何在浏览器中使用这些模块。

摘要由CSDN通过智能技术生成

ecmascript

JavaScript modules are now supported by the browser. This means you can use this great addition in JavaScript, introduced by ECMAScript 2015, in the browser. Previously, you had to use a bundler such as a webpack in order to use modules. But no more. How cool is that!

浏览器现在支持JavaScript模块。这意味着您可以在浏览器中使用由ECMAScript 2015引入JavaScript中的这一出色功能。以前，您必须使用捆绑包(例如webpack )才能使用模块。但没有更多。多么酷啊！

So, in this article, we will walk through JavaScript modules and explore how we can use them in our web application.

因此，在本文中，我们将逐步介绍JavaScript模块，并探讨如何在Web应用程序中使用它们。

什么是JavaScript模块？为什么应该使用它们而不是经典脚本？ (What are JavaScript modules and why you should use them instead of a classic script?)

JavaScript modules basically allow us to import a file into another file using import and export methods. They also allow us to build modular components that can be reusable.

JavaScript模块基本上允许我们使用导入和导出方法将文件导入另一个文件。它们还使我们能够构建可重复使用的模块化组件。

为什么要使用JavaScript模块？ (Why use JavaScript modules?)

There are many advantages that come with using JavaScript modules in your app instead of a classic script:

在您的应用程序中使用JavaScript模块而不是经典脚本有很多优点：

Separating your app into modules: Building your app with modules makes it more efficient and increases the performance of your code. By using these modules, you can lazy load your code and you can use only the code that you need and avoid unused code.
将您的应用程序分成模块 ：使用模块构建应用程序可以使其效率更高，并提高代码的性能。通过使用这些模块，您可以延迟加载代码，并且可以仅使用所需的代码，而避免使用未使用的代码。
Using Strict mode by default: Yeah, strict mode is enabled by default in JavaScript modules.
默认情况下使用严格模式：是的，默认情况下，JavaScript模块中启用了严格模式。
The defer method is used by default
默认使用defer方法
This means that your HTML code is loaded in parallel with JavaScript. So, you don’t need to add deferattribute to your script tag anymore when you use ECMAScript.
这意味着您的HTML代码与JavaScript并行加载 。因此，当您使用ECMAScript时，无需再将deferattribute添加到脚本标签中。
It imports your modules dynamically
它动态导入您的模块
With JavaScript Modules you can customize the loading of your modules by running a dynamic function that imports a module just in case you need it. This assumes that when a user visits your website, you have to load only the module that handles the profile just in case the user logged in. This is explained clearly in the example below:
使用JavaScript模块，您可以通过运行动态函数来自定义模块的加载，以在需要时导入模块。假定用户访问您的网站时，您只需要加载处理配置文件的模块，以防万一用户登录。下面的示例对此进行了明确说明：

usermodule.js

profile.js

如何使用模块 (How to use modules)

Now, in this part, we are going to explore the ways to use JavaScript modules. You can easily use a JavaScript Module by specifying the attribute type to the module in the script tag that implements your main JavaScript file. Now, you can use the import and export method to import your modules.

现在，在这一部分中，我们将探索使用JavaScript模块的方法。您可以通过在实现您的主JavaScript文件的script标记中为模块指定属性类型来轻松使用JavaScript模块。现在，您可以使用导入和导出方法来导入模块。

And inside your main.js you can import and export your modules:

在main.js您可以导入和导出模块：

Using the export method in profile.js:

在profile.js使用导出方法：

As shown in the above example, it’s easy to use ECMAScript modules — there is no complex code in this case.

如上面的示例所示，使用ECMAScript模块很容易-在这种情况下没有复杂的代码。

When you set the type in the module, the browser detects automatically that the file is a module and treats it as a JavaScript module.

当您在模块中设置类型时，浏览器会自动检测到该文件是模块，并将其视为JavaScript模块。

In another way, you can set the .mjs extension to the file so the browser can identify the module. But this doesn’t make big changes if you set the type attribute as a module to the script tag.

换句话说，您可以将.mjs扩展名设置为文件，以便浏览器可以识别模块。但是，如果将type属性设置为script标签的模块，则不会有太大变化。

浏览器支持 (Browser support)

It seems that only the modern browsers support JavaScript modules. But that’s alright if you use great browsers like Chrome, Edge, and Firefox.

似乎只有现代的浏览器才支持JavaScript模块。但是，如果您使用出色的浏览器(例如Chrome，Edge和Firefox)，就可以了。

我不再需要使用捆绑器了吗？ (I don’t need to use bundlers anymore?)

Addy Osmani and Mathias Bynens explain in this article that you probably don’t need a web bundler such as webpack if you develop a web app with less than 100 modules. You can check out the article where they have exposed the best practices and good usage of ECMAScript modules here.

Addy Osmani和Mathias Bynens在本文中解释说，如果开发的模块少于100个的Web应用程序，则可能不需要诸如webpack之类的Web捆绑程序。你可以看看他们在那里暴露的ECMAScript模块的最佳做法和良好的使用文章在这里。

Find the code in the GitHub repository here.

查找GitHub的库中的代码在这里。

结语 (Wrapping up)

JavaScript modules are a great way to increase the performance of your app. They allow you to do many things that make your app more performant like a dynamic load of your modules, lazy loading, and more. Moreover, the great thing is that it supports the browser. So, don’t hesitate to take advantage of them if you don’t use a file bundler.

JavaScript模块是提高应用程序性能的好方法。它们使您能够做很多事情来提高应用程序的性能，例如模块的动态加载，延迟加载等等。而且，最棒的是它支持浏览器。因此，如果您不使用文件捆绑器，请毫不犹豫地利用它们。

Originally published on Zeolearn

最初发表于Zeolearn

Join My Class to learn Bootstrap on Skill Share

加入我的班级，学习有关技能分享的引导程序

Previous Articles:

以前的文章：