如何使用 javascript中的import,export 语法

发布网友 发布时间：2022-04-23 07:56

我来回答

共4个回答

懂视网 时间：2022-05-14 17:54

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
严格模式
嵌入式脚本

热心网友 时间：2022-05-14 15:02

export
允许标明的脚本向其它标明或未标明的脚本提供属性、函数和对象。
实现版本 Navigator 4.0, Netscape Server 3.0

描述
通常情况下标明脚本中的信息仅对象同主体标明的脚本可用。通过导出属性、函数或对象，标明脚本将使得信息对于任何脚本(标明或未标明的)都可用。接收脚本使用对应的 import 语句访问信息。

import
允许脚本从标识的脚本中导入已经导出的属性、函数和对象。
实现版本 Navigator 4.0, Netscape Server 3.0

描述
objectName 参数是将接受导入的名称的对象名称。例如，如果已经导出了 f 和 p，obj 是导入脚本中的一个对象，那么
import obj.f, obj.p 将使得 f 和 p 在导入脚本中可访问，就像是 obj 的属性一样。

通常情况下，标明脚本中的信息仅对象同主体标明的脚本可用。通过导出(使用 export 语句)属性、函数或对象，标明脚本将使得信息对于任何脚本(标明或未标明的)都可用。接收脚本使用对应的 import 语句访问信息。

热心网友 时间：2022-05-14 16:20

var JCore = {//构造核心对象
version:1.0,
$import:function(importFile){
var file = importFile.toString();
var IsRelativePath = (file.indexOf("$")==0 ||file.indexOf("/")==-1);//相对路径(相对于JCore)
var path=file;
if(IsRelativePath){//计算路径,$开头表示使用当前脚本路径，/开头则是完整路径
if(file.indexOf("$")==0)
file = file.substr(1);
path = JCore.$dir+file;
}
var newElement=null,i=0;
var ext = path.substr(path.lastIndexOf(".")+1);
if(ext.toLowerCase()=="js"){
var scriptTags = document.getElementsByTagName("script");
for(var i=0;ilength;i++) {
if(scriptTags[i].src && scriptTags[i].src.indexOf(path)!=-1)
return;
}
newElement=document.createElement("script");
newElement.type="text/javascript";
newElement.src=path;
}
else if(ext.toLowerCase()=="css"){
var linkTags = document.getElementsByTagName("link");
for(var i=0;ilength;i++) {
if(linkTags[i].href && linkTags[i].href.indexOf(path)!=-1)
return;
}
newElement=document.createElement("link");
newElement.type="text/css";
newElement.rel="Stylesheet";
newElement.href=path;
}
else
return;
var head=document.getElementsByTagName("head")[0];
head.appendChild(newElement);
},
$dir : function(){
var scriptTags = document.getElementsByTagName("script");
for(var i=0;ilength;i++) {
if(scriptTags[i].src && scriptTags[i].src.match(/JCore/.js$/)) {
path = scriptTags[i].src.replace(/JCore/.js$/,"");
return path;
}
}
return "";
}()
}
其中$dir表示当前脚本文件的路径，通过当前文件的文件名查找路径；$import方法可以导入js脚本或css样式表文件，如果以$开头则使用当前脚本文件的路径导入文件，如果以/开头则表示是完整的脚本路径！
$import("/Script/myfile.js");
$import("/Script/mystyle.css");
$import("$myfile.js");
为html动态添加script节点元素或style节点元素只是动态导入脚本的一种脚本，除此之外，还可以通过Ajax异步请求js脚本文件，然后通过eval方法把获取的脚本文本转换为脚本代码实现动态导入功能！但是css样式表文件无法通过这种方式导入！不过CSS样式表本身即有@import关键字，可以实现文件引用包含！

热心网友 时间：2022-05-14 17:55

查了下JS手册，

export
允许标明的脚本向其它标明或未标明的脚本提供属性、函数和对象。
实现版本 Navigator 4.0, Netscape Server 3.0

描述
通常情况下标明脚本中的信息仅对象同主体标明的脚本可用。通过导出属性、函数或对象，标明脚本将使得信息对于任何脚本(标明或未标明的)都可用。接收脚本使用对应的 import 语句访问信息。

import
允许脚本从标识的脚本中导入已经导出的属性、函数和对象。
实现版本 Navigator 4.0, Netscape Server 3.0

描述
objectName 参数是将接受导入的名称的对象名称。例如，如果已经导出了 f 和 p，obj 是导入脚本中的一个对象，那么
import obj.f, obj.p 将使得 f 和 p 在导入脚本中可访问，就像是 obj 的属性一样。

通常情况下，标明脚本中的信息仅对象同主体标明的脚本可用。通过导出(使用 export 语句)属性、函数或对象，标明脚本将使得信息对于任何脚本(标明或未标明的)都可用。接收脚本使用对应的 import 语句访问信息。

脚本必须在导入并使用任何导出的属性、函数或对象之前将导出脚本装载到窗口、框架或层中。