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. Java中创建线程的方式和线程中常用方法?

    Java中如何创建线程? 继承Thread类 实现Rnnable接口 实现Callable接口 通过线程池创建线程 线程中常用方法 线程等待:wait() 进入等待状态,只有等其他线程唤醒或中断才能运 ...

  2. [1] Multi-View Transformer for 3D Visual Grounding 论文精读

    参考: https://zhuanlan.zhihu.com/p/467913475 3D Visual Grounding小白调研笔记 https://zhuanlan.zhihu.com/p/34 ...

  3. WPF检测设备变化

    如果在构造函数中设置会出现为空 HwndSource source = PresentationSource.FromVisual(this) as HwndSource; 此时 source = n ...

  4. gitlab 配置汉化版

    转载 https://blog.csdn.net/qq_44895681/article/details/123277087

  5. MySQL 学习(四)并集查询

    联合查询,它是用 union 关键字把多条 select 语句的查询结果合并为一个结果集.纵向合并的前提是被合并的结果集的字段数量.顺序和数据类型必须完全一致.字段名不一样的情况下,会将第一个结果集的 ...

  6. C# 两个list集合合并成一个,及升序降序

    C# List集合合并   在开发过程中.数组和集合的处理是最让我们担心.一般会用for or foreach 来处理一些操作.这里介绍一些常用的集合跟数组的操作函数.  首先举例2个集合A,B. L ...

  7. unity 2D 物体跟随鼠标旋转 移动

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class FollowMo ...

  8. noi 2.1基本算法之枚举

    7647:余数相同问题 1.描述 已知三个正整数 a,b,c. 现有一个大于1的整数x,将其作为除数分别除a,b,c,得到的余数相同. 请问满足上述条件的x的最小值是多少? 数据保证x有解. 2.输入 ...

  9. ERROR 1862 (HY000): Your password has expired. To log in you must change it using a .....

    navcat 登录本地失败 https://blog.csdn.net/fenniang16/article/details/81216602?spm=1001.2101.3001.6661.1&am ...

  10. 从零搭建hadoop集群之安装jdk

    卸载系统自带的OpenJDK以及相关的java文件 1. 查询系统自带的OpenJDK版本信息 [root@hadoop01 ~]# java -version #查询系统自带的OpenJDK版本信息 ...