该篇为翻译文章，原文地址为：Building Resizeable Components with Relative CSS Units

这篇文章由 Ahmad Shadeed所写，Ahmad通过大量的示例向我们展示说明了使用相对单位会给我们带来的种种好处。我相信大部分人都想当然的认为像em这样的单位只是用来设置

Angular2(以下简称ng2)和Angular1(以下简称ng1)的区别还是很大的。

ng2主要由四大块组成：Components(组件)、Directives(指令)、Services(服务)、Routers(路由)。瞬间觉得ng2比ng1好学、好用了很多~

下面所写的示例代码，大家可以到 blwoosky/Angular2Practice进行查看。

Components和Directives

我们首先来看组件，组件用一句来概括就是：把模板、数据和一些交互行为封装成一个可以看见东西。ng2从React那里借鉴了一些东西,把应用按组件来进行拆分。其实在ng1当中，组件就相当于一个元素类型的指令,到了ng2中，它把组件的概念更强化了，让人更容易理解和掌握。
例如一个页面由三个大块(Nav、Posts、SideBar)组成：

而Posts也可以由好多个Post…

现在有这样一个场景：一个移动端页面的顶部有一个banner，这个banner图片的宽高比是2:1。往往用户第一次打开该页面时，banner图片的加载速度都会比较慢，在加载的过程中，banner的位置是没有东西的，请问如何只用CSS来设置该部分在图片还没加载好的样式(即图片未加载完成时，banner区域的宽高比也要是2:1)。

这是我前几天面试的时候遇到的题目，当时我就蒙圈了…这TM不用JS怎么搞？

我假装思考了十几秒后说：不知道…

随后 ，面试官告诉我使用padding设置成百分比，这个百分比是根据它的宽来进行计算的。

当时我就觉得我会永远记住这个知识点：padding设置成百分比时，是根据它的宽来进行计算的。没错，我的确记的很清楚。

几天后的今天，我自己来测试一下发现并不是那么回事儿：

See the Pen …

在一些传统的面向对象的语言当中（比如JAVA、C++等）都有类的概念，我们通过类来新建需要的对象。如果接触过面向对象的同学看到这篇文章将会觉得特别熟悉。

ES6之前

在ES6之前是没有“类”这个东西的，我们是通过构造函数来模拟“类”的实现：

function Person(opt){
     this.name = opt.name;
     this.age = opt.age;
}

实例方法是通过prototype…

说到模块的加载，可能大家用过RequireJS或SeaJS。而在ES6当中也为我们提供了相应的解决方案。

定义并导出一个模块

首先，我们新建一个 myModule.js 文件：

export default function(text){
     console.log(`this is