ES6——import和export的用法（8种）

最新推荐文章于 2024-05-10 20:49:07 发布

Southern Wind

最新推荐文章于 2024-05-10 20:49:07 发布

阅读量3k

点赞数

分类专栏： ES6 文章标签： html css ES6

原文链接：https://blog.csdn.net/qq_34093387/article/details/120648927?spm=1001.2014.3001.5501

版权

ES6 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

转载链接

import和export的方法是基于服务器端环境方可使用可以启动服务器

下面是安装以及使用步骤：

1、安装php应用程序

安装包可自行从外面下载

2、提前安装了phpstudy 安装好之后会有一个www文件夹

3、把内容放入该文件夹中我的文件夹叫exportandimport

4、里面有一个index.js 和一个index.html

把下方的源代码粘贴到对应的文件中即可

使用方法：

输入网址： http://localhost/exportandimport即可打开

打开控制台查看是否成功：

下面是index.html 和 index.js 的八种用法

index.html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="module">
			import {a} from './index.js'
			console.log(a)
			
		/*第二种情况: import {a,b,c} from './index.js'
			console.log(a)
			console.log(b)
			console.log(c) */
			
		/*第三种情况函数的导入:  import {add} from './index.js'	
		console.log(add(1,2)) */
		
		/*第四种不想暴露js中的变量名: import {x,y,z} from './index.js'	
		console.log(x)
		console.log(y)
		console.log(z) */
		
		/*第五种联合导出1: import {a,add} from './index.js'	
		console.log(a)
		console.log(add(1,2)) */
		
		/* 第五种联合导出2: import {a,add} from './index.js'
		console.log(a)
		console.log(add(1,2)) */
		
		/*第六种情况 export default : import a from './index.js'
		console.log(a)
		a可以使用别名b或者其他别名
		import b from './index.js'
		console.log(b) */
		
		/* 第六种情况 export default复杂结构:import a from './index.js'
		console.log(a.logo); */
		
		/* 第七种方法：import {Person} from './index.js'
		var p = new Person()
		p.run() 
		
		
		 import Person from './index.js'
		 var p = new Person()
		 p.run()*/
		
		/*第八种方法： import * as aaa from './index.js'
		console.log(aaa.flag)
		console.log(aaa.name) */
		</script>
		
	</body>
</html>

index.js部分

// 第一种情况 
export let a = 'Lee';
 
/*第二种情况 var a ='Lee';var b ='李';var c = 'web';
export {a,b,c} */
 
/*第三种情况函数的导出 export function add(a,b){
    return a+b;
} */
 
/* 第四种不想暴露js中的变量名 var a ='Lee';var b ='李';var c = 'web';
 export {
	 a as x,
	 b as y,
	 c as z
 } */
 
 
/*第五种联合导出1 export var a ='Lee';
export function add(a,b){
    return a+b;
} */
/*第五种联合导出2  var a ='Lee';
function add(a,b){
    return a+b;
} 
export {a,add} */
 
/* 第六种情况 export default :
var a = 'Lee';
export default a; */
 
/*第六种情况复杂结构 export default {
	logo: 'UNI-ADMIN',
	navBar: {
		active: '0',
		list: [{
				name: "首页",
				subActive: '0',
				submenu: [{
						icon: "el-icon-s-home",
						name: "后台首页",
						pathname:"index"
					},
					{
						icon: "el-icon-picture",
						name: "相册管理",
						pathname:"image"
					},
					{
						icon: "el-icon-s-claim",
						name: "商品列表",
						pathname:"shop_goods_list"
					}
				]
			},
			{
				name: "商品",
				subActive: '0',
				submenu: [{
					icon: "el-icon-s-claim",
					name: "商品列表",
					pathname:"shop_goods_list"
				}]
			},
			{
				name: "订单"
			},
			{
				name: "会员"
			},
			{
				name: "设置"
			},
		]
	}
} */
 
 
/*第七种方法： export class Person{
  run(){
    console.log("奔跑");
  }
}
class Person{
  run(){
    console.log("奔跑");
  }
}
export default Person
 */
 
/* 第八种方法： let name = '小明'
var flag = true
export {
  flag,name
} */

Southern Wind

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ES6——import和export的用法（8种）

转载链接import和export的方法是基于服务器端环境方可使用可以启动服务器下面是安装以及使用步骤：1、安装php应用程序安装包可自行从外面下载2、提前安装了phpstudy 安装好之后会有一个www文件夹 3、把内容放入该文件夹中我的文件夹叫exportandimport 4、里面有一个index.js 和一个index.html 把下方的源代码粘贴到对应的文件中即可使用方法：输入网址：http://localhost/exportandi...
复制链接

扫一扫