目的:将大程序拆分成互相依赖的小模块文件.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的更多相关文章

  1. 《ECMAScript6入门》笔记——Generator函数

    今天在看<ECMAScript6入门>的第17章——Generator函数的语法.理解起来还是有点费劲,几段代码看了很多遍.总算有点点理解了. 示例代码如下:(摘自阮一峰<ECMAS ...

  2. 《ECMAScript6入门》___阮一峰 笔记

    let和const命令 let命令 循环体的let变量只对花括号作用域可见,花括号外不可见 循环体的语句部分是一个父作用域,而循环体内部是一个单独的子作用域 let声明的变量不存在变量提升,未声明的使 ...

  3. ECMAScript6 入门教程 初学记录let命令 块级作用域

    一.基本语法-let命令 (1)ES6新增了let命令,用来声明变量.所声明的变量,只在let命令所在的代码块内有效. 循环的计数器,就很合适使用let命令.计数器i只在for循环体内有效,在循环体外 ...

  4. ecmascript6入门

    ECMAScript 6 入门  阮一峰

  5. 《ECMAScript6入门》笔记

    let和const命令 let命令 循环体的let变量只对花括号作用域可见,花括号外不可见 循环体的语句部分是一个父作用域,而循环体内部是一个单独的子作用域 let声明的变量不存在变量提升,未声明的使 ...

  6. ECMAScript6入门系列一

    let 命令 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 [注]:let与var相似,用来声明变量 ...

  7. ECMAScript6 入门-let与const命令

    块级作用域 1:let命令声明的变量只在let命令所在的代码块有效--简而言之 大括号既是代码块,也就是说存在块级作用域了. { let a =10; var b =1; } a // Referen ...

  8. ECMAScript6 入门教程记录 变量的解构赋值

    (1)变量的解构赋值 基本用法:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; let c = ...

  9. ECMAScript6 入门 函数的扩展

    为函数参数设定默认值 function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hell ...

随机推荐

  1. jdbcTemplate 调用存储过程。 入参 array 返回 cursor

    注:本文来源<   jdbcTemplate 调用存储过程. 入参 array 返回 cursor   > 需求: java传入一个list object.从数据库找到相关的数据并返回. ...

  2. LeetCode(77):组合

    Medium! 题目描述: 给定两个整数 n 和 k,返回 1 ... n 中所有可能的 k 个数的组合. 示例: 输入: n = 4, k = 2 输出: [ [2,4], [3,4], [2,3] ...

  3. 【python】spark+kafka使用

    网上用python写spark+kafka的资料好少啊 自己记录一点踩到的坑~ spark+kafka介绍的官方网址:http://spark.apache.org/docs/latest/strea ...

  4. wireless Penetration Testing & Honeypot and Mis-Association attacks

    重新记一遍 ,在捕获握手数据包的时候不容易获取,所以使用ARP请求.使用自己的无线网卡的地址发送请求,会容易使得无线开启端掉线,迫使重新连接. 1.使用命令   aireplay-ng -3 -b a ...

  5. antDesign 使用Form并进行表单验证

    import React from 'react'; import {Form,Input,Select,Button ...} from 'antd'; class PageName extends ...

  6. Docker快速部署gitlab

    环境: Centos7.5 安装Docker 1.移除旧版本: $ sudo yum remove docker \ docker-client \ docker-client-latest \ do ...

  7. appium+python测试app使用相对坐标定位元素

    我们获取到的是绝对坐标,如果换一个屏幕分辨率不同的手机那这个坐标自然会发生变化,要实现不同手机均能实现点击同一控件自然要用到相对坐标了,具体方法如下: 1.获取当前空间的绝对坐标(x1,y1),开启指 ...

  8. 开放系统的直连式存储(Direct-Attached Storage,简称DAS)

    开放系统的直连式存储(Direct-Attached Storage,简称DAS)已经有近四十年的使用历史,随着用户数据的不断增长,尤其是数百GB以上时,其在备份.恢复.扩展.灾备等方面的问题变得日益 ...

  9. 饮冰三年-人工智能-linux-09 服务

    1:SSH服务(提供远程连接服务) 客户端使用Xshell 链接成功 加快连接速度 关闭防火墙 2:apache 服务(提供网页服务) 2.0 准备环境 关闭防火墙:service iptables ...

  10. PaperNotes Instance-Level Salient Object Segmentation

    title: PaperNotes Instance-Level Salient Object Segmentation comments: true date: 2017-12-20 13:53:1 ...