今天,我们将学习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编程注释],让我们每天进步