一些前端框架组件化实现的比较

·  阅读 2352
一些前端框架组件化实现的比较
原文链接: segmentfault.com

第一次接触到前端组件的概念是在学习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: `
            Upper Case`,
    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指定的标签来实例化组件,Loading...

Vue

var Vue = require('vue');

Vue.component('amazing-vue', {
    props: ['text'],
    template: '
Upper Case
', data: function () { return { }; }, methods: { changeToUpperCase: function () { this.text = this.text.toUpperCase(); } } });复制代码

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

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

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

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

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

  • 组件的实例化可以通过标签来实现,

React

var AmazingReact = React.createClass({
    getInitialState: function () {
        return {
            text: this.props.text
        };
    },
    changeToUpperCase: function () {
        this.setState({
            text: this.state.text.toUpperCase()
        });
    },
    render: function () {
        return (
            
Upper Case
); } });复制代码

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

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

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

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

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

  • 通过react-dom的render方法以标签的形式实例化组件,

Molecule

Upper Case
复制代码

Molecule采用了基于HTML定义组件的方式。

  • 由于是HTML主场,所以组件HTML结构直接在在里面

  • 猜你一定想到了,组件的样式可以写在style标签内。不过Molecule目前还未实现Scoped CSS,所以定义样式要多加小心

  • JS到了客场也不得不包一层script标签,使用jquery实现业务逻辑

  • 外部参数也用jquery来获取

  • 在HTML中通过标签属性来实例化组件,

总结

可以看出虽然各个框架实现组件的方式各不相同,但总体思想是一致的,内部都包含组件结构和组件行为的定义,外部则都提供了接口实现参数传递。至于有些框架没有实现内部的CSS,我猜应该是考虑了表现的多样性。而实例化的方式则都采用了HTML标签的方式,利用HTML的树形结构,让多个组件的组织更加方便和一目了然。

分类:
前端
标签:
分类:
前端
标签: