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