开发者社区> 佀无极> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

ES6 模块加载export 、import、export default 、import() 语法与区别,笔记总结

简介: ES6模块加载export 、import、export default 、import() 语法与区别在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。CommonJS 用于服务器,AMD 用于浏览器。
+关注继续查看

ES6模块加载export 、import、export default 、import() 语法与区别
在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。
CommonJS 用于服务器,AMD 用于浏览器。
ES6 在语言标准层面上,实现了模块功能,而且简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";。
严格模式主要有以下限制。
变量必须声明后再使用
函数的参数不能有同名属性,否则报错
不能使用with语句
不能对只读属性赋值,否则报错
不能使用前缀 0 表示八进制数,否则报错
不能删除不可删除的属性,否则报错
不能删除变量delete prop,会报错,只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字(比如protected、static和interface)
上面这些限制,模块都必须遵守。由于严格模式是 ES5 引入的,不属于 ES6,所以请参阅相关 ES5 书籍。

其中,尤其需要注意this的限制。ES6 模块之中,顶层的this指向undefined,即不应该在顶层代码使用this。

//index.js
//export 命令
            var a = 'a';
            var b = 'b';
            var c = 'c';
            //命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。用大括号
            export {
                a,b,c
            }
            export var d = 'd';
            export {d}
            export function f(){}
            export {f}
            //报错
            export 1;
            // 报错
            var m = 1;
            export m;
            // 报错
            function f() {}
            export f;
--------------------------------------------------------------------------------------------
            //export重命名语句 原命名 as 新命名
            export {
                a as m,
                b as n
            }
--------------------------------------------------------------------------------------------
            //export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
            //输出变量foo,值为bar,500 毫秒之后变成baz。
            //这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存,不存在动态更新
            export var foo = 'bar';
            setTimeout(() => foo = 'baz', 500);
--------------------------------------------------------------------------------------------
            //export命令可以在模块的任何位置,必须处于模块顶层,如果在块级作用域没法静态化会报错。
            //报错
            function foo() {
                export default 'bar' 
            }
            foo()
//main.js
//import命令
            import {a} from 'index.js';
            import {b} from 'index.js';
            import {c} from 'index.js';
            //等同于
            import {a,b,c} from 'index';//以上两种写法相同,import语句是独生模式
--------------------------------------------------------------------------------------------
            import {a} from 'index';
            //报错 变量a是只读的,可以改写a的属性
            var a = '1';
            //合法操作,但是其他模块输入读到改写后的值,不推荐使用难以查错,可用于特殊场景路由控制等等
            var a.foo = 'ok';
--------------------------------------------------------------------------------------------
            //import 有提升效果,会提升到模块头部执行
            foo();
            import { foo } from 'my_module';//ok
--------------------------------------------------------------------------------------------
            //import 是静态执行,不可以用变量和表达式,不能使用这些只有在运行时才能得到结果的语法结构。
            // 报错
            import { 'f' + 'oo' } from 'my_module';
            // 报错
            let module = 'my_module';
            import { foo } from module;
            // 报错
            if (x === 1) {
              import { foo } from 'module1';
            } else {
              import { foo } from 'module2';
            }
//模块使用整体加载
            //circle.js
            export function area(radius) {
              return Math.PI * radius * radius;
            }
            export function circumference(radius) {
              return 2 * Math.PI * radius;
            }
                    //index.js
            //逐一加载下面写法
            import { area, circumference } from './circle';
            console.log('圆面积:' + area(4));
            console.log('圆周长:' + circumference(14));
            //使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。
            import * as circle from './circle';
            console.log('圆面积:' + circle.area(4));
            console.log('圆周长:' + circle.circumference(14));
//export default 命令
            //方便加载,import命令可以为该匿名函数指定任意名字。
            // export-default.js
            export default function () {
                console.log('foo');
            }
            // import-default.js
            import customer from './export-default';
            customer(); // 'foo'
--------------------------------------------------------------------------------------------
            //对应的import语句不需要使用大括号
            import customName from './index';
            customName(); // 'foo'
            //两种写法
            export default function () {
                console.log('foo');
            }
            //或者写成
            function foo() {
                console.log('foo');
            }
            export default foo;
--------------------------------------------------------------------------------------------
            //export default 就是输出一个叫做default的变量或方法
            // 正确
            export var a = 1;
            // 正确
            var a = 1;
            export default a;
            // 错误
            export default var a = 1;
            //export default命令输出变量时,本质是将后面值,赋给default变量,所以可以直接将一个值写在export default之后
            // 正确
            export default 42;
            // 报错
            export 42;
--------------------------------------------------------------------------------------------
            //export default 允许用 as 任意命名,重命名为 default 有效
            function add(x, y) {
                return x * y;
            }
            export {add as default};
            // 等同于
            export default add;
            //main.js 引用
            import { default as add } from './index';
            //等同于
            import add from './index';
--------------------------------------------------------------------------------------------
            //有了export default命令,import 可以同时输入默认方法和其他接口
            //moudle.js
            export default function (obj) {
                
            }
            export function each(obj, iterator, context) {
                
            }
            export { each as forEach };
            //index.js
            import a, { each, forEach } form 'moudle';
--------------------------------------------------------------------------------------------
            //export default也可以用来输出类
            // MyClass.js
            export default class {
                
            }
            // main.js
            import MyClass from 'MyClass';
            let o = new MyClass();
//import 和 export 复合写法
            //export和import语句可以结合写成一行。相当于对外转发了接口,导致当前模块不能直接使用foo和bar。
            export { foo, bar } from 'my_module';
            // 可以简单理解为
            import { foo, bar } from 'my_module';
            export { foo, bar };
--------------------------------------------------------------------------------------------
            //模块的接口改名和整体输出,也可以采用这种写法。
            // 接口改名
            export { foo as myFoo } from 'my_module';
            // 整体输出
            export * from 'my_module';
--------------------------------------------------------------------------------------------
            //默认接口的写法如下。
            export { default } from 'foo';
--------------------------------------------------------------------------------------------
            //具名接口改为默认接口的写法如下。
            export { es6 as default } from './someModule';
            // 等同于
            import { es6 } from './someModule';
            export default es6;
--------------------------------------------------------------------------------------------
            //默认接口也可以改名为具名接口。
            export { default as es6 } from './someModule';
--------------------------------------------------------------------------------------------
            //注意下面三种import语句,没有对应的复合写法。为了做到形式的对称,现在有提案。
            import * as someIdentifier from "someModule";//*号重命名整体加载
            import someIdentifier from "someModule";//默认接口重命名
            import someIdentifier, { namedIdentifier } from "someModule";//同时输入默认方法和其他接口
//模块继承
            //circleplus模块 继承 circle模块。
            // circle.js
            export function area(radius) {
              return Math.PI * radius * radius;
            }
            export function circumference(radius) {
              return 2 * Math.PI * radius;
            }
            export default function(){
                
            }
            // circleplus.js
            //这里是复合写法,export *,表示再输出circle模块所有属性和方法。注意,export *命令会忽略circle模块的default方法。然后,上面代码又输出了自定义的e变量和默认方法。
            export * from 'circle';
            export var e = 2.71828182846;
            export default function(x) {
              return Math.exp(x);
            }
            //也可以将circle的属性或方法,改名后再输出。将其改名为circleArea。
            // circleplus.js
            export { area as circleArea } from 'circle';
            //加载模块 import exp表示,将circleplus模块的默认方法加载为exp方法。
            // main.js
            import * as math from 'circleplus';
            import exp from 'circleplus';
            console.log(exp(math.e));
//跨模块常量
            //const声明的常量只在当前代码块有效。建一个专门的constants目录,将各种常量写在不同的文件里面,保存在该目录下。
            // constants/db.js
            export const db = {
              url: 'http://my.couchdbserver.local:5984',
              admin_username: 'admin',
              admin_password: 'admin password'
            };
            // constants/user.js
            export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];
            //将这些文件输出的常量,合并在index.js里面。
            // constants/index.js
            export {db} from './db';
            export {users} from './users';
            //使用的时候,直接加载index.js就可以了。
            // script.js
            import {db, users} from './constants/index';

上面的总结,更加清晰明了,细节上还有很多地方需要注意,建议多敲代码,明天再更、、、

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python编程:import导入不同目录的模块
Python编程:import导入不同目录的模块
52 0
论SFP光模块与PC/APC/UPC光纤跳线搭配问题
光纤跳线是光纤布线中必不可少的连接线,在选购光纤跳线时,我们总会看到PC/APC/UPC的字样,如LC/UPC光纤跳线、FC/UPC光纤跳线、SC/APC光纤跳线、ST/PC光纤跳线等,那么您知道其中的PC/APC/UPC代表着什么吗?SFP光模块是否与PC/APC/UPC光纤跳线都搭配?易天光通信ETU-LINK通过本文详细为您介绍,相信您会找到答案。
889 0
Python 中包/模块的 `import` 操作
Python 中包/模块的 import 操作创建以下包结构。一个文件夹 cookFish/,下面包含两个文件, __init__.py和cookBook.py。 为什么取这几个名字呢?假设我想用 Python 去做和鱼相关的菜,这件事情很复杂,所以我给它创建了一个包,名叫cookFish, 既然是包,在它下面必须得创建一个文件__init__.py。
1094 0
【Spark Summit EU 2016】SparkSheet:将电子表格转化进Spark DataFrame
本讲义出自Oscar Castaneda在Spark Summit EU上的演讲,主要介绍了将在Excel电子表格制作的Spark原型转化为Spark程序的SparkSheet,其可以看做是Excel编译器,可以构建从Excel转化为Spark程序的直接通路,本讲义还介绍了SparkSheet的架构体系以及整个的编译过程。
2121 0
C#可扩展编程之MEF学习笔记(二):MEF的导出(Export)和导入(Import)
  上一篇学习完了MEF的基础知识,编写了一个简单的DEMO,接下来接着上篇的内容继续学习,如果没有看过上一篇的内容, 请阅读:http://www.cnblogs.com/yunfeifei/p/3922668.html。
1236 0
《BREW进阶与精通——3G移动增值业务的运营、定制与开发》连载之73---BREW 中的socket编程
版权声明:本文为半吊子子全栈工匠(wireless_com,同公众号)原创文章,未经允许不得转载。
628 0
+关注
佀无极
脚踏实地,心存高远!
69
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载