先做个前提,新建三个模块JS文件m1,m2,m3,其中m1.js 为分别暴露,m2.js 为统一暴露,m3.js 为默认暴露。接下来进行文件的import引入

1.通用的引入方式,这种方式适合任何暴露方式的引入
1         import * as m1 from './modulesJs/m1.js'
2 import * as m2 from './modulesJs/m2.js'
3 import * as m3 from './modulesJs/m3.js'

只不过调用的时候,默认暴露的m3.js对应引入的m3在调用属性方法的时候多一个default节点。假如调用m3中的say()方法,需要这样去调用 m3.default.say()

2.解构赋值的方式进行引入
 1         // 分别暴露和统一暴露的引入方式没有差异:
2 import {team,play} from './modulesJs/m1.js'
3 play() // this is a team of LPL
4 import { name, dis as d } from './modulesJs/m2.js'
5 d() // we are the champion
6
7 // 默认暴露的解构赋值引入有一定差异,如下
8 import { default as m3 } from './modulesJs/m3.js' // 此处的default 不能够单独使用,需要取别名
9 // 这样引入的方式在调用的时候就没有多default节点了,可以直接进行对象属性的调用
10 m3.say() // it is a good team
3.简便形式 只针对默认暴露
  1 import m3 from './modulesJs/m3.js'
 2 m3.say() // 同样也可以直接进行调用 输出结果:it is a good team 

ES6的模块化(import引入)的更多相关文章

  1. 模块化开发 | es6模块暴露与引入

    CommonJS模块开发 CommonJS定义 每个文件就一个模块,有自己的作用域.在一个文件里面定义的变量.函数.类,都是私有的,对其他文件不可见. 私有作用域不会污染全局作用域. 模块可加载多次, ...

  2. es6的模块化编程

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

  3. ES6学习笔记(二)—— 通过ES6 Module看import和require区别

    前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...

  4. 通过ES6 Module看import和require区别

    前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...

  5. main.js中import引入css与引入js的区别

    表现:引入css样式文件能够作用到全局,而引入js文件就只能在main.js中产生作用 在 main.js 中引入的 css 都是全局生效的.引入的 js 文件只在 main.js 中生效,是因为 m ...

  6. ES6 模块export import

    在 ES6 前, 实现模块化使用的是 RequireJS 或者 seaJS(分别是基于 AMD 规范的模块化库, 和基于 CMD 规范的模块化库).ES6 引入了模块化,其设计思想是在编译时就能确定模 ...

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

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

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

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

  9. ES6的模块化

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

  10. 没有用到React,为什么我需要import引入React?

    没有用到React,为什么我需要import引入React? 本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖. 所以 ...

随机推荐

  1. 初学银河麒麟linux笔记 第四章 windows中开发的QT程序适配linux的修改——error: ‘QT_WARNING_DISABLE_DEPRECATED’ does not name a type

    QT程序本身在windows中进行开发的,移植到linux系统上进行编译后发现了不少问题,需要一一进行修改 1.系统时间修改 首先是系统时间问题 SYSTEMTIME current_date_tim ...

  2. .net core layui折叠表格的应用。

    效果展示 头部的折叠,展开,搜索按钮 <div class="layui-fluid"> <div style="margin-top: 20px;&q ...

  3. 【GENERAL FRAMEWORK】总框架——持续更新

    引: 鉴于目前挖的坑较多,未防止某些即将长期更新的博文出现烂尾,特设此框架 1.蓝桥杯(完结)         1.[蓝桥杯单片机组]LED.蜂鸣器与继电器--138-573的外设操作         ...

  4. 【解决】Mac无法通过smb连接到windows的共享文件夹

    通过Mac访问windows的共享文件夹也有很多博文都写了,这里不再提. 先按照网上教程,在Windows下允许远程,然后设置文件夹共享出来,再在Mac上通过smb登录,输入用户名和密码窗口总是抖动, ...

  5. nginx status code 状态码

    目录 1XX 临时响应并需要请求者继续执行操作的状态代码 2XX 成功功处理了请求的状态代码 3XX 重定向 要完成请求,需要进一步操作 通常用来重定向 4XX 表示请求可能出错,妨碍了服务器的处理 ...

  6. oralce sql 缓存查询及删除

    --缓存查询语句 V$SQLAREA 视图记录sql 执行情况(加载次数/用时/Id....) 常用字段 ADDRESS:SQL语句在SGA中的地址. 这两列被用于鉴别SQL语句,有时,两条不同的语句 ...

  7. Vue 事件监听

    事件监听 v-on 使用v-on进行事件绑定监听,回调函数写在methods中.可以使用@的这种简写形式来代替v-on,当事件源无参数传递时,可省略括号. 语法如下所示: <button @:事 ...

  8. 怎么才能卸载inventor?完全彻底卸载删除干净inventor各种残留注册表和文件的方法和步骤

    怎么才能卸载inventor?完全彻底卸载删除干净inventor各种残留注册表和文件的方法和步骤.如何卸载inventor呢?有很多同学想把inventor卸载后重新安装,但是发现inventor安 ...

  9. NSQ(7)-nsq存在的问题

    nsq存在的缺陷 部署的难度 ​ nsq提供了一种消费者端进行服务发现的模型,所以无需告诉消费者去哪寻找对于的主题(Topic)在哪个nsqd实例上. ​ 然而,它并没有提供一种方案去解决一个生产者应 ...

  10. 123data路径

    /zhf/Innosky2021/data/dayantahttp://123.xx.xx.147:8888/cesiumdemo/data/dayanta/tileset.json