ES6 语法新特性

在2016年，不能使用ES2015/ES2016进行开发的前端技术栈，会是最先停止增长并且走下坡路的！

ES6为我们带来了什么...

LET && CONST

解决变量提升的问题，给JS新增块级作用域

console.log( n );

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n);
}

const PI = 3.1415;
console.log(PI);

						

Template String

让我们可以更便捷的定义字符串模板

let name = '信';
let word = `我是歌手：\n
是${name}.`;

console.log( word );
						

Arrow Function

箭头函数，不止是简化了function的定义，还解决了function内this关键字指向的问题

drink(type = 'water'){
	// 使用了箭头函数
	setInterval( () => {
		// 模板字符串
		console.log(`${this.name} want to drink ${type}`)
	}, 1000)
}
						

More Features

• 解构赋值
• class
• import & export
• Object扩展
• Generator
• ......

Babel

Babel 是一个 JavaScript 编译器，用于转化你的 JavaScript 代码

Babel 的用途

• 帮你做ES2015 语法的转化，这些转化器能让你现在就使用最新的 JavaScript 语法，而不用等待浏览器提供支持。
• 可以对 JSX 支持，我们可以很方便的使用React的JSX语法封装组件，Babel会帮我们将JSX代码转换成浏览器可执行的代码。
• 可以组合使用Babel的插件满足我们的转化需求，甚至可以自己封装插件和预设。

ES6 源码

import path from 'path';

console.log(path.resolve(__dirname, './src'));

const fn = a => {
    alert(a);
}

Babel 编译后

'use strict';

var _path = require('path');

var _path2 = _interopRequireDefault(_path);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.log(_path2.default.resolve(__dirname, './src'));

var fn = function fn(a) {
  alert(a);
};

构建工具：Webpack

webpack是一款强大的模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

Why Webpack

• 天生支持AMD，CommonJS, ES6 module等模块规范。
• 预编译，支持All In One，也支持分包，还可以按需加载
• 打开了NPM上广阔的package资源（也可以用browsify）

Webpack How To

• loaders
• middlreware中间件
• use in server服务端的使用
• 优化

BTW

Webpack 的学习曲线也有点陡峭，但一旦掌握，会发现很好用。

So, Next....

核心类库：React

• 库，而不是框架
• 专注UI
• 组件化开发 && JSX 语法
• 虚拟DOM，高效渲染
• 单向数据流
• 支持服务端渲染
• 生态完善：tools/Redux/Router/React Native...

How About Vue Or Angular?

框架间的竞争并不是零和游戏，主流并不一定只有一个赢家

React Vue Angular2.0 比武场

结论：React > Vue > Angular

那么，如何保证团队的代码规范呢

使用ESlint配合Airbnb指南来保持我们团队的代码风格。

ESLint

使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。

install

npm install --save-dev eslint eslint-config-airbnb

.eslintrc

{
    "extends": "airbnb/base",
    "globals": {
    "_id": true,
    "Swipe": true,
  }
}

路由管理：React-router

单页应用时代的到来，为之服务的前端路由系统是不可获取的一部分； 有独立的director，比较轻量，Backbone、Angular、React、Vue等都有其各自的路由 React-router针对React做了很多UI展示的优化

简单示例：

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import { App, Home, Profile } from '../containers';

export default (
    <Route path="/" component={App}>
        <Route path="profile/:username" component={Profile} />
        <IndexRoute component={Home} />
    </Route>
)

应用生命周期：Redux

我们有了视图和组件层，应用程序还需要管理数据状态和应用的生命周期。Redux也是毋容置疑的优胜者。

除了React，Facebook展示了名叫Flux的单向数据流的设计模式。Flux最早用来解决和简化应用的状态管理，但是随之而来，很多开发者提出了不少新的问题如如何存储数据状态和从哪发送Ajax请求。

为了解决这些问题，不少基于Flux模式之上的框架诞生了：Fluxible, Reflux, Alt, Flummox, Lux, Nuclear, Fluxxor 还有很多。

这其中的类Flux的优雅实现最终赢得了社区的关注，它就是Redux。

基础示例：

import { createStore } from 'redux'

// reducer
const todos = (state = [''], action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return Object.assign([], state, [action.text]);
        default:
            return state;
    }
}

let store = createStore(todos, [ 'Use Redux' ])

// action creator
function addTodo(text) {
    return {
        type: 'ADD_TODO',
        text
    }
}

const handleChange =  () => {
    console.log(store.getState());
}

let unsubscribe = store.subscribe(handleChange)

handleChange()

// dispatch
store.dispatch(addTodo('Read the docs'))

MORE INFO....

Mocha + 断言库

mocha 是一个功能丰富的javascript测试框架，可以运行在nodejs和浏览器环境，使异步测试变得简单有趣。mocha 串联运行测试，允许灵活和精确地报告结果，同时映射未捕获的异常用来纠正测试用例。

支持TDD/BDD 的 开发方式，结合 should.js/expect/chai/better-assert 断言库，能轻松构建各种风格的测试用例。

//模块依赖
var assert = require("assert");

//断言条件
describe('Array', function(){
  describe('#indexOf()', function(){
    it('当值不存在时应该返回 -1', function(){
      assert.equal(-1, [1,2,3].indexOf(5));
      assert.equal(-1, [1,2,3].indexOf(0));
    });
  });
});

immutable.js

什么是immutable.js，为什么需要它。

有人说 Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。

看以下代码

foo={a: 1};
bar=foo;
bar.a=2;
console.log(foo.a); // 2

这样做可以节约内存，但当应用复杂后，这就造成了非常大的隐患，Mutable 带来的优点变得得不偿失。而一般大家会使用深拷贝或是浅拷贝的方式来解决这个问题，但同时也带来了内存的消耗。

• Immutable Data 就是一旦创建就不能再被更改的数据。
• 对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。
• Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。
• 同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

几个重要的数据结构：

• Map：键值对集合，对应于 Object，ES6 也有专门的 Map 对象
• List：有序可重复的列表，对应于 Array
• Set：无序且不可重复的列表