博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一篇文章弄懂 JavaScript 中的 import
阅读量:5789 次
发布时间:2019-06-18

本文共 2486 字,大约阅读时间需要 8 分钟。

import 语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode,导入的模块都运行在严格模式下。import语句不能在嵌入式脚本中使用。

语法

import defaultExport from “module-name”;import * as name from “module-name”;import { export } from “module-name”;import { export as alias } from “module-name”;import { export1 , export2 } from “module-name”;import { export1, export2 as alias2 , [...] } from “module-name”;import defaultExport, { export [ , [...] ] } from “module-name”;import defaultExport, * as name from “module-name”;import “module-name”;

defaultExport

将引用模块默认导出的名称。

module-name

要导入的模块。这通常是包含模块的 .js 文件的相对或绝对路径名,可以不包括 .js 扩展名。某些打包工具可以允许或要求使用该扩展;检查你的运行环境,只允许单引号和双引号的字符串。

name

引用时将用作一种命名空间的模块对象的名称。

export,exportN

要导入的导出名称

alias,aliasN

将引用指定的导入的名称。

描述

name 参数是“模块对象”的名称,它将用一种名称空间来引用导出。导出参数指定单个命名导出,而import * as name 语法导入所有导出。

导入整个模块的内容

这将 myModule 插入当前作用域,其中包含来自位于 /modules/my-module.js 文件导出的所有模块。

import * as myModule from ‘/modules/my-module.js’;

在这里,访问导出意味着使用模块名称(在这种情况下为”myModule”)作为命名空间。例如,如果上面导入的模块包含一个doAllTheAmazingThings(),你可以这样调用:

myModule.doAllTheAmazingThings();

导入单个导出

给定一个名为 myExport 的对象或值,它已经从模块 my-module 导出(因为整个模块被导出)或显式导出(使用 export 语句),将 myExport 插入到当前作用域。

import { myExport } from ‘/modules/my-module.js’;

导入多个导出

将 foo 和 bar 插入当前作用域。

import { foo, bar } from ‘/modules/my-module.js’;

导入带有别名的导出

导入时可以重命名导出,例如,将shortName 插入当前作用域。

import { reallyReallyReallyLongModuleExportName as shortName } from “/modules/my-module.js”;

导入时重命名多个导出

使用别名导入模块的多个导出。

import {    reallyReallyReallyLongModuleMemberName as shortName,    anotherLongModuleName as short} form “/modules/my-module.js”;

仅为副作用而导入一个模块

模块仅为副作用(中性词、无贬义含义)而导入,而不是导入模块中的任何内容,这将运行模块中的全局代码,但实际上不导入任何值。

import “/modules/my-module.js”

导入默认值

在 default-export (无论是对象、函数、类等)有效时可用。然后可以使用 import 语句来导入这样的默认值。

最简单的用法是直接导入默认值:

import myDefault from “/modules/my-module.js”;

也可以同时将 default 语法与上述用法(命名空间导入和命名导入)一起使用。在这种情况下,default 导入必须首先声明。

import myDefault, * as myModule from “/modules/my-module.js”;

或者

import myDefault, { foo, bar } from “/modules/my-module.js”;

示例

从辅助模块导入以协助处理 AJAX DSON 请求。

模块:file.js

function getJSON(url, callback){    let xhr = new XMLHttpRequest();    xhr.onload = function () {        callback(this.responseText)    };    xhr.open(‘GET’, url, true);    xhr.send();}export function getUserFulContents(url, callback){    getJSON(url, data => callback(JSON.parse(data)));}

主程序:main.js

import { getUserFulContents } from “/modules/file.js”;getUserFulContents(‘http://www.example.com”,     data => { doSomethingUseful(data); } )

补充

strict mode

严格模式
嵌入式脚本

转载地址:http://zgmyx.baihongyu.com/

你可能感兴趣的文章
模块化(1):基本思路
查看>>
Ubuntu18.04中配置QT5.11开发环境
查看>>
Exception的妙用
查看>>
基于浏览器的开源“管理+开发”工具,Pivotal MySQL*Web正式上线!
查看>>
JavaScript(五):变量的作用域
查看>>
知识图谱在互联网金融中的应用
查看>>
MySQL 到底能不能放到 Docker 里跑?
查看>>
wpf 自定义窗口,最大化时覆盖任务栏解决方案
查看>>
【docker】关于docker 中 镜像、容器的关系理解
查看>>
information_schema系列五(表,触发器,视图,存储过程和函数)
查看>>
瓜子二手车的谎言!
查看>>
[转]使用Git Submodule管理子模块
查看>>
DICOM简介
查看>>
Scrum之 Sprint计划会议
查看>>
List<T> to DataTable
查看>>
[Java]Socket和ServerSocket学习笔记
查看>>
stupid soso spider
查看>>
svn命令在linux下的使用
查看>>
There is insufficient system memory to run this query 错误
查看>>
基于ARM-contexA9-Linux驱动开发:如何获取板子上独有的ID号
查看>>