给JavaScript 初心者的ES2015 实战

这篇文章本来是繁体中文的,我把它转成简体放在这里。原文是http://lifemap.in/es2015-in-action/,对于Javascript ES6 介绍的比较全面。


前言

历时将近6年的时间来制定的新ECMAScript标准ECMAScript 6(亦称ECMAScript Harmony,简称ES6)终于在2015年6月正式发布。自从上一个标准版本ES5在2009年发布以后,ES6就一直以新语法新特性的优越性吸引着众多JavaScript开发者,驱使他们积极尝鲜。

目录

  1. 一言蔽之ES2015
  2. ES2015 能为JavaScript 的开发带来什么 
    1. 语法糖
    2. 工程优势
  3. ES2015 新语法详解 
    1. letconst和块级作用域
      • 块级作用域
    2. 箭头函数(Arrow Function)
      • 使用方法
      • 箭头函数与上下文绑定
      • 注意事项
    3. 模板字符串
      • 支持变量注入
      • 支持换行
    4. 对象字面量扩展语法
      • 方法属性省略 function
      • 支持注入 __proto__
      • 同名方法属性省略语法
      • 可以动态计算的属性名称
    5. 表达式解构
    6. 函数参数表达、传参
      • 默认参数值
      • 后续参数
      • 注意事项
      • 解构传参
      • 注意事项
    7. 新的数据结构
      • Set 和WeakSet
      • Map 和WeakMap
    8. 类(Classes)
      • 语法
      • 定义
      • 继承
      • 静态方法
      • 遗憾与期望
    9. 生成器(Generator)
      • 来龙
      • 基本概念
      • Generator Function
      • Generator
      • 基本使用方法
    10. Promise
      • 概念
      • 基本用法
      • 弊端
    11. 原生的模块化
      • 历史小回顾
      • 基本用法
        • 全局引入
        • 局部引入
        • 接口暴露
      • 降级兼容
    12. Symbol
      • 黑科技
    13. Proxy(代理)
  4. ES2015 的前端开发实战 
    1. 构建界面
    2. 结构定义
    3. 架构设计
      • 模块化
      • 数据支持
      • 界面渲染
    4. 构建应用
      • 入口文件
      • 数据层:文章
      • 路由:首页
      • 准备页面渲染
      • 加载数据
      • 设计组件
      • 路由:文章页面
      • 路由:发布新文章
    5. 路由绑定
    6. 合并代码
  5. ES2015 的Node.js 开发实战 
    1. 架构设计
    2. 构建应用
      • 入口文件
      • 数据抽象层
      • Posts 控制器
      • API:获取所有文章
      • API:获取指定文章
      • API:发布新文章
      • Comments 控制器
      • API:获取指定文章的评论
      • API:发表新评论
      • 配置路由
    3. 配置任务文件
    4. 部署到DaoCloud
      • Dockerfile
      • 创建DaoCloud 上的MongoDB 服务
      • 代码构建
  6. 一窥ES7 
    1. async/await
    2. Decorators
      • 简单实例
      • 黑科技
  7. 后记

一言蔽之ES2015

说到ES2015,有了解过的同学一定会马上想到各种新语法,如箭头函数(=>)、class、模板字符串等。是的,ECMA委员会吸取了许多来自全球众多JavaScript开发者的意见和来自其他优秀编程语言的经验,致力于制定出一个更适合现代JavaScript开发的标准,以达到“和谐”(Harmony)。一言蔽之:

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

从ES6的别名被定为Harmony开始,就注定了这个新的语言标准将以一种更优雅的姿态展现出来,以适应日趋复杂的应 用开发需求。

ES2015 能为JavaScript 的开发带来什么

语法糖

如果您有其他语言(如Ruby、Scala)或是某些JavaScript的衍生语言(如CoffeeScript、TypeScript)的开发经验,就一定会了解一些很有意思的语法糖,如Ruby中的Range -> 1..10,Scala和CoffeeScript中的箭头函数(a, b) => a + b。ECMA委员会借鉴了许多其他编程语言的标准,给ECMAScript家族带来了许多可用性非常高的语法糖,下文将会一一讲解。

这些语法糖能让JavaScript 开发者更舒心地开发JavaScript 应用,提高我们的工作效率,多一些时间出去浪

工程优势

ES2015除了提供了许多语法糖以外,还由官方解决了多年来困扰众多JavaScript开发者的问题:JavaScript的模块化构建。从许多年前开始,各大公司、团队、大牛都相继给出了他们对于这个问题的不同解决方案,以至于定下了如CommonJS、AMD、CMD或是UMD等JavaScript模块化标准,RequireJS、SeaJS、FIS、Browserify、webpack等模块加载库都以各自不同的优势占领着一方土地。

然而正正是因为这春秋战国般的现状,广大的前端搬砖工们表示很纳闷。

这竟哪种好种适合我大神带我飞!

对此,ECMA 委员会终于是坐不住了,站了起来表示不服,并制订了ES2015 的原生模块加载器标准。

老实说,这套模块化语法不禁让我们又得要对那个很silly 的问题进行重新思考了:JavaScript 和Java 有什么关系/span>

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

ES2015 新语法详解

经过以上的介(xun)绍(tao),相信你对ES2015 也有了一定的了解和期待。接下来我将带大家慢慢看看ECMA 委员会含辛茹苦制定的新语言特性吧。

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2016年8月5日
下一篇 2016年8月5日

相关推荐