1.ES6入门
1.1 ES6介绍
(1)ES6是ES2015、ES2016、ES2017的统称
(2)官网名称：《ECMAScript 2015 规范》
1.2 Babel的装置与应用
babel是一个宽泛应用的ES6转换器，能够将ES6的代码转为ES5代码，从而在老版本的浏览器上运行。
这意味着，能够应用ES6的形式编写程序，又不必放心现有环境是否反对。
1.2.1 babel的装置
(1)装置转码工具
npm install --global babel-cli 或者 npm install babel-cli -g
(2) 装置转换规则
npm install -g babel-preset-latest
(3)指定转换规则 新建.babelrc 并增加
{
"presets":["latest"]
}
1.2.2 babel的应用
(1) 将ES6代码转码并输入
babel example.js
(2) 将ES6代码转码并输入到新的文件,es6为原文件，es5为新的文件
babel es6.js --out-file es5.js
简写：babel es6.js -o es5.js
(3) 将ES6代码转码并输入到新的文件夹，src为原来的文件夹，dist为新的文件夹
babel src --out-dir dist
简写：babel src -d dist
1.3 包管理机制(npm cnpm yarn)
(1)初始化我的项目
npm init
或npm init -y (不询问我的项目信息)
(2)装置依赖
a. 全局依赖（在电脑的C盘保留依赖的源码）
npm install xxx --global
简写：npm i xxx -g
b. 部分依赖(在我的项目的根目录下保留依赖源码信息)
开发依赖：cnpm install xxx --save-dev 简写：cnpm i xxx -D
产品依赖：cnpm install xxx --save 简写：cnpm i xxx -S
1.4 模块化机制
1.4.1 ES6模块化标准
export命令，即导出
var firstName = "zhang";
var lastName = "san";
(1) 列表导出
export {firstName,lastName}
(2) 重命名导出
export {firstName as first,lastName as lase}
(3) 导出单个属性
export var a = 3;
export function myFun(){console.log(2)}
(4)默认导出，一个模块只能有一个默认导出，不能应用var,const,let导出默认值
export default{}
export default function foo(){}
(5)谬误导出
var a = 1;
export a;//报错，因为没有提供对外的接口，应该是export var a = 1;或export {a}
(6) 导入默认
import命令，即导入
(1) 导入整个模块
import * as person from './person.js'
(2) 导入多个接口
import { firstName, lastName} from './person.js';
(3) 重命名导入
import { firstName as name } from './person.js';
(4) 运行整个模块而不导入任何值
import './person.js'
(5) 导入应用export default 导出的模块
import myDefault from './module.js';
(6) 导入第三方模块(去我的项目的根目录找node_modules)
import 'babel-preset-latest';
1.4.2 CommonJS
(1) 导出
let firstName = "tom";
let lastName = "terry";
module.exports = {
firstname:firstName,
lastname:lastName
}
(2) 导入
let { firstName, lastName } = require('./module');
1.4.3 AMD模块化标准
AMD是“Asynchronous Module Definition” 的缩写，意思就是“异步模块定义”。
它采纳异步形式加载模块，模块的加载不影响它前面语句的运行。
所有依赖这个模块的语句都定义在一个回调函数中，等到加载结束后，这个回调函数才会运行。
1.4.4 ES6模块化与CommonJS的区别
CommonJS
(1) 对于根本数据类型，属于复制。即会被模块缓存。同时，在另一个模块能够对该模块输入的变量从新赋值
(2) 对于简单数据类型，属于浅拷贝。因为两个模块援用的对象指向同一个内存空间，因而对该模块的值做批改时会影响另一个模块。
(3) 当应用require命令加载某个模块时，就会运行整个模块的代码
(4) 当应用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值，也就是说，
CommonJS 模块无论加载多少次，都只会再第一次加载时运行一次，当前再加载，就返回第一次运行的后果，除非手动革除零碎缓存。
(5) CommonJS是运行时加载的。
ES6模块
(1)ES6模块中的值属于【动静只读援用】
(2) 对于只读来说，即不容许批改引入变量的值，import的变量是只读的，不论是根本数据类型还是简单数据类型。
当模块遇到import命令时，就会生成一个只读援用。等到脚本真正执行时，再依据这个只读援用到被加载的那个模块外面去取值。
(3)对于动静来说，原始值发生变化，import加载的值也会发生变化。不论是根本数据类型还是简单数据类型。
(4) ES6是编译输入接口。
发表回复