ECMAScript6 入门 Module
目的:将大程序拆分成互相依赖的小模块文件.CommonJS 和 AMD 两种,前者用于服务器,后者用于浏览器.他俩都是运行时才确定
:ES6 模块的设计思想(浏览器和服务器通用)是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量
ES6 模块不是对象,而是通过export
命令显式指定输出的代码,再通过import
命令输入
// CommonJS模块
let { stat, exists, readFile } = require('fs'); // 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;
////整体加载fs模块(即加载fs的所有方法),生成一个对象(_fs),然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化” // ES6模块
import { stat, exists, readFile } from 'fs';
//实质是从fs模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,这也导致了没法引用 ES6 模块本身,因为它不是对象
模块功能的两个命令:
1export
命令用于规定模块的对外(导出功能)接口,
2import
命令用于导入其他模块提供的功能
export命令:
1:输出变量或者函数,class等
let name= "panrui"
function test() {
console.log(name)
}
export{name,test}
//通过as使用别名
export{name as ne,test as tt}
2:对外的接口必须和模块内部建立一一对应的关系...待续
3:对外的接口与其对应的值是动态绑定,当对应的值改变的时候,通过接口是可以实时获取的
let firstName = "Michael"
function test() {
firstName = "panrui"
}
export{firstName,test} import{firstName,test} from "./profile.js"
firstName //Michael
test();
firstName //panrui
4export命令可以出现在模块顶层的任何位置
import命令:
1:import命令接受一对大括号,里面指定要从其他模块导出的变量名,必须和被导入模块的对外接口的名称相同
2:同理也可以采用as对导入的变量名进行重命名
3:导入的变量都是只读的,千万千万千万不要去修改接口.
4:import命令具有提升的效果,会提升到整个模块的头部,最先执行 (因为她是在预编译的时候执行的,在代码执行之前)
5:整体加载,通过*制定一个对象,所有的输出值都加载到这个对象上面,
export default命令:(本质上是输入一个叫做default的变量或者函数)
注意:关注他与export在导出方面的区别,import在导入方面也有些许的差异
1:为模块指定一个默认的输出,其他模块加载该模块的时候就可以指定一个任意名字加载这个默认输出
2:导入一个模块的默认输出,导入的时候不需要放在大括号里面
export与import的混合写法:如果在一个模块中,导入和导出同一个模块
export { foo, bar } from 'my_module'; // 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };
//但需要注意的是,写成一行以后,foo和bar实际上并没有被导入当前模块,只是相当于对外转发了这两个接口,导致当前模块不能直接使用foo和bar
模块的继承: 继承的意思是模块的本身的导出加上父类的导出,所以模块本身还是不能使用,只是起到转发作用
// circleplus.js export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}
//circleplus模块先导入circle,在导出circle,相当于继承.
//同时又导出自己的默认方法和其他变量
跨模块常量:待续....
ECMAScript6 入门 Module的更多相关文章
- 《ECMAScript6入门》笔记——Generator函数
今天在看<ECMAScript6入门>的第17章——Generator函数的语法.理解起来还是有点费劲,几段代码看了很多遍.总算有点点理解了. 示例代码如下:(摘自阮一峰<ECMAS ...
- 《ECMAScript6入门》___阮一峰 笔记
let和const命令 let命令 循环体的let变量只对花括号作用域可见,花括号外不可见 循环体的语句部分是一个父作用域,而循环体内部是一个单独的子作用域 let声明的变量不存在变量提升,未声明的使 ...
- ECMAScript6 入门教程 初学记录let命令 块级作用域
一.基本语法-let命令 (1)ES6新增了let命令,用来声明变量.所声明的变量,只在let命令所在的代码块内有效. 循环的计数器,就很合适使用let命令.计数器i只在for循环体内有效,在循环体外 ...
- ecmascript6入门
ECMAScript 6 入门 阮一峰
- 《ECMAScript6入门》笔记
let和const命令 let命令 循环体的let变量只对花括号作用域可见,花括号外不可见 循环体的语句部分是一个父作用域,而循环体内部是一个单独的子作用域 let声明的变量不存在变量提升,未声明的使 ...
- ECMAScript6入门系列一
let 命令 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 [注]:let与var相似,用来声明变量 ...
- ECMAScript6 入门-let与const命令
块级作用域 1:let命令声明的变量只在let命令所在的代码块有效--简而言之 大括号既是代码块,也就是说存在块级作用域了. { let a =10; var b =1; } a // Referen ...
- ECMAScript6 入门教程记录 变量的解构赋值
(1)变量的解构赋值 基本用法:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; let c = ...
- ECMAScript6 入门 函数的扩展
为函数参数设定默认值 function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hell ...
随机推荐
- Netty沾包和拆包
1.连着发两条,会沾在一起,这就是沾包 2.包尾添加特殊分隔符,接收方通过特殊分隔符切分报文区分,这就是拆包 在ChatServerInit类.ChatClientInit类分别加入以下代码 Byte ...
- java多线程快速入门(二十一)
CountDownLatch(闭锁)计数器 有一个任务A,它要等待其他4个任务执行完毕之后才执行,此时就可以利用CountDownLatch来实现这种功能 package com.cppdy; imp ...
- Memcached简介及环境安装
Memcached简介及环境安装 author:SimpleWu 简介 Memcached是一个自由开源的,高性能,分布式内存对象缓存系统. Memcached是以LiveJournal旗下Danga ...
- PDF怎么去除页眉页脚,PDF页眉页脚编辑方法
我们在使用文件的时候需要编辑页眉页脚的时候,这个时候我们应该怎么做呢,相信别的文件大家都知道怎么编辑了,PDF文件大家都知道吗,最开始接触这个文件的时候小编觉得很难,之后找到技巧之后也并没有很难,今天 ...
- bzoj3991 lca+dfs序应用+set综合应用
/* 给定一棵树,树上会出现宝物,也会有宝物消失 规定如果要收集树上所有宝物,就要选择一个点开始,到每个宝物点都跑一次,然后再回到那个点 现在给定m次修改,每次修改后树上就有一个宝物消失,或者一个宝物 ...
- css+js杂记
css的盒子模型分:ie盒子模型和标准盒子模型 区别: 2.选择器 .id选择器(# myid) .类选择器(.myclassname) .标签选择器(div, h1, p) .相邻选择器(h1 + ...
- vue用webpack打包时引入es2015插件
1.安装依赖包 $ npm install --save-div babel-preset-es2015 ps:babel-loader.babel-core应该是默认装好的,如果没有安装,请重新安装 ...
- Eclipse编写ExtJS5卡死问题
本篇以eclipse为例,导入后在编译时很容易出现eclipse的卡死现象,这主要是js文件的校验引起的. 我们可通过如下方法进行配置: 打开该项目的.project文件,删除如下配置即可: < ...
- SpringBoot学习(3)-SpringBoot添加支持CORS跨域访问
SpringBoot学习(3)-SpringBoot添加支持CORS跨域访问 https://blog.csdn.net/yft_android/article/details/80307672
- IDEA 小白采坑
IDEA Debug状态下,断点第一次可以进去,之后都不能进去 调试时候不要用Ctrl+F9,如果是点击Tool Windows 上的图标的话,也要注意改图标的快捷键是不是Ctrl+F9 Ctrl+F ...