ES6模块功能:export和import的加载方式

时间: 2017-11-06阅读: 1047标签: 模块

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


 参考:http://es6.ruanyifeng.com/#docs/module

吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

链接: http://www.fly63.com/article/detial/54

何为 CommonJS?为何封装模块?

CommonJS 是一个有志于构建 JavaScript 生态圈的组织。它有一个 邮件列表,有很多开发者参与其中。 整个社区致力于提高 JavaScript 程序的可移植性和可交换性,无论是在服务端还是浏览器端。

http模块和fs模块

response.write()发送一块相应主体,用来给客户端发送相应数据。write可以使用多次,但是最后一定要使用end来结束响应,否则客户端会一直等待。response.end()此方法向服务器发出信号

前端命令模块及其执行方法

1、将命令模块通过npm link进行全局注册后,即可在命令行窗口直接使用该命令 2、在其它模块中的package.json中引用命令模块,并增加scripts;增加对命令模块的依赖后,执行npm install后

ECMAScript 6 模块封装代码

JavaScript 用“共享一切”的方法加载代码,这是该语言中最容易出错且最容易让人感到困惑的地方。其他语言使用诸如包这样的概念来定义代码作用域,但在 ECMAScript 6 以前,在应用程序的每一个 JavaScript 中定义的一切都共享一个全局作用域

es6中的模块化

在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容,就必须使用export来对其进行暴露(输出)。先来看个例子,来对一个变量进行模块化

node中的内置模块fs

fs 模块=>包括文件目录的创建、删除、查询以及文件的读取、写入等;在 fs 模块中,所有的方法都分为同步和异步两种实现,具有 sync 后缀的方法为同步方法

node路径之path模块

node当在没在当前js文件下执行该js文件时,该js文件引用的路径会是相对于node命令的路径。显然会造成引用路径不对。因此;无论终端目录是在哪个磁盘下,node执行js文件时,里面的引用的路径都能只指向正确的

Nodejs核心模块简介

学习nodejs必须要掌握其核心,就像学JavaScript必须掌握函数、对象、数据类型、BOM、DOM等。nodejs核心也不少,这里介绍几个核心:Events模块、fs模块、stream的使用、http模块。

Node.js使用Kafka-node模块实现生产者与消费者

基于Node.js,采用Kafka-node模块实现生产者与消费者,我正在做一个的项目,我在自己的服务器上有一个Kafka生产者,并使用Kafka-Node作为我的应用程序的消费者。

CommonJS的模块加载

Common这个英文单词的意思,相信大家都认识,我记得有一个词组common knowledge是常识的意思,那么CommonJS是不是也是类似于常识性的,大家都理解的意思呢?很明显不是,这个常识一点都不常识

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全