关于前端:ES6知识点-1

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