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中的new的使用方法与注意事项
May 16 Javascript
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
浅谈node中的cluster集群
Jun 02 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
中国的第一台收音机
2021/03/01 无线电
PHP开发框架总结收藏
2008/04/24 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php简单实现快速排序的方法
2015/04/04 PHP
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
python构建深度神经网络(续)
2018/03/10 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
django主动抛出403异常的方法详解
2019/01/04 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
python绘制汉诺塔
2021/03/01 Python
迪拜航空官方网站:flydubai
2017/04/20 全球购物
办公室文秘自我鉴定
2013/09/21 职场文书
50岁生日感言
2014/01/23 职场文书
运动会开幕式解说词
2014/02/05 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
法人授权委托书范本
2014/09/17 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
城管年度个人总结
2015/02/28 职场文书
中学生运动会广播稿
2015/08/19 职场文书
会计入职心得体会
2016/01/22 职场文书
Win10 Anaconda安装python-pcl
2022/04/29 Servers
Vue深入理解插槽slot的使用
2022/08/05 Vue.js