当前位置: 首页 > 网络应用技术

全面了解ES6模块化编程

时间:2023-03-08 21:39:09 网络应用技术

  今天,我们将学习ES6的模块化系统,如何导出变量,功能,模块中的类,以及在其他模块中使用它们。

  在ES6模块系统中,每个JS文件都可以理解为模块,并且模块代码以严格的模式执行,因此模块中的变量和功能不会添加全局范围。

  在ES6之前,我们可能需要使用require.js实现模块化编程。在node.js中,使用commonjs规范进行模块化编程。JS没有统一的规范,因此在ES6中启动了新的模块化解决方案。

  创建一个文件

  它是ES6中的一个模块,其中包含一个变量,该变量将变量公开带有语句的其他模块。

  然后在中国创建一个,以引入模块,在中间,我们创建一个H1元素并将其插入页面。

  该语句用于从模块导入变量。

  最后,创建一个HTML文件并介绍

  注意:这里我们需要在脚本标签中添加一个模块。运行如下如下

  注意:您需要启动本地服务器以打开页面,并且不能直接使用本地打开方法。

  要从模块导出变量,函数或类,我们需要使用关键字

  在上面的示例中,我们创建了具有变量,两个函数和1类的log.js模块,然后使用它们将它们导出。

  应该注意的是,带有导出的功能或类别需要具有名称。我们不能使用导出来导出匿名功能或类。

  我们还可以首先定义变量或函数,然后稍后导出

  在上面的示例中,我们首先定义FOO函数,然后以后导出。由于我们没有导出条函数,因此无法在其他模块中访问。我们只能在当前模块中使用。我们可以称为私有所有权。

  使用带有导出的模块,我们可以使用关键字访问另一个模块中的变量,函数或类

  指定要在括号中导入的变量,函数或类。

  注意:当我们导入模块时,它就像const定义变量。引入后,不允许更改。

  例如

  当我们介绍消息变量和setMessage()函数时,我们可以调用该函数以更改模块中消息变量的值。

  但是,如果您直接去修改消息变量,您将报告一个错误

  实际上,当我们调用setMessage()函数时,js将转到模块执行代码并修改消息变量,然后导入的消息变量也将随之变化。

  导出a,b,结果变量和sum(),cal.js中的倍增()函数

  然后在app.js中介绍,使用它们

  在上面的示例中,我们可以使用数字关键字将模块中的所有内容导入单个对象

  然后,您可以使用CAL对象访问导出的变量和功能

  请注意, /语句只能在代码的最外层执行,并且不能在其他字段中执行。

  同样,导入语句也将报告语法错误

  错误的原因是 / /可以通过静态方式确定导入或导出的内容,并且不能动态介绍该模块。

  但是,ES2020中引入了一个函数,该函数可以支持动态导入模块。

  在下面,我们使用add()函数使用别名总和进行导出。

  然后,当引入模块时,当我们要使用a)时,我们需要用总和替换它

  如果我们不想在导入时使用总和作为导入,我们也可以使用关键字来使用其他名称

  重新扩展导入模块

  下面的语法等同于上述

  我们还可以使用别名重新出口

  re -export一切,我们可以使用该号码

  有些学生可能不知道该重新出口的作用是什么。实际上,这个角色很大。例如,我们编写了20个组件。我们不想写20个导入语句。我们只想写1个导入语句,然后我们可以构建它。然后我们可以构建它。一个中间文件引入了这20个组件,然后将所有内容导出,然后当我们使用它时,仅导入语句就可以了。您可以参考蚂蚁设计组件库的写作。

  有时,我们将开发一个不需要指定名称的模块。

  然后,我们直接去导入模块,然后使用数组的包含方法

  模块只能具有一个默认导出。一般而言,默认导出更容易导入,因为我们不需要看到导入的变量,函数或类。通常,默认导出。

  默认情况下,下面的模块派生一个函数

  使用模块

  简介等同于模块中导出的默认函数。

  同样,我们可以在默认情况下导出其他功能

  要引入来自模块和非默认导出的默认导出,我们必须遵循以下规则

  这样的

  如果您默认要导出,我们也可以使用关键字,例如

  今天,我们了解了JavaScript ES6模块化编程的所有方面。如果您有任何疑问,请留言发表评论。明天见。

  如果本文有帮助,请在微信上搜索[Little Shuai编程注释],让我们每天进步