js怎么导入sgf棋谱（Javascript 模块导入导出（import export））

笔者开始学习 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.netconsole.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.netconsole.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//创建类的一个对象personlet 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 //创建类的一个对象personlet 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  
  
  
  
  
 ，他们的用法上面的例子已经很详细的列出了 
  
  
  
  
  ，忘记的时候

 


 


 


 


 

，可以当作参考看看

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