📌  相关文章
📜  ES6-模块

📅  最后修改于: 2020-10-25 10:46:07             🧑  作者: Mango

介绍

考虑一个场景，其中需要重用部分JavaScript代码。 ES6借助Modules的概念为您提供了帮助。

一个模块组织了一组相关的JavaScript代码。模块可以包含变量和函数。模块不过是文件中编写的JavaScript代码的一部分。默认情况下，模块的变量和功能不可用。应该导出模块中的变量和函数，以便可以从其他文件中访问它们。 ES6中的模块仅在严格模式下工作。这意味着模块中声明的变量或函数将无法全局访问。

导出模块

export关键字可用于导出模块中的组件。模块中的导出可以分类如下-

  • 命名出口
  • 默认出口

命名出口

命名出口以其名称区分。一个模块中可以有几个命名的导出。模块可以使用下面给出的语法导出选定的组件-

语法1

//using multiple export keyword
export component1
export component2
...
...
export componentN

语法2

另外，模块中的组件也可以使用具有{}绑定语法的单个export关键字导出，如下所示-

//using single export keyword

export {component1,component2,....,componentN}

默认出口

仅需要导出单个值的模块可以使用默认导出。每个模块只能有一个默认导出。

句法

export default component_name

但是，一个模块可以同时具有默认导出和多个命名导出。

导入模块

要使用模块，请使用import关键字。一个模块可以具有多个import语句。

导入命名出口

在导入命名的导出文件时，相应组件的名称必须匹配。

句法

import {component1,component2..componentN} from module_name

但是，在导入命名的导出文件时，可以使用as关键字对其进行重命名。使用下面给出的语法-

import {original_component_name as new_component_name }

可以使用星号*运算符将所有已命名的导出导入到对象上。

import * as variable_name from module_name

导入默认导出

与命名导出不同，可以使用任何名称导入默认导出。

句法

import any_variable_name from module_name

示例：命名出口

步骤1-创建一个文件company1.js并添加以下代码-

let company = "TutorialsPoint"

let getCompany = function(){
   return company.toUpperCase()
}

let setCompany = function(newValue){
   company = newValue
}

export {company,getCompany,setCompany}

第2步-创建文件company2.js。该文件使用了company1.js文件中定义的组件。使用以下任何一种方法来导入模块。

方法1

import {company,getCompany} from './company1.js'

console.log(company)
console.log(getCompany())

方法2

import {company as x, getCompany as y} from './company1.js'

console.log(x)
console.log(y())

方法3

import * as myCompany from './company1.js'

console.log(myCompany.getCompany())
console.log(myCompany.company)

步骤3-使用HTML文件执行模块

要执行这两个模块，我们需要制作一个如下所示的html文件，然后在实时服务器中运行它。注意，我们应该在脚本标签中使用属性type =“ module” 。


   
   
   Document

以上代码的输出将如下所示-

TutorialsPoint
TUTORIALSPOINT

默认导出

步骤1-创建一个文件company1.js并添加以下代码-

let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name = newName
   }
}

export default company

步骤2-创建一个文件company2.js 。该文件使用了company1.js文件中定义的组件。

import c from './company1.js'
console.log(c.getName())
c.setName('Google Inc')
console.log(c.getName())

步骤3-使用HTML文件执行模块

要执行这两个模块，我们需要制作一个如下所示的html文件，然后在实时服务器中运行它。注意，我们应该在脚本标签中使用属性type =“ module” 。


   
   
   Document

上面代码的输出将如下所述-

TutorialsPoint
Google Inc

示例：结合默认导出和命名导出

步骤1-创建一个文件company1.js并添加以下代码-

//named export
export let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name =newName
   }
}
//default export
export default company

步骤2-创建一个文件company2.js 。该文件使用了company1.js文件中定义的组件。首先导入默认导出，然后导入命名的导出。

import c, {name} from './company1.js'

console.log(name)
console.log(c.getName())
c.setName("Mohtashim")
console.log(c.getName())

步骤3-使用HTML文件执行模块


      
      
      Document

上面代码的输出将如下所示-

TutorialsPoint
TutorialsPoint
Mohtashim