ES6（ECMAScript2015）的出现，无疑给前端开发人员带来了新的惊喜，它包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。

  本文主要针对 ES6 做一个简要介绍。  主要译自：  http://webapplog.com/ES6/comment-page-1/。也许你还不知道 ES6 是什么, 实际上, 它是一种新的 javascript 规范。在这个大家都很忙碌的时代，如果你想对 ES6 有一个快速的了解，那么请继续往下读，去了解当今最流行的编程语言 JavaScript 最新一代的十大特性。

  一、远观：认识 WAAPI

当我们谈及网页动画时，自然联想到的是 CSS3 动画、JS 动画、SVG 动画、APNG 动画等技术以及 jQuery.animate() 等动画封装库，根据实际动画内容设计去选择不同的实现方式。然而，每个现行的动画技术都存在一定的缺点，如 CSS3 动画必须通过 JS 去获取动态改变的值，setInterval 的时间往往是不精确的而且还会卡顿，APNG 动画会带来文件体积较大的困扰，引入额外的动画封装库也并非对性能敏感的业务适用。目前情形对开发者而言，鱼和熊掌似乎不可兼得，既希望获得更强大便捷的动画控制能力，又希望性能和体验上足够流畅优雅，如果能有一种浏览器原生支持的通用的动画解决方案，那将是极好极好的呢。

 React 是一个用于构建用户界面的 javascript 库 (官网定义)，很多人认为 React  是 MVC  中的 V（视图），React  采用下面几个主要的思想

简单

仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React  会自动处理所有用户界面的更新。

声明式 (Declarative)

数据变化后，React  概念上与点击“ 刷新” 按钮类似，但仅会更新变化的部分。

构建可组合的组件

位置传感器

1 GPS 与基站定位

位置传感器通常主要指手机内部的 Global Positioning System (GPS) 模块，GPS 又称全球卫星定位系统，该系统包括太空中的 24 颗 GPS 卫星；地面上 1 个主控站、3 个数据注入站和 5 个监测站及作为用户端的 GPS 接收机。最少只需其中 3 颗卫星，就能迅速确定用户端在地球上所处的位置及海拔高度；所能收联接到的卫星数越多，解码出来的位置就越精确。

获取位置信息，核心在于获取经纬度坐标，继而在手机地图中标注出自身坐标，从而确定当前所处的位置。目前手机定位的方式有两种，一种是基于 GPS 的定位，一种是基于移动运营网的基站的定位。基于 GPS 的定位方式是利用手机上的 GPS 定位模块将自己的位置信号发送到定位后台来实现手机定位的。基站定位则是利用基站对手机的距离的测算距离来确定手机位置的。后者不需要手机具有 GPS 定位能力，但是精度很大程度依赖于基站的分布及覆盖范围的大小，有时误差会超过一公里。前者定位精度较高。

手机上的环境传感器，一般包括气压传感器、温度传感器、湿度传感器、光传感器、声音传感器和距离传感器等。气压传感器能通过气压测量，判断手机当前位置的海拔高度，能提高 GPS 定位的精度，在三星 Galaxy Nexus 上有配备；温度传感器一方面用来测量气温，判断当前环境是否舒适，一方面也能监测手机内部温度是否异常；而比较普遍的是光传感器和距离传感器，对智能手机来说几乎是标配，并且一般设计位于手机正面上方听筒附近位置。

     flexbox 是一个新的盒子模型，当你给一个元素使用了flexbox模块，那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox 有许多很好用的地方，下面就着重讲述一下它的一些使用场景：

Example 1： flexbox 等分布局

      如果你要实现以下所示的样式，你可能首先想到的是用 float：

目前非常流行自适应设计与响应式设计，而且经常让人混淆，自适应设计不应与自适应布局混为一谈，它们是完全不一样的概念。

在这先说明下这两者的异同：

自从移动终端飞速发展以来，各种各样的机型突飞猛进，很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个 mobile 版本，或者 iPhone/iPad 版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个 portal（入口），会大大增加架构设计的复杂度。

于是，很早就有人设想，能不能" 一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

2010 年，Ethan Marcotte 提出了" 自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

一、动态：动画表达的设计应用

” 动态 “的设计常常能使页面的呈现更加动感，有活力，富有吸引力。具体来说，” 动态” 的设计在产品应用中常用于以下几种情形：

1.1. 丰富内涵

先试试为这段产品介绍做设计：

• Dropbox 可让您将所有照片、文档和视频随身携带，并轻松进行共享。
• 您可从您所有的电脑、iPhone、iPad 以及网络访问保存在 Dropbox 的任何文件。
• 有了 Dropbox，您的一切重要记忆资料和工作内容皆触手可及！

首先来看看图片的呈现：

序：设计对于我们技术人员来说也是一门不可或缺的知识，学习设计就像学习一门新的语言一样，它也有遵从自己的一套规则。知道越多关于设计的知识，你就越能理解设计师的工作和意义，和设计师的交流也会更加畅通无阻。下面主要围绕 3 个方面给大家介绍设计的基础知识：

1、What is design?
2、What to learn?
3、How to design?

总结起来就是：2W1H。

由于文章篇幅较长，所以分成 3 篇来介绍，分别是：

Web 设计基础知识（一）
Web 设计基础知识（二）
Web 设计基础知识（三）

/***************************接上文  《Web 设计基础知识 (二)》*****************************/

2) layOUT

1) Layout-布局四原则（principles）

1、contrast 对比

序：设计对于我们技术人员来说也是一门不可或缺的知识，学习设计就像学习一门新的语言一样，它也有遵从自己的一套规则。知道越多关于设计的知识，你就越能理解设计师的工作和意义，和设计师的交流也会更加畅通无阻。下面主要围绕 3 个方面给大家介绍设计的基础知识：

1、What is design?
2、What to learn?
3、How to design?

总结起来就是：2W1H。

由于文章篇幅较长，所以分成 3 篇来介绍，分别是：

Web 设计基础知识（一）
Web 设计基础知识（二）
Web 设计基础知识（三）

/****************************接上文  《Web 设计基础知识 (一)》**************************/

2、What to learn?

在做好设计之前，首先你需要学习一些基本的知识：Colors（颜色）  +  layOut（布局）

1) Color