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 相关文章推荐
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
javscript 数组扁平化的实现
Feb 03 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
加速XP搜索功能堪比vista
2007/03/22 PHP
php session和cookie使用说明
2010/04/07 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
python字典序问题实例
2014/09/26 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
django解决跨域请求的问题详解
2019/01/20 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
《晏子使楚》教学反思
2014/02/08 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
教师评语大全
2014/04/28 职场文书
村党支部换届选举方案
2014/05/02 职场文书
写给医院的感谢信
2015/01/22 职场文书
会计出纳岗位职责
2015/03/31 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
导游词之襄阳古城
2019/09/27 职场文书