首页 / ES6 / ES6新特性：使用export和import实现模块化详解

ES6新特性：使用export和import实现模块化详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ES6新特性：使用export和import实现模块化详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6976字，纯文字阅读大概需要10分钟。

内容图文

在ES6前，前端就使用RequireJS或者seaJS实现模块化， requireJS是基于AMD规范的模块化库，而像seaJS是基于CMD规范的模块化库，两者都是为了为了推广前端模块化的工具，更多有关AMD和CMD的区别，后面参考给了几个链接；

现在ES6自带了模块化，也是JS第一次支持module，在很久以后，我们可以直接作用import和export在浏览器中导入和导出各个模块了，一个js文件代表一个js模块；

现代浏览器对模块(module)支持程度不同，目前都是使用babelJS，或者Traceur把ES6代码转化为兼容ES5版本的js代码;

ES6的模块化的基本规则或特点：

ES6的模块化的基本规则或特点，欢迎补充：

1：每一个模块只加载一次，每一个JS只执行一次，如果下次再去加载同目录下同文件，直接从内存中读取。一个模块就是一个单例，或者说就是一个对象；

2：每一个模块内声明的变量都是局部变量，不会污染全局作用域；

3：模块内部的变量或者函数可以通过export导出；

4：一个模块可以导入别的模块

运行下面代码

//lib.js
//导出常量
export const sqrt = Math.sqrt;
//导出函数
export function square(x) {
  return x * x;
}
//导出函数
export function diag(x, y) {
  return sqrt(square(x) + square(y));
}

//main.js
import { square, diag } from './lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

ES6新特性：使用export和import实现模块化详解 - 文章图片

下面列出几种import和export的基本语法：

第一种导出的方式：

在lib.js文件中，使用 export{接口} 导出接口，大括号中的接口名字为上面定义的变量， import和export是对应的；

运行下面代码

//lib.js 文件
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
  console.log("fn0");
};
let fn1 = function() {
  console.log("fn1");
};
export{ bar , foo, fn0, fn1}

//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

ES6新特性：使用export和import实现模块化详解 - 文章图片

第二种导出的方式：

在export接口的时候，我们可以使用 XX as YY，把导出的接口名字改了，比如： closureFn as sayingFn，把这些接口名字改成不看文档就知道干什么的：

运行下面代码

//lib.js文件
let fn0 = function() {
  console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};

//main.js文件
import {foo, bar} from "./lib";
foo();
console.log(bar);

ES6新特性：使用export和import实现模块化详解 - 文章图片

第三种导出的方式：

这种方式是直接在export的地方定义导出的函数，或者变量：

运行下面代码

//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";

//main.js文件
import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);

ES6新特性：使用export和import实现模块化详解 - 文章图片

第四种导出的方式：

这种导出的方式不需要知道变量的名字，相当于是匿名的，直接把开发的接口给export；

如果一个js模块文件就只有一个功能，那么就可以使用export default导出；

运行下面代码

//lib.js
export default "string";

//main.js
import defaultString from "./lib";
console.log(defaultString);

ES6新特性：使用export和import实现模块化详解 - 文章图片

第五种导出方式：

export也能默认导出函数，在import的时候，名字随便写，因为每一个模块的默认接口就一个：

运行下面代码

//lib.js
let fn = () => "string";
export {fn as default};

//main.js
import defaultFn from "./lib";
console.log(defaultFn());

第六种导出方式：

使用通配符* ,重新导出其他模块的接口 (其实就是转载文章，然后不注明出处啦);

运行下面代码

//lib.js
export * from "./other";
//如果只想导出部分接口， 只要把接口名字列出来
//export {foo,fnFoo} from "./other";

//other.js
export let foo = "stringFoo", fnFoo = function() {console.log("fnFoo")};

//main.js
import {foo, fnFoo} from "./lib";
console.log(foo);
console.log(fnFoo());

ES6新特性：使用export和import实现模块化详解 - 文章图片

其他：ES6的import和export提供相当多导入以及导出的语法；

在import的时候可以使用通配符*导入外部的模块：

运行下面代码

import * as obj from "./lib";
console.log(obj);

ES6导入的模块都是属于引用：

每一个导入的js模块都是活的，每一次访问该模块的变量或者函数都是最新的，这个是原生ES6模块与AMD和CMD的区别之一,以下代码修改自http://exploringjs.com/es6/ch_modules.html#_imports-are-read-only-views-on-exports

运行下面代码

//lib.js
export let counter = 3;
export function incCounter() {
  counter++;
}
export function setCounter(value) {
  counter = value;
}


//main.js
import { counter, incCounter ,setCounter} from './lib';

// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4
setCounter(0);
console.log(counter); // 0

在main.js中， counter一直指向lib.js中的局部变量counter，按照JS的尿性，像数字或者字符串类型或者布尔值的原始值要被复制，而不是赋址；

循环依赖的问题：

NodeJS的循环依赖是这么处理的：打开；

循环依赖是JS模块化带来的问题，在浏览器端，使用RequireJS测试模块化，比如有一个文件file0.js依赖于file1.js，而file1.js又依赖于file0.js，那么file0.js和file1.js到底谁先执行？

运行下面代码

//index.html
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8"/>
</head>
<body>

<script data-main="cyclic" src="//cdn.bootcss.com/require.js/2.2.0/require.min.js"></script>
<script>
//cyclic.js
require(["file0"], function(file0) {
  console.log(file0)
})

//file0.js
define(["file1"], function(file1) {
  console.log(file1)
  return {
    file0 : "file0"
  }
})

//file1.js
define(["file0"], function(file0) {
  console.log(file0);
  return {
    file1 : "file1"
  }
})
</script>
</body>
</html>

在控制台的依次输出为：

运行下面代码

undefined
Object { file1: "file1" }
Object { file0: "file0" }

在执行file1.js的时候file0.js还没执行完，所以输出了undefined，这种输出结果和NodeJS输出的情况是一样的；

然后我又使用了司徒大神的mass-framework框架试了一下，司徒大神的框架直接提示我： "模块与之前的某些模块存在循环依赖"，这样还比较好点， requireJS对于循环依赖是直接执行循环依赖的模块，会导致在开发的时候给自己挖坑....；

接下来我又在babel-node下进行测试：下面是几个测试，可以无视：

我使用ES6的模块试一试，只要每一个模块被引用，无论模块是否执行完毕，该模块的export已经被导出了，如果导出的是函数：

运行下面代码

//cyclic.js
import fn0 from "./file0";
fn0();

//file0.js
import fn1 from "./file1";
fn1();
console.log("file0.js runs");
export default function() {console.log("file0 export runs")}

//file1.js
import fn0 from "./file0";
fn0();
console.log("file1.js runs");
export default function() {console.log("file1 export runs")}

ES6新特性：使用export和import实现模块化详解 - 文章图片

如果导出的是字符串：

运行下面代码

//cyclic.js
import str from "./file0";
console.log(str);

//file0.js
import str1 from "./file1";
console.log(str1)
console.log("file0.js runs");
export default "str0";

//file1.js
import str0 from "./file0";
console.log(str0)
console.log("file1.js runs");
export default "str1";

ES6新特性：使用export和import实现模块化详解 - 文章图片

如果导出的是对象：

那么第一行会先输出一个初始值{},在最后等待file0.js和file1.js执行完毕以后，才输出file0.js导出的对象；

如果是数组：

那么第一行会输出一个被静态分析过的初始值undefined,在最后等待file0.js和file1.js执行完毕以后，才输出file0.js导出的对象；

如果是布尔值：

那么第一行会输出一个被静态分析过的初始值undefined,在最后等待file0.js和file1.js执行完毕以后，才输出file0.js导出的布尔值；

为什么会这样呢？我好像在这边找到了答案：http://exploringjs.com/es6/ch_modules.html#_modules ，ES6的import和export被提前到js的最顶层，在函数或者对象，或者基本值被导出去的时候提前被静态分析过，参考：http://www.ecma-international.org/ecma-262/6.0/#sec-parsemodule , http://www.ecma-international.org/ecma-262/6.0/#sec-toplevelmoduleevaluationjob

结论：用ES6的export导出数据接口的时候，最好统一用函数，避免在循环依赖的时候，因为JS会把不同类型的对象静态解析成不同的初始值;

浏览器兼容：

chrome浏览器目前不支持import，和export；
火狐的支持也有限，比chrome好；
我都用babel；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的ES6新特性：使用export和import实现模块化详解全部内容，希望文章能够帮你解决ES6新特性：使用export和import实现模块化详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/341989.html

来源：【匿名】

【上一篇】详谈ES6中的迭代器(Iterator)和生成器(Generator)【下一篇】ES6系列之声明变量let与const

更多 ►

【ES6新特性：使用export和import实现模块化详解】教程文章相关的互联网学习教程文章

ES6新特性之模板字符串

ES6新特性概览 http://www.cnblogs.com/Wayou/p/es6_new_features.html深入浅出ES6（四）：模板字符串 http://www.infoq.com/cn/articles/es6-in-depth-template-string原文：http://www.cnblogs.com/alalashizi/p/6159033.html

ES6新特性使用小结（一）【代码】

一、let const 命令‘use strict‘; /*function test(){//let a = 1;for(let i=1;i<3;i++){console.log(i)}console.log(i); //引用错误let a = 1;let a= 2; //报错 let 不能重复定义同一个变量 } test(); */function last(){const PI = 3.1515926;//const 也具有块级作用域 const 声明变量时 *必须赋值// PI = 8; 报错 const声明的原始类型常量无法修改 PI is readOnly// console.log(PI);const K = {a:1};K....

ES6新特性【代码】【图】

字符串扩展ES6为字符串扩展了几个新的API：includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。 ES6中提供了`来作为字符串模板标记。我们可以这么玩：在两个`之间的部分都会被作为字符串的值，不管你任意换行，甚至加入js脚本键盘是的1的左侧，tab的上侧，esc的正下方解构表达式数组解构比如有一个...

ES6新特性：Javascript中Generator(生成器)【代码】【图】

ES6的很多特性都跟Generator扯上关系，而且实际用处比较广，包含了任何需要异步的模块，比如ajax， filesystem，或者数组对象遍历等都可以用到；　　Generator的使用：　　Generator函数和普通的函数区别有两个， 1：function和函数名之间有一个*号， 2：函数体内部使用了yield表达式；比如这样：function* gen() {yield"1";yield"2" } 　　这个玩意儿如果运行的话，会返回一个Iterator实例，然后再执行Iterator实例的next()方...

ES6常用新特性---笔记一

ES6的新特性1、定义函数不一定需要function2、创建类，constructor3、模块，JavaScript支持了原生的module,将不同的代码分别写在不同的文件，最后只需export公共接口部分，然后在使用的地方import即可4、let与const，var是全局定义，let作用域定义，const是无法更改值的变量5、箭头函数，操作符左边是为输入的参数，右边是操作或者返回值。6、字符串模板，可以添加${}存放变量7、解构，一个函数能返回多个值，目标函数直接返回一...

ES6新特性【代码】

1. 箭头函数（=>）ES6中引入了箭头函数来代替 function，即在定义方法的时候不用写 function ，=> 的左边为函数名和参数，右边为执行操作和返回值。1function(a){ 2return a + 1; 3 } //ES54 (a) => a + 1; //ES6箭头函数写法简洁，同时解决了JS中 this 作用域的问题。因为箭头函数内部没有定义 this 对象，所以函数内部的 this 完全继承外部。2. 变量声明（let、const）let 与 const 的作用基本与 var 相同，区别如下：var 作用...

ES6新特性：增加新类型：Symbol【代码】

本文所有Demo的运行环境都为nodeJS，参考：让nodeJS支持ES6的词法----babel的安装和使用；　　ES6新增了一种数据类型：Symbol，Symbol是用来定义对象的唯一属性名的不二之选；　　Symbol如何使用　　Symbol如何使用呢， Symbol不是一个构造函数哦，如果用new Symbol的话，会报错的：var sym1 = Symbol(); var sym2 = Symbol("foo"); var sym3 = Symbol("foo"); console.log(sym1, sym2, sym3) //输出Symbol() Symbol(foo) Symb...

ES6新特性使用小结（四）【代码】

十一、Proxy 、Reflect　　　①、Proxy 的概念和常用方法{ let obj = { //1、定义原始数据对象对用户不可见time: ‘2017-09-20‘,name: ‘net‘,_r: 123};let monitor = new Proxy(obj, { //2、通过Proxy新生成一个对象映射obj 代理所有对obj的操作//拦截对象的属性读取get(target, key){ //设置访问规则return target[key].replace(‘2017‘, ‘2018‘);},set(target, key,...

ES6新特性【代码】

#解构：从数组和对象中提取值，对变量进行赋值，这被称为解构1 数组解构 let [a,[b,c],d]=[1,[2,3],4]; 形式要统一按次序排列的let [a,b="JSPang"]=[‘技术胖‘]console.log(a+b); //控制台显示“技术胖JSPang”2 对象的解构赋值 let {foo,bar} = {foo:‘JSPang‘,bar:‘技术胖‘}; 对象的属性没有次序，变量必须与属性同名，才能取到正确的值。3 字符串解构 const [a,b,c,d,e,f]="JSPang";console.log(a);console.log(b);...

你必须了解的ES6新特性：let和const命令详解

这篇文章主要介绍了ES6新特性中的let和const命令,结合实例形式分析了let和const命令的功能、使用方法与相关注意事项,需要的朋友可以参考下本文实例讲述了ES6新特性中的let和const命令。分享给大家供大家参考，具体如下：1. let 命令① 在js中是没有块级作用域的，var 声明的变量作用域是整个函数体，而let可以起到这一作用{let a = 1;var b = 2; } console.log(b); // 2 console.log(a); // a is not defind② 而let可以起到这一作...

ES6新特性：JavaScript中内置的延迟对象Promise代码详细介绍

Promise的基本使用：利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题，更简洁地控制函数执行流程；通过new实例化Promise，构造函数需要两个参数，第一个参数为函数执行成功以后执行的函数resolve，第二个函数为函数执行失败以后执行的函数reject：new Promise(function(resolve , reject) { });通过Promise，我们把回调函数用线性的方式写出来，而不是一层套一层，这个函数有四层回调；fn("args", function(a) {...

详细介绍ES6新特性-JavaScript中的Map和WeakMap对象的代码实例

Map对象Map对象是一种有对应键/值对的对象， JS的Object也是键/值对的对象；ES6中Map相对于Object对象有几个区别：1：Object对象有原型，也就是说他有默认的key值在对象上面，除非我们使用Object.create(null)创建一个没有原型的对象；2：在Object对象中，只能把String和Symbol作为key值，但是在Map中，key值可以是任何基本类型(String, Number, Boolean, undefined, NaN….)，或者对象(Map, Set, Object, Function , Sym...

ES6新特性-JavaScript中Set和WeakSet类型的数据结构的代码详细介绍【图】

ES6提供了新的数据结构Set，Set对象不是数组，可以用来保存对象或者基本类型，所有保存的值都是唯一的, chrome浏览器>38和FF>13，以及nodeJS，对Set支持良好，以下的一些代码，都可以拷贝到控制台直接运行哦；创建Set实例的基本方法为:let set = new Set(); //或者 new Set(null); console.log(set);或者这样：let set = new Set([1,2,3,4,4,4,4,4]); console.log( Array.from(set) ); //输出：[ 1, 2, 3, 4 ]可以看到，以上重复...

ES6新特性：JavaScript中的Reflect对象代码详解【图】

Reflect介绍：Reflect这个对象在我的node(v4.4.3)中还没有实现, babel(6.7.7)也没有实现 ,新版本的chrome是支持的， ff比较早就支持Proxy和Reflect了，要让node支持Reflect可以安装harmony-reflect ;Reflect不是构造函数，要使用的时候直接通过Reflect.method()调用， Reflect有的方法和Proxy差不多，而且多数Reflect方法原生的Object已经重新实现了。什么要使用Reflect这里列举几个为什么要使用Reflect的原因，译文地址：Refle...

ES6中非常实用的新特性介绍_javascript技巧

ECMAScript 6离我们越来越近了，作为它最重要的方言，Javascript也即将迎来语法上的重大变革，InfoQ特开设“深入浅出ES6”专栏，来看一下ES6将给我们带来哪些新内容。写在前面 ES6 已经提交给 Ecma 大会审查了，也就是说，我们将迎来一大波 javascript 的最新标准，还有一些语法糖。ES6 中有很多值得我们关注的东西，下面是我发现的一些我们最常用的一些新特性，进行记录一下。 1. for-of循环这个东西用来循环数组很爽，原因呢，...

首页 / ES6 / ES6新特性：使用export和import实现模块化详解

ES6新特性：使用export和import实现模块化详解

内容导读

内容图文

内容总结

内容备注

内容手机端

【ES6新特性：使用export和import实现模块化详解】教程文章相关的互联网学习教程文章

IMPORT - 相关标签

ES6 - 相关标签

ES6 - 最新教程

ES6 - 最热教程