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导出)的更多相关文章

  1. ES6之模块化导入导出

    1.概述 在js的历史上一直没有模块(module)体系,无法将一个大程序拆分成相互依赖的小文件,再用简单的方法拼装起来,这对开发大型的.复杂的项目形成了巨大障碍. 在 ES6 之前,社区制定了一些模 ...

  2. [译]使用6to5,让今天就来写ES6的模块化开发!

    http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...

  3. 使用6to5,让今天就来写ES6的模块化开发!

    http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...

  4. ES6的模块化

    在之前的 javascript 中一直是没有模块系统的,前辈们为了解决这些问题,提出了各种规范, 最主要的有CommonJS和AMD两种.前者用于服务器,后者用于浏览器.而 ES6 中提供了简单的模块 ...

  5. es6的模块化编程

    es6的模块化编程 基本用法 es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能. 一个模块就是一个独 ...

  6. 深入浅出ES6教程模块化

    大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了Promise的用法,下面我们一起来继续学习模块化: JavaScript本身是不支持模块化的,只不过后来一些社区的大佬制定了 ...

  7. 探讨ES6的import export default 和CommonJS的require module.exports

    今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得. 在ES6之前 模块的概念是在ES6发布之前就出 ...

  8. ES6(Module模块化)

    模块化 ES6的模块化的基本规则或特点: 1:每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取. 一个模块就是一个单例,或者说就是一个对象: 2:每一个 ...

  9. ES6之模块化

    本文介绍ES6实现模块化的方法:使用import和export. 导入的时候需不需要加大括号的判断:1.当用export default people导出时,就用 import people 导入(不 ...

  10. 面试 11-01.ES6:模块化的使用和编译环境

    11-01.ES6:模块化的使用和编译环境 #前言 #ES6的主要内容 模块化的使用和编译环境 Class与JS构造函数的区别 Promise的用法 ES6其他常用功能 本文来讲"模块化的使 ...

随机推荐

  1. VIM、VI编辑中一个Tab设置为4个空格

    配置方式 配置方式主要两种: 当前用户目录下创建或修改~/.vimrc Root用户下修改/etc/virc 和 /etc/vimrc 在文件末尾添加如下内容: set ts=4 set softta ...

  2. HANDLE和HMOUDLE、HWND讲解

    HWND是线程相关的,通常指明窗口句柄,通过句柄找到窗口所属进程和线程 Handle 是代表系统的内核对象,如文件句柄,线程句柄,进程句柄.系统对内核对象以链表的形式进行管理,载入到内存中的每一个内核 ...

  3. Java笔记_this关键字

    this关键字 引出this的使用场景: 案例一(通过案例一来引出this的使用场景): /** * @ClassName This02 * @Description TODO * @Author O ...

  4. qt creator 常量中有换行符(转)

    这篇文章写于QT5.6的诞生,它是QT5的第一个长期支持版.这也是QT5已成熟的里程碑. 我搭建的环境是:Win10+VS2015+QT5.6+QtCreator 在安装VS2015的时候,若是用Qt ...

  5. Git Commit Rule

    ## git commit tagfeat: 新功能fix: 修复问题docs: 修改文档style: 修改代码格式,不影响代码逻辑refactor: 重构代码,理论上不影响现有功能perf: 提升性 ...

  6. linux下安装jdk8,nginx

    jdk8(官网下载的是jdk-8u231-linux-x64.tar.gz) 1.在/usr/local这路径下建一个jdk的文件夹,将下载好的jdk-8u231-linux-x64.tar.gz上传 ...

  7. Netty实战学习笔记

    第一部分 Netty的概念及体系结构 1.Netty异步和事件驱动 2.你的第一款Netty应用程序 3.Netty的组件和设计 4.传输 5.ByteBuf 6.ChannelHandler和Cha ...

  8. NSA对下一代新技术的评估“网络透视”2010

    时间线回到2010年,那时候做渗透测试流行找目标还是通过Google hack,Google dork去寻找目标比如inurl:asp?id= 寻找asp网站可利用的注入点,在厉害点一键爬取域名在配合 ...

  9. vue3.0 dialog无法弹出的问题

    最近用elementui做了点东西,一直感觉挺好的,但是嫖的别人的框架是vue3.0,这次的dialog就弹不出来了. 经过多方查证,发现vue3.0的element为了适配移动端升级为element ...

  10. vuex中的state、mutations 、actions 、getters四大属性如何使用

    一.state (提供唯一的公共数据源) 方式1 在div中,$store.state.count 方式2 import {mapState} from 'vuex' computed:{ -mapS ...