JS ES6中import和export的几种用法

最新推荐文章于 2024-04-26 23:50:13 发布

_Giga Pudding

最新推荐文章于 2024-04-26 23:50:13 发布

阅读量915

点赞数 2

文章标签： javascript es6 js

本文链接：https://blog.csdn.net/qq_48905575/article/details/120657925

版权

简要介绍

JS ES6中的模块化（export和import）基于common.js和AMD规范的。
如果希望获取某个变量，必须通过export输出。import是来加载这个exprot对应模块，import后的from 可以指定需要导入模块的路径名.

使用方法

使用方法：这里我用的是phpStudy的，基于PHP环境。（phpStudy是一个PHP调试环境的程序集成包）首先将自己创建的文件夹（exportandimport）放入phpStudy中的文件WWW文件夹中，启动服务器 http://localhost/exportandimport

export导入：

// 第一种情况：
export let a = '博客';

//第二种情况
var a ='博客'; var b = 'bo'; var c= 'ke';
export{a,b,c}

//第三种情况函数的导出
export function add (a,b) {
	return a*b;
}

//第四种情况as用法
var a ='博客'; var b = 'bo'; var c= 'ke';
export {
	a as x,
	b as y,
	c as z
}

//第五种情况联合导出1
export var a ='博客'
export function add (a,b) {
 	return a*b;
 }

//第五种情况联合导出2
var a ='博客'
function add (a,b) {
 	return a*b;
 }
export {a,add}

//第六中情况导出默认的值（default）
var a = '博客';
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: "设置"
			},
		]
	}
}

//第七种情况类的导入 1
export class Person{
	run(){
		console.log("奔跑");
	}
}

//第七种情况类的导入用export default 2
class Person{
	run(){
		console.log("奔跑");
	}
}
export default Person


//第八中全部导入
let name = 'zhangsan'
var flag = true
export{
	name,flag
}

import导出：

<!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); //bo
			console.log(c); //ke
			
			//第三种情况函数的导入
			import {add} from './index.js'
			console.log(add(2,3)) //6
			
			//第四种情况不暴露js中的变量名
			import {x,y,z} from './index.js'
			console.log(x); //博客
			console.log(y); //bo
			console.log(z); //ke
			
			//第五种情况联合导入
			import {a,add} from './index.js'
			console.log(a)//博客
			console.log(add(2,3)) //6
			
			//第六中情况导入默认的值（default）a
			import a from './index.js'
			console.log(a); //博客
			
			//第六中情况 导入默认的值重新取一个名字 b
			import b from './index.js'
			console.log(b);  博客
			
			// 第六中情况复杂结构
			import a from './index.js'
			console.log(a.logo); //UNI-ADMIN
			
			
			//第七种情况类的导出1
			import {Person} from './index.js'
			var p = new Person()
			p.run()//奔跑
			
			//第七种情况类的导出2
			import Person from './index.js'
			var p = new Person()
			p.run()//奔跑
			
			// 第八种情况全部导出
			import * as a from './index.js'
			console.log(a.name); // zhangsan
			console.log(a.flag); // true
		</script>
	</body>
</html>

_Giga Pudding

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS ES6中import和export的几种用法

JS ES6中import和export的几种用法简要介绍使用方法简要介绍JS ES6中的模块化（export和import）基于common.js和AMD规范的。如果希望获取某个变量，必须通过export输出。import是来加载这个exprot对应模块，import后的from 可以指定需要导入模块的路径名.使用方法使用方法：这里我用的是phpStudy的，基于PHP环境。（phpStudy是一个PHP调试环境的程序集成包）首先将自己创建的文件夹（exportandimport）放入phpSt
复制链接

扫一扫