es6 模块——迹忆客-ag捕鱼王app官网

考虑需要重用部分 javascript 代码的场景。 es6 以模块的概念来拯救你。

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

导出模块

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

• 命名导出
• 默认导出

命名导出

命名导出通过它们的名称来区分。 一个模块中可以有多个命名导出。 模块可以使用下面给出的语法导出选定的组件

// 使用多个 export 关键字
export component1
export component2
...
...
export componentn

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

// 使用单个 export 关键字
export {component1,component2,....,componentn}

默认导出

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

export default component_name

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

导入模块

为了能够使用模块，请使用 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 并添加以下代码

company1.js

let company = "jiyik"
let getcompany = function(){
   return company.touppercase()
}
let setcompany = function(newvalue){
   company = newvalue
}
export {company,getcompany,setcompany}

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

方法一

company2.js

import {company,getcompany} from './company1.js'
console.log(company)
console.log(getcompany())

方法二

company2.js

import {company as x, getcompany as y} from './company1.js'
console.log(x)
console.log(y())

方法三

company2.js

import * as mycompany from './company1.js'
console.log(mycompany.getcompany())
console.log(mycompany.company)

第 3 步 - 使用 html 文件执行模块

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

上述代码的输出如下所示

jiyik
jiyik

默认导出

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

company1.js

let name = 'jiyik'
let company = {
   getname:function(){
      return name
   },
   setname:function(newname){
      name = newname
   }
}
export default company

第 2 步 - 创建文件 company2.js。 此文件使用 company1.js 文件中定义的组件。

company2.js

import c from './company1.js'
console.log(c.getname())
c.setname('google inc')
console.log(c.getname())

第 3 步 - 使用 html 文件执行模块

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

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

jiyik
google inc

合并默认导出和命名导出

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

company1.js

//named export
export let name = 'jiyik'
let company = {
   getname:function(){
      return name
   },
   setname:function(newname){
      name =newname
   }
}
//default export
export default company

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

company2.js

import c, {name} from './company1.js'
console.log(name)
console.log(c.getname())
c.setname("mohtashim")
console.log(c.getname())

第 3 步 - 使用 html 文件执行模块

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

jiyik
jiyik
mohtashim