ES6的模块化(export导出)
ES6 Module把一个文件当作一个模块,每个模块有自己的独立作用域,那如何把每个模块联系起来呢?核心点就是模块的导入(import)与导出(export)。
模块化的好处:
- 防止命名冲突
- 代码复用
- 高维护性
暴露也就是导出(export)有三种方式:1.分别暴露 2.统一暴露 3.默认暴露
分别暴露:在需要暴露的变量或者方法前面加上export关键字,我们新建一个m1.js文件写上如下代码
1 //分别暴露
2 export let team='RNG'
3
4 export function play(){
5 console.log('this is a team of LPL')
6 }
7
8 function own(){
9 console.log('不想被暴露');
10 }
这个时候再在页面上对这个文件进行引入,同样新建一个页面 main.html,通过import关键字进行引入
1 <script type="module">
2 // 引入模块化js
3 import * as m1 from './modulesJs/m1.js'
4 // 调用暴露的方法
5 m1.play(); // thi is a team of LPL
6 // m1.own() // 由于未暴露own方法这个地方就会报错 m1.own is not a function
7 console.log(m1)
8 </script>
同理书写统一暴露m2.js代码如下:
1 // 统一暴露
2 let name = 'IG'
3 function discription() {
4 console.log('we are the champion');
5 }
6
7 //以对象的形式进行暴露
8 export {
9 name,
10 // 并且可以通过as取一个别名
11 discription as dis
12 }
引入m2.js的方法不变
1 <script type='module'>
2 import * as m2 from './modulesJs/m2.js'
3 m2.dis() // we are the champion
4 console.log(m2.name) // IG
5 </script>
最后默认暴露(暴露一个default对象)
1 // 默认暴露
2 export default {
3 name: 'EDG',
4 say() {
5 console.log('it is a good team');
6 }
7 }
1 <script type='module'>
2 import * as m3 from './modulesJs/m3.js'
3 // 默认暴露的模块JS在调用的时候多了一个default节点
4 m3.default.say() // it is a good team
5 console.log(m3.default.name) // EDG
6 </script>
ES6的模块化(export导出)的更多相关文章
- ES6之模块化导入导出
1.概述 在js的历史上一直没有模块(module)体系,无法将一个大程序拆分成相互依赖的小文件,再用简单的方法拼装起来,这对开发大型的.复杂的项目形成了巨大障碍. 在 ES6 之前,社区制定了一些模 ...
- [译]使用6to5,让今天就来写ES6的模块化开发!
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...
- 使用6to5,让今天就来写ES6的模块化开发!
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...
- ES6的模块化
在之前的 javascript 中一直是没有模块系统的,前辈们为了解决这些问题,提出了各种规范, 最主要的有CommonJS和AMD两种.前者用于服务器,后者用于浏览器.而 ES6 中提供了简单的模块 ...
- es6的模块化编程
es6的模块化编程 基本用法 es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能. 一个模块就是一个独 ...
- 深入浅出ES6教程模块化
大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了Promise的用法,下面我们一起来继续学习模块化: JavaScript本身是不支持模块化的,只不过后来一些社区的大佬制定了 ...
- 探讨ES6的import export default 和CommonJS的require module.exports
今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得. 在ES6之前 模块的概念是在ES6发布之前就出 ...
- ES6(Module模块化)
模块化 ES6的模块化的基本规则或特点: 1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取. 一个模块就是一个单例,或者说就是一个对象: 2:每一个 ...
- ES6之模块化
本文介绍ES6实现模块化的方法:使用import和export. 导入的时候需不需要加大括号的判断:1.当用export default people导出时,就用 import people 导入(不 ...
- 面试 11-01.ES6:模块化的使用和编译环境
11-01.ES6:模块化的使用和编译环境 #前言 #ES6的主要内容 模块化的使用和编译环境 Class与JS构造函数的区别 Promise的用法 ES6其他常用功能 本文来讲"模块化的使 ...
随机推荐
- VIM、VI编辑中一个Tab设置为4个空格
配置方式 配置方式主要两种: 当前用户目录下创建或修改~/.vimrc Root用户下修改/etc/virc 和 /etc/vimrc 在文件末尾添加如下内容: set ts=4 set softta ...
- HANDLE和HMOUDLE、HWND讲解
HWND是线程相关的,通常指明窗口句柄,通过句柄找到窗口所属进程和线程 Handle 是代表系统的内核对象,如文件句柄,线程句柄,进程句柄.系统对内核对象以链表的形式进行管理,载入到内存中的每一个内核 ...
- Java笔记_this关键字
this关键字 引出this的使用场景: 案例一(通过案例一来引出this的使用场景): /** * @ClassName This02 * @Description TODO * @Author O ...
- qt creator 常量中有换行符(转)
这篇文章写于QT5.6的诞生,它是QT5的第一个长期支持版.这也是QT5已成熟的里程碑. 我搭建的环境是:Win10+VS2015+QT5.6+QtCreator 在安装VS2015的时候,若是用Qt ...
- Git Commit Rule
## git commit tagfeat: 新功能fix: 修复问题docs: 修改文档style: 修改代码格式,不影响代码逻辑refactor: 重构代码,理论上不影响现有功能perf: 提升性 ...
- linux下安装jdk8,nginx
jdk8(官网下载的是jdk-8u231-linux-x64.tar.gz) 1.在/usr/local这路径下建一个jdk的文件夹,将下载好的jdk-8u231-linux-x64.tar.gz上传 ...
- Netty实战学习笔记
第一部分 Netty的概念及体系结构 1.Netty异步和事件驱动 2.你的第一款Netty应用程序 3.Netty的组件和设计 4.传输 5.ByteBuf 6.ChannelHandler和Cha ...
- NSA对下一代新技术的评估“网络透视”2010
时间线回到2010年,那时候做渗透测试流行找目标还是通过Google hack,Google dork去寻找目标比如inurl:asp?id= 寻找asp网站可利用的注入点,在厉害点一键爬取域名在配合 ...
- vue3.0 dialog无法弹出的问题
最近用elementui做了点东西,一直感觉挺好的,但是嫖的别人的框架是vue3.0,这次的dialog就弹不出来了. 经过多方查证,发现vue3.0的element为了适配移动端升级为element ...
- vuex中的state、mutations 、actions 、getters四大属性如何使用
一.state (提供唯一的公共数据源) 方式1 在div中,$store.state.count 方式2 import {mapState} from 'vuex' computed:{ -mapS ...