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 框架小结 个人工作经验
Jun 13 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 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
php printf输出格式使用说明
2010/12/05 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
php 数组元素快速去重
2017/05/05 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
javascript学习网址备忘
2007/05/29 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
Python中删除文件的程序代码
2011/03/13 Python
python list语法学习(带例子)
2013/11/01 Python
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python爬取网页转换为PDF文件
2018/06/07 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
银行办理业务介绍信
2014/01/18 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
中学清明节活动总结
2014/07/04 职场文书
鲁迅故居导游词
2015/02/05 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
超市食品安全承诺书
2015/04/29 职场文书
高二数学教学反思
2016/02/18 职场文书
导游词之太原天龙山
2020/01/02 职场文书
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript