js导入导出

.js导入导出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js导入导出</title>
</head>



<body>
 <div>
     <button id="btn" >点我展示信息</button>
     </div>
 <!-- 导入showMessage.js文件的全部内容 -->
 <script src="showMessage.js"></script>

 <script>
    document.getElementById("btn").onclick = function(){
        complexMessage('bbbbb');
    }
</script>
</body>


</html>

//简单的展示信息
function simpleMessage(msg){
    console.log(msg)
}

//复杂的展示信息
function complexMessage(msg){
    console.log(new Date()+": "+msg)
}

//简单的展示信息

export function simpleMessage(msg){

console.log(msg)

}

//复杂的展示信息

export function complexMessage(msg){

console.log(new Date()+": "+msg)

}

export命令可以按需导出，如果需要批量导出则可以添加

export{ simpleMessage,complexMessage};

导出时可以用别名

import { messageMethods as cm } from './showMessage.js’

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js导入导出</title>
</head>



<body>
 <div>
     <button id="btn" >点我展示信息</button>
     </div>


 <script type="module">
     import { complexMessage as cm } from "./showMessage.js";

     document.getElementById("btn").onclick = function(){
        cm('bbbbb');
    }
</script>
</body>


</html>

//简单的展示信息
 function simpleMessage(msg){
    console.log(msg)
}

//复杂的展示信息
 function complexMessage(msg){
    console.log(new Date()+": "+msg)
}

export{  simpleMessage ,complexMessage }

默认导出

//简单的展示信息
export function simpleMessage(msg){
    console.log(msg)
}

//复杂的展示信息
export function complexMessage(msg){
    console.log(new Date()+": "+msg)
}
export default {  simpleMessage ,complexMessage }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js导入导出</title>
</head>



<body>
 <div>
     <button id="btn" >点我展示信息</button>
     </div>


 <script type="module">
     import xx from "./showMessage.js";

     document.getElementById("btn").onclick = function(){
        xx.complexMessage('bbbbb');
    }
</script>
</body>


</html>

使用默认导出后，那么xx.可以带出函数。

一次知道javascript有模块的概念通常都是使用<script>标签进行引入，不过只能在html文件上使用

增加的模块就如同php里的include、require可以使用引入的内容，

不过php是默认引入的文件内部全部可用，而javascript则是选择导出、选择导入，只可以使用引入的函数、变量、对象

codecademy上理解javascript module部分

JavaScript中的模块是可重复使用的代码段，可以从一个程序导出并导入到另一个程序中使用。

module.exports将模块导出用于其他程序。

module.export = 变量; || module.export = {对象内属性方法} require() 导入当前程序中使用的模块。 conste 变量 = require('引入的文件相对地址带后缀名.js'); ES6引入了一个更灵活，更简单的语法来导出模块：

默认导出用于export default导出JavaScript对象，函数和原始数据类型。

export default 变量; 命名导出使用export关键字来导出变量中的数据。 export {变量名、对象名、函数}; 命名导出可以用as关键字别名。 export {变量名 as 别名、对象名、函数}; import 是导入任何对象，函数或数据类型的关键字。 import 变量 from '文件相对地址（不要文件后缀）';

者开始学习Javascript的时候，对模块不太懂，不知道怎么导入模块，导出模块，就胡乱一通试

比如 import xx from 'test.js' 不起作用，就加个括号 import {xx} from 'test.js'

反正总是靠蒙，总有一种写法是对的，其实还是没有理解，还是不懂

尤其是在当初写 www.helloworld.net 网站的时候，一遇到这种问题，就懵逼了，尤其是引入第三方库的时候

这种情况下更多，此篇文章也是为了怕以后忘记，自查用的，也希望能帮助更多的朋友，此篇文章只是针对ES6的模块相关知识

首先要知道export，import 是什么

我们知道，JS 模块导入导出，使用 import , export 这两个关键字

export 用于对外输出本模块
import 用于导入模块

也就是说使用 export 导出一个模块之后，其它文件就可以使用 import 导入相应的模块了

下面我们具体看看， import 和 export 到底怎么用？怎么导出模块（比如变量，函数，类，对象等）

1 导出单个变量

//a.js 导出一个变量，语法如下
export var site = "www.helloworld.net"

//b.js 中使用import 导入上面的变量
import { site } from "/.a.js" //路径根据你的实际情况填写
console.log(site)	//输出： www.helloworld.net

2 导出多个变量

上面的例子是导出单个变量，那么如何导出多个变量呢

 //a.js 中定义两个变量，并导出
 var siteUrl="www.helloworld.net"
 var siteName="helloworld开发者社区"
 
 //将上面的变量导出
 export { siteUrl ,siteName }  
 
 
 
 // b.js 中使用这两个变量
 import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写

 console.log(siteUrl)	//输出： www.helloworld.net
 console.log(siteName)	//输出： helloworld开发者社区

3 导出函数

导出函数和导出变量一样，需要添加{ }

//a.js 中定义并导出一个函数
function sum(a, b) {
    return a + b
}
//将函数sum导出
export { sum } 


//b.js 中导入函数并使用
import { sum } from "/.a.js" //路径根据你的实际情况填写
console.log( sum(4,6) ) //输出： 10

4 导出对象

js中一切皆对象，所以对象一定是可以导出的，并且有两种写法

4.1 第一种写法

使用 export default 关键字导出，如下

//a.js 中，定义对象并导出, 注意，使用export default 这两个关键字导出一个对象
export default {
    siteUrl:'www.helloworld.net',
    siteName:'helloworld开发者社区'
}


//b.js 中导入并使用
import obj from './a.js'   	//路径根据你的实际情况填写
console.log(obj.siteUrl)	//输出：www.helloworld.net
console.log(obj.siteName)	//输出：helloworld开发者社区

4.2 第二种写法

同样是使用export default 关键字，如下

//a.js 中定义对象，并在最后导出
var obj = {
   	siteUrl:'www.helloworld.net',
    siteName:'helloworld开发者社区'
}

export default obj	//导出对象obj


//b.js 中导入并使用
import obj from './a.js'   	//路径根据你的实际情况填写
console.log(obj.siteUrl)	//输出：www.helloworld.net
console.log(obj.siteName)	//输出：helloworld开发者社区

5 导出类

导出类与上面的导出对象类似，同样是用 export default 关键字，同样有两种写法

5.1 第一种写法

//a.js 中定义一个类并直接导出
export default class Person {
    //类的属性
    site = "www.helloworld.net"

    //类的方法
    show(){
        console.log(this.site)
    }
}


//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show()  	//输出：www.helloworld.net

5.2 第二种写法

//a.js 中定义一个类，最后导出
class Person {
    //类的属性
    site = "www.helloworld.net"

    //类的方法
    show(){
        console.log(this.site)
    }
}

//导出这个类
export default Person 



//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show()  	//输出：www.helloworld.net

小结

下面我们简单总结一下

export与export default的区别

export与export default均可用于导出常量、函数、文件、模块等
可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
export default后面不能跟const或let的关键词
export、import可以有多个，export default仅有一个。
通过export方式导出，在导入时要加 { }，export default则不需要
export具名导出xxx ，export default匿名。区别在于导入的时候，export需要一样的名称才能匹配，后者无论取什么名都可以。
模块化管理中一个文件就是一个模块，export可以导出多个方法和变量，export default只能导出当前模块，一个js文件中只支持出现一个

对于 import ,export , export default ，他们的用法上面的例子已经很详细的列出了，忘记的时候，可以当作参考看看

最重要的还是要明白为什么要这么写，实在不明白记住就行了。

在线咨询

上一篇：新老站一网打尽，快速提高你的网站收录
下一篇：HTML前端常用标签(复习)

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商