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是编译输入接口。