vue-ES2015:

vue手册： 2

ES2015: 2

一.一言蔽之 2

二.ES2015给java开发带来了什么？ 2

三.ES2015新语法详解 3

四.ES2015的前端开发实战 7

五.ES2015的Node.js开发实战 8

六.一窥ES7 8

七.后记 8

vue.js 1.0解读： 8

 

vue手册：

必备基础：html5，es6，git。

vue起始就是个文件库，node-modules，他的运行底层还是借助es5+。

ES2015:

1.一言蔽之

ES2015 标准提供了许多新的语法和编程特性以提高 JavaScript 的开发效率和体验

2.ES2015给java开发带来了什么？

2.1.语法糖

语法糖(Syntactic sugar)，也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会

2.2.工程优势

 JavaScript 的模块化构建：

从许多年前开始，各大公司、团队、大牛都相继给出了他们对于这个问题的不同解决方案，以至于定下了如 CommonJS、AMD、CMD 或是 UMD 等 JavaScript 模块化标准，RequireJS、SeaJS、FIS、Browserify、webpack 等模块加载库都以各自不同的优势占领著一方土地

 解读实例：

//import引入文件。‘fs’，‘readline’，‘path’文件格式，但是里面一般都export语法。fs,readline,path就是申明文件export对象的实例变量

import fs from 'fs'

import readline from 'readline'

import path from 'path'

 

let Module = {

  //noop代表函数名称

  readLineInFile(filename, callback = noop, complete = noop) {

  //readline里面有createInterface方法，他的参数是一个对象input: fs.createReadStream(path.resolve(__dirname, './big_file.txt')

    let rl = readline.createInterface({

      input: fs.createReadStream(path.resolve(__dirname, './big_file.txt'))

    })

 

    rl.on('line', line => {

      //... do something with the current line

      callback(line)

    })

 

    rl.on('close', complete)

 

    return rl

  }

}

function noop() { return false }

 

export default Module

可惜的是，目前暂时还没有任何浏览器厂商或是 JavaScript 引擎支持这种模块化语法。所以我们需要用 babel 进行转换为 CommonJS、AMD 或是 UMD 等模块化标准的语法。

3.ES2015新语法详解

3.1. let、const和块级作用域

const定义常量的

 

var i 一直存在整个上下文。

<script>

<button>一</button>

<button>二</button>

<button>三</button>

<button>四</button>

 

<div id="output"></div>

 

<script>

  var buttons = document.querySelectorAll('button')

  var output = document.querySelector('#output')

 

  for (var i = 0; i < buttons.length; i++) {

    buttons[i].addEventListener('click', function() {

      output.innerText = buttons[i].innerText

    })

  }

</script>

执行完了，真个页面对于i是4，四个按钮因为上下文变化的var i，所以他们都是4，所以会报错Uncaught TypeError: Cannot read property 'innerText' of undefined

解决方案：用let。

let 语句会使该变量处于一个块级作用域中；

块级作用域

3.2. 箭头函数（Arrow Function）

使用方法

let names = [ 'Will', 'Jack', 'Peter', 'Steve', 'John', 'Hugo', 'Mike' ]

let newSet = names

  .map((name, index) => {

    return {

      id: index,

      name: name

    }

  })

  .filter(man => man.id % 2 == 0)

  .map(man => [man.name])

  .reduce((a, b) => a.concat(b))

 

console.log(newSet) //=> [ 'Will', 'Peter', 'John', 'Mike' ]

箭头函数与上下文绑定：

对函数内部的上下文 （this）绑定为定义函数所在的作用域的上下文

let obj = {

  hello: 'world',

  foo() {

    let bar = () => {

      return this.hello

    }

    return bar

  }

}

 

window.hello = 'ES6'

window.bar = obj.foo()

window.bar() //=> 'world'

注意事项

3.3. 模板字符串

支持变量注入

let name = 'Will Wen Gunn'

let title = 'Founder'

let company = 'LikMoon Creation'

let greet = `Hi, I'm ${name}, I am the ${title} at ${company}`

支持换行

let sql = `

SELECT * FROM Users

WHERE FirstName='Mike'

LIMIT 5;

`

3.4. 对象字面量扩展语法

方法属性省略function

let obj = {

  // before

  foo: function() {

    return 'foo'

  },

 

  // after

  bar() {

    return 'bar'

  }

}

支持注入_proto_

a：

class Foo {

  constructor() {

    this.pingMsg = 'pong'

  }

 

  ping() {

    console.log(this.pingMsg)

  }

}

 

let o = {

  __proto__: new Foo()

}

 

o.ping() //=> pong

b：

let o = {

  __proto__: new Foo(),

 

  constructor() {

    this.pingMsg = 'alive'

  },

 

  msg: 'bang',

  yell() {

    console.log(this.msg)

  }

}

 

o.yell() //=> bang

o.ping() //=> alive

同名方法属性省略语法

// module.js

export default {

  someMethod

}

 

function someMethod() {

  // ...

}

 

// app.js

import Module from './module'

 

Module.someMethod()

可以动态计算的属性名称：

let arr = [1, 2, 3]

let outArr = arr.map(n => {

  return {

    [ n ]: n,

    [ `${n}^2` ]: Math.pow(n, 2)

  }

})

console.dir(outArr) //=>

  [

    { '1': 1, '1^2': 1 },

    { '2': 2, '2^2': 4 },

    { '3': 3, '3^2': 9 }

  ]

3.5. 表达式解构

 

 

3.6. 函数参数表达、传参

默认参数值

后续传参

注意事项

解构传参

注意事项

3.7. 新的数据结构

Set和WeakSet

Map和WeakMap

3.8. 类(Classes)

语法

定义

继承

静态方法

遗憾与期望

3.9. 生成器（Generator）

来龙

基本概念

Generator Function

Generator

基本使用方法

3.10. promise

概念

基本用法

弊端

3.11. 原生的模块化

历史小回顾

基本用法

全局引入

局部引入

接口暴露

降级兼容

3.12. Symbol

黑科技

3.13.Proxy(代理）

四.ES2015的前端开发实战

1. 构建界面

2. 结构定义

3. 架构设计

模块化

数据支持

界面渲染

4.构建应用

入口文件

数据层:文章

路由:首页

准备页面渲染

加载数据

设计组件

路由:文章页面

路由:发布新文章

5.路由绑定

6.合并代码

五.ES2015的Node.js开发实战

1.架构设计

2.构建应用

入口文件

数据抽象层

Posts控制器

API获取所有文章，获取指定文章，发布新文章。

Comments

API获取指定文章的评论，发表新评论

配置路由

3.配置任务文件

4.部署到DaoCloud

Dockerfile

创建DaoCloud上的MongoDB的服务

代码创建

六.一窥ES7

1.async/await

2.Decorators

简单实例

黑科技

七.后记

      ES6重点：

import，export，=>,module等。

     

      es6特点：

定义函数：

var human={

breath(name){

console.log(name+"is breathing...");

}

}

 

     

vue.js 1.0解读：

安装：

安装vue库；默认在C:\Users\Administrator\AppData\Roaming\npm\node_modules可以看到npm安装的全局库

vue install -g vue --registry=https://registry.npm.taobao.org;

安装vue命令行库：

vue install -g vue-cli;

查看版本：

vue -V；

理解

组件即对象：

对象的固定属性都是要美元符引用的。每个属性也可以看作是一个对象