前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >模块化开发---es6的导入和导出

模块化开发---es6的导入和导出

作者头像
名字是乱打的
发布2021-12-22 15:39:18
8490
发布2021-12-22 15:39:18
举报
文章被收录于专栏:软件工程软件工程
温习一下CommonJs的导入和导出

一 es6导入和导出是干啥的,解决什么问题?

ES6关于导入和导出,其自带了模块化,我们可以直接作用import和export在浏览器中导入和导出各个模块了, 导入导出的功能是模块化,使你的js功能独立,另外我们通过不定向导出和定向导入,使各个js不再必须使用闭包的方式封装代码,而是引入了类似于对象的概念的感觉使内容具有唯一性,当然也利于代码解耦,提高代码的复用性.

二 es6导入和导出的使用有什么注意事项

es6的支持是基于浏览器的,因此我们在向使用模块化的时候,在html里面引入js时候我们要加入属性type="module"

代码语言:javascript
复制
<script src="test.js" type="module"></script>

三 es6如何使用?

3.1 es6如何导出

1,导出方式一 : 先定义后导出

代码语言:javascript
复制
let flag=true
function sum(a,b){
    return a+b;
}
export{
flag,sum
}

2,导出方式二: 直接导出

代码语言:javascript
复制
export var numl = 1000;
export var height = 1.88

3,导出函数

代码语言:javascript
复制
export function mul(numl,num2){
return num1*num2
}

4,到处类

代码语言:javascript
复制
export class Person{
run(){
console.log('在奔跑');
}
}

5, export default 某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以自己来命名,name我们就可以使用

注意一个js里只可以有一个export default
代码语言:javascript
复制
//const address ='北京市.
//export default address
export default function(argument){
console.log(argument);
}
3.2 es6如何导入

所有导入的变量和方法,我们都可以当做自己的东西直接使用. 1.1,导入定义的变量和方法

代码语言:javascript
复制
import{flag,sum} from "./aaa.js";
if(flag){
console.log('小明是天才,哈哈哈');
console.log(sum(20,30));
}

2,直接导入export定义的变量

代码语言:javascript
复制
import{numl,height }  from "./aaa.js";
console.log(num1);
console.log(height);

3.导入export的function/class 无需再加{},因为导入的只有一个

代码语言:javascript
复制
import{mul,Person} from "./aaa.js";
console.log(mul(30,50));
const p = new Person();
p.run();

4,导入export default中的内容

代码语言:javascript
复制
import addr from"./aaa.js";
addr('你好啊');

5,统一全部导入

代码语言:javascript
复制
///import{flag,num,numl,height,Person,mul,sum}from "./aaa.js";//太麻烦
import * as aaa from "../aaa.js";
console.log(aaa.flag);
console.log(aaa.height);

有的时候我们想引入的组件内的变量/方法名字和其他组件或者自己本组件的变量/方法名字重复了,比如下面这个例子

代码语言:javascript
复制
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import { Panel,Swiper } from 'vux

这个时候我们可以用别名进行区分,eg: import { Panel,Swiper as NSwiper } from 'vux'

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/11/16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 温习一下CommonJs的导入和导出
  • 一 es6导入和导出是干啥的,解决什么问题?
  • 二 es6导入和导出的使用有什么注意事项
  • 三 es6如何使用?
    • 3.1 es6如何导出
      • 注意一个js里只可以有一个export default
    • 3.2 es6如何导入
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档