ES6模块化的import和export用法方法总结


Posted in Javascript onAugust 08, 2017

ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。

ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。

ES6模块主要有两个功能:export和import

export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。如下图(假设a和b文件在同一目录下)

// a.js

var sex="boy";
var echo=function(value){
console.log(value)
}
export {sex,echo} 
//通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式,如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值,因为没有对外输出变量接口,只是输出的字符串。
// b.js
通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js" 
console.log(sex)  // boy
echo(sex) // boy

a.js文件也可以按如下export语法写,但不如上边直观,不太推荐。

// a.js
export var sex="boy";
export var echo=function(value){
console.log(value)
}

//因为function echo(){}等价于 var echo=function(){}所以也可以写成
export function echo(value){

 console.log(value)
}

以上是export与module的基本用法,再进行拓展学习

前面的例子可以看出,b.js使用import命令的时候,用户需要知道a.js所暴露出的变量标识符,否则无法加载。可以使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。

//a.js
var sex="boy";
export default sex(sex不能加大括号)
//原本直接export sex外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default。
// b.js
本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12)  // boy,boy

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 #Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 #Javascript
vue-quill-editor实现图片上传功能
Aug 08 #Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 #Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 #Javascript
基于Vue实现支持按周切换的日历
Sep 24 #Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 #Javascript
You might like
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
js 数组操作代码集锦
2009/04/28 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
Python设计模式之命令模式简单示例
2018/01/10 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
餐饮加盟计划书
2014/01/10 职场文书
生日邀请函范文
2014/01/13 职场文书
六一节目主持词
2014/04/01 职场文书
软件项目实施计划书
2014/05/02 职场文书
新店开张活动方案
2014/08/24 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
信用卡工资证明范本
2015/06/19 职场文书
Elasticsearch 数据类型及管理
2022/04/19 Python