第一次接触到前端组件的概念是在学习Extjs的时候，有一个名叫Ext.component的对象，所有的组件都是继承自这个对象。Extjs有很多自带的组件，种类齐全，可以应对大部分后台页面的需求，而且实现了页面全部由组件组成的宏伟目标。组件的编写几乎都是靠JS，而弱化了HTML和CSS。虽然现在已经不用Extjs了但有机会一定要好好研究下它对组件概念的理解。

花了近一天的时间，用我认为比较主流的前端框架分别实现了同一个简单的功能，看图就能明白这个功能，这里也只比较简单的单层组件的实现。

当然几种框架的实现都使用了组件化的方式，并实例化三次，所以你看到图上有三行且每行的初始文字不同。接下来我将分别展示Angular2、Vue、React和Molecule的组件实现。注：Molecule不是流行组件化框架，但是用与众不同的方式实现组件。

Angular2

import { Component, Input } from '@angular/core';

@Component({
    selector: 'amazing-angular2',
    template: `<input [(ngModel)]="text">
            <button (click)="changeToUpperCase()">Upper Case</button>`,
    styles: [``]
})
export class ItemComponent {
    @Input()
    text = 'Hello Wolrd';

    changeToUpperCase() {
        this.text = this.text.toUpperCase();
    }
};

Angular2用es7的装饰器特性将一个类标记为组件。

• template属性用HTML定义了组件的结构

• styles属性用CSS定义了组件的样式（Scoped CSS，即这里写的样式只作用于此组件）

• 组件的逻辑实现和Angular1类似，在类中声明成员来与HTML结构绑定

• Input装饰器让组件接收外部参数，这里外部的text参数会覆盖text成员的原始值，缺省则为text成员的原始值

• 在HTML结构中通过selector指定的标签来实例化组件，<amazing-angular2 [text]="'Hello Angular2!'">Loading...</amazing-angular2>

Vue

var Vue = require('vue');

Vue.component('amazing-vue', {
    props: ['text'],
    template: '<div><input v-model="text"><button @click="changeToUpperCase">Upper Case</button></div>',
    data: function () {
        return { };
    },
    methods: {
        changeToUpperCase: function () {
            this.text = this.text.toUpperCase();
        }
    }
});

这里用了Vue的语法糖把组件定义和注册合成了一步。

• 在template属性中定义组件的HTML结构

• 奇怪的是没有找到定义组件样式的API，可能是我没找到。但在Vue单文件组件中是实现Scoped CSS

• 与其它MVVM框架一样，定义数据属性和操作属性与HTML结构绑定，实现各种业务逻辑，避免了繁琐的DOM操作

• props属性定义了组件可以接受的外部参数的数组，如果传入外部参数，则可以直接当做数据属性来使用

• 组件的实例化可以通过标签来实现，<amazing-vue text="Hello Vue!"></amazing-vue>

React

var AmazingReact = React.createClass({
    getInitialState: function () {
        return {
            text: this.props.text
        };
    },
    changeToUpperCase: function () {
        this.setState({
            text: this.state.text.toUpperCase()
        });
    },
    render: function () {
        return (
            <div>
                <input type="text" value={this.state.text} />
                <button onClick={this.changeToUpperCase}>Upper Case</button>
            </div>
        );
    }
});

creatClass创建组件，由于采用了单向数据流，所以与Angular和Vue的实现有一些差别。

• 在render中用jsx的语法定义组件的HTML结构

• React似乎也没有实现组件内部样式

• getInitialState初始化内部state，自定义方法操作state，state改变会导致重新渲染，以此来实现业务逻辑

• 外部参数可直接通过this.props获取

• 通过react-dom的render方法以标签的形式实例化组件，<AmazingReact text="Hello React!"/>

Molecule