_ES6+

1 ES6 语法

1.1 let/const/var

const 定义的变量，是不能够重新赋值的。所以这个是使用优先级最高的个语法，他能极大保障数据的安全性。

let 跟 const 是一样的，只不过它可以重新被赋值。

let 跟 const 是块级作用域，但是 var 是函数级作用域。

{
    var x = 333;
    let y = 444;
}

console.log(x); // 333
console.log(y); // 报错

function aaa () {
    console.log("pre", x);  // undefined
    if (true) {
        var x = 323;
    }
    console.log("post", x); // 323，记住，var 定义的变量是函数级别的作用域的
}

for..var / for..let:

// 1. 异步任务
// 2. 闭包，词法作用域
// 3. var/let 区别

for (var i=0; i<10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 0);
}
// 10 个 10

for (let i=0; i<10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 0);
}
// 0....9


for (var i=0; i<10; i++) {
    (function () {
        var j = i;
        setTimeout(function() {
            console.log(j);
        }, 0)
    })();
}
// 手动实现重新绑定，输出也是 0...9

1.2 模板字符串

字符串的写法，现在有三种:

 const aaa = 'hello,world'
 const bbb = "hello,world"

 const ccc = `hello,${aaa}`
 const ddd = `
    hello, ${ccc.length}
`

模板字符串，可以嵌入变量，使用 ${} 占位符。

可以换行。

1.3 箭头函数

短而易用。

在箭头函数内部，没有自己的 this 指针，它使用的 this 是来自父元素的。

var id = 666;

var ooo = {
    id: 3333,
    xxx: () => {
        console.log('id:', this.id); // 666
    }
}


// example 2.
function Person () {
    this.age = 20;
    this.tell = () => { // 改成 function 方式，会出错，为什么
        console.log(this.age);
    }
}

var p = new Person();
setTimeout(p.tell, 0);

1.4 结构化赋值

var arr = [22, 33, 445, 6667];

/* var a = arr[0];
 * var b = arr[1];
 * var c = arr[2];
 */

const [ a, b, _, d ] = arr;
const [ aa, bb, ...cc ] = arr;
console.log(aa, bb, cc);

const { e, f } = { e: 333, f: 444, g: 555 };

// import { Button, Form } from './ksjfdksjd.js'


const a1 = ['hello', 'world'];
const a2 = [2, 3, 4, 5];

const a3 = a1 + a2;
const a4 = [...a1, 39393939, 444, ...a2];
console.log(a4);


// 结构化函数参数
function tell(name, age) {
    console.log(name, age);
}

var aaa = ['tom', 333];
tell(...aaa);

2 模块

JS 是一门仓促产生的语言，在产生的时候，很多特性都不具备。

比如说，模块、命名空间。

这样就导致了很多问题。

所以，就产生了很多的第三方实现。

2.1 CommonJS 规范

两个主要 api:

module.exports = {}
require('xxx')

2.2 AMD 规范

requirejs 是他的一个主要实现。

2.3 其他规范

2.3.1 UMD规范

语法丑陋，但是兼容了 CommonJS 和 AMD

2.3.2 CMD 规范

是中国人搞的

2.4 es6 Module

经过了漫长的岁月，终于，在 es6 中出现了语言级别的模块概念。

它有两个基本 api:

export
import x from 'xxx'

语法示例如下:

// 略

3 前端工程化

3.1 babel

https://babeljs.io/

这是一个翻译工具。我们使用 es6/es7 等新的语法编程，经过 babel 的翻译之后，它就能兼容不支持 es6/7 的浏览器。

它能把使用 es6/es7 等语法的文件，根据配置翻译成能够在指定浏览器使用的文件。

比如说，你可以指定，让它翻译成能够在 ie6 下面使用的使用。

你可以指定，让它翻译成能够兼容 ie8 的文件。

你也可以指定，让它翻译成能够兼容 ie10 的文件。

3.2 npm/yarn

包的管理工具

下载插件，下载工具，简单的任务管理。

npm(nodejs package manager)，它是伴随 nodejs 出现的一个工具包。

使用相当简单。

第一步，下载。

第二步，安装。

第三步，使用。

基本命令如下:

# 添加国内源
npm config list
npm config set registry=https://registry.npm.taobao.org

# 初始化一个项目，在项目下面创建基本的配置文件 package.json
# package.json 是属于 CommonJS 规范的一个配置文件
# 因为 npm 使用的是 CommonJS 规范，所以，他也使用了同样的 package.json 作为它的配置文件
npm init

# 下载一个插件
# 下载完之后，默认会安装到当前目录下的 node_moduels 文件夹里
npm install jquery
npm install electron --global
npm install vue

# 删除掉
npm uninstall jquery

# 运行简单命令
npm run hahaha
# "scripts": {
#   "hahaha": "ipconfig",
#   "test": "echo \"Error: no test specified\" && exit 1"
# },

3.3 Webpack

用来:

打包资源
通过一定的插件，进行任务的集成（自动化任务）

3.4 其他的脚手架

cli: command line interface，命令行工具