First come into contact with the front end components in learning is the concept of Extjs, there was a named Ext.Com ponent object, all components are inherited from the object. Extjs has a lot of built-in components, a full range of types, can cope with most of the needs of the background page, and achieve the grand goal of a page composed entirely of components. Components are written almost exclusively with JS, rather than HTML and CSS. Although Extjs is no longer used, it’s important to take a closer look at its understanding of component concepts.

It took nearly a day to implement the same simple function separately with what I consider the mainstream front-end framework. You can see this function by looking at the picture. Here is also a simple single-layer component implementation.

Of course, implementations of several frameworks use componentization and instantiate three times, so you see three lines on the diagram with different initial text for each line. Next I’ll show the component implementations of Angular2, Vue, React, and Molecule, respectively. Note: Molecule is not a popular componentized framework, but implements components in a different way.

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(); }};Copy the code

Angular2 marks a class as a component using ES7’s decorator feature.

  • The template attribute defines the structure of the component in HTML

  • The styles property defines the style of the component with CSS (Scoped CSS, the styles written here apply only to the component)

  • The logical implementation of the component is similar to That of Angular1, declaring members in classes to bind to HTML structures

  • The Input decorator lets the component receive external arguments, where the external text argument overrides the original value of the text member, which defaults to the original value of the text member

  • Instantiate a component in an HTML structure using a selector specified tag, 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(); }}});Copy the code

Here the component definition and registration are combined in a single step using Vue’s syntactic sugar.

  • Define the HTML structure of the component in the Template property

  • Oddly, there is no API to define the component style. Maybe I didn’t find it. But the Vue single-file component implements Scoped CSS

  • Like other MVVM frameworks, data attributes and operation attributes are defined and bound to HTML structures, realizing various business logic and avoiding tedious DOM operations

  • The props property defines an array of external parameters that the component can accept. If external parameters are passed, they can be used as data properties

  • Components can be instantiated using tags,

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
            
       
); }});Copy the code

CreatClass creates components that are different from Angular and Vue implementations because of one-way data flow.

  • Define the HTML structure of the component in Render using JSX syntax

  • React also doesn’t seem to implement component internals

  • GetInitialState initializes the internal state, custom methods operate on the state, and changes to the state result in re-rendering to implement the business logic

  • External parameters can be obtained directly from this.props

  • Instantiate the component as a tag using the Render method of the React-DOM,

Molecule


       

    
        Upper Case
    

       
Copy the code

Molecule takes the approach of defining components based on HTML.

  • Because it is HTML home, the component HTML structure is directly inside

  • As you might imagine, the component’s style can be written inside the style tag. Molecule does not currently implement Scoped CSS, however, so be careful when defining styles

  • JS to away also have to package a layer of script tag, using jquery to achieve business logic

  • External parameters are also obtained using jquery

  • Instantiate components in HTML via tag attributes,

conclusion

It can be seen that although different frameworks implement components in different ways, but the overall idea is the same, both contain the definition of component structure and component behavior, and all provide interfaces to achieve parameter passing externally. As for some frameworks that don’t implement internal CSS, I guess it’s because of the diversity of presentation. And the way of instantiation is the use of HTML tags, the use of HTML tree structure, so that the organization of multiple components more convenient and clear.