这几年,从陷入 “React、Vue 和 Angular 哪个性能好?”的争论,到现在的各个框架(库)的生态越来越完善,讨论性能差距已经没有价值了。而国内的前端娱乐圈,最火的就是 React 和 Vue 了,而 Angular 由于历史原因,在国内的占有率确实不高。

随着前端生态 jade、less、scss、typeScript 和 webpack 等工具的完善,前端的组件化开发效率已经有了很大的提升。

特别是像 Ant Design、Element UI、iView 这些优秀的前端组件库的流行,更是将组件化开发发挥到了极致。开发一个前端页面已经变得非常的高效,特别是在做管理系统的页面,脚手架搭建、添加依赖包、配置路由、创建页面、引入组件,很快的就可以构建一个系统。

如果你需要 SEO,React 和 Vue 的 SSR 框架 Next.js 和 Nuxt.js 更是提供了开箱即用的集成方案,也使开发“同构页面系统“(Google It)变得更加简单。

下面切入正题,深入探讨下前端组件。

什么是前端组件化开发

首先,我们要搞明白什么是前端组件化开发?

你应该遇到过,将一个页面的几百行,甚至上千行的代码逻辑写在一个 js 文件中的情况。通常这种代码都很难读下去,更别说要维护起来,添加新功能,移除一些老功能了,因为你不知道改动一个地方,会不会出现意想不到的 bug。

这个时候,你就需要利用组件化开发,拆分功能,封装组件,单独维护。//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力现代化前端框架通常都是实现 MVVM 的方案,数据层(M)和 视图层(V)相互连接,同时变更,使得页面交互保持高度的一致性。

如果你熟悉 Java,Python,Go 等后端开发语言,你应该对 package (包)的概念很熟悉,前端的组件化在概念上与后端的 package 很相似,只不过前端的组件涉及到更多的是展示和交互方面的逻辑。当然,前端组件与后端架构的微服务概念类似,可以理解成一个组件就是一个服务组件,只提供某个服务。

前端组件化开发,就是将页面的某一部分独立出来,将这一部分的 数据层(M)、视图层(V)和 控制层(C)用黑盒的形式全部封装到一个组件内,暴露出一些开箱即用的函数和属性供外部组件调用。

一个前端组件,包含了 HTML、CSS、JavaScript,包含了组件的模板、样式和交互等内容,基本上涵盖了组件的所有的内容,外部只要按照组件设定的属性、函数及事件处理等进行调用即可,完全不用考虑组件的内部实现逻辑,对外部来说,组件是一个完全的黑盒。

组件可以多层封装,通过调用多个小组件,最后封装成一个大组件,供外部调用。比如:一个 Input 输入框 是一个组件,一个 Select下拉选择框 也是一个组件,可以用 form 在这两个组件上包装一层,就是一个 Form 的组件

有一些比较常用的前端组件,像 vue-router,vuex,react-router,redux,mobx 等,都是基于 Vue 和 React 的组件,它们只专注于 路由、状态存储 的工作,并且把这些事情做好。

只要利用好组件化开发,开发一个页面,就像是搭积木一样,将各个组件拼接到一起,最后融合到一起,就是一个完整的系统。

组件化开发的优点

说到底,前端的组件化开发,可以很大程度上降低系统各个功能的耦合性,并且提高了功能内部的聚合性。这对前端工程化及降低代码的维护来说,是有很大的好处的。

耦合性的降低,提高了系统的伸展性,降低了开发的复杂度,提升开发效率,降低开发成本。//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力组件封装的好,加班也少了,bug 也少了,就有更多时间喝喝咖啡、打打农药了。:)

怎么设计一个组件

既然前端组件化开发这么好,那要怎么设计一个好的组件呢?

经过多次实践,总结了一些组件设计时的要点。

专一

要想设计一个好的组件,组件也需要专一

设计组件要遵循一个原则:一个组件只专注做一件事,且把这件事做好

一个功能如果可以拆分成多个功能点,那就可以将每个功能点封装成一个组件,当然也不是组件的颗粒度越小越好,只要将一个组件内的功能和逻辑控制在一个可控的范围内即可。

举个例子。页面上有一个 Table 列表和一个分页控件,就可以将 Table 封装为一个组件,分页控件 封装成一个组件,最后再把 Table组件 和 分页组件 封装成一个组件。Table 组件还可以再拆分成多个 table-column 组件,及展示逻辑等。

可配置性

一个组件,要明确它的输入和输出分别是什么。

组件除了要展示默认的内容,还需要做一些动态的适配,比如:一个组件内有一段文本,一个图片和一个按钮。那么字体的颜色、图片的规则、按钮的位置、按钮点击事件的处理逻辑等,都是可以做成可配置的。

要做可配置性,最基本的方式是通过属性向组件传递配置的值,而在组件初始化的声明周期内,通过读取属性的值做出对应的显示修改。还有一些方法,通过调用组件暴露出来的函数,向函数传递有效的值;修改全局 CSS样式;向组件传递特定事件,并在组件内监听该事件来执行函数等。

在做可配置性时,为了让组件更加健壮,保证组件接收到的是有效的属性、函数接收到的是有效的参数,需要做一些校验。

一. 属性的值的校验

对属性的值进行校验,一般要考虑以下几个方面。

1.属性值的类型是否是有效的。如果某个属性要求传递一个数组,那么传递过来的值不是数组时,就要抛出异常,并给出对应的提示。

2.属性是否是必填的。有的属性的值,是组件内不可缺少的时,就要是必填的,在组件初始化时要做是否传递的检查,如果没有传递,则需要抛出异常,并给出相应的提示。如果属性不是必填的,可以设定一个默认值,当属性没有被设置时,就使用默认值。

得益于 React、Vue 内部实现的属性检查,且这些属性检查会在组件初始化阶段默认执行,你可以很容易的给组件设置属性的检查。React 中可以使用 React.PropTypes 进行类型检查设置,Vue 中只需要给组件设置 props 即可。//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力在 React 中进行类型检查:

// title.jsx (Title组件)
  import React, { Component, PropTypes } from 'react';

  export default class Title extends Component {
    constructor(props) {
      super(props);
    }

    static propTypes = {
      title: PropTypes.string.isRequired
    }

    render() {
      const { title } = this.props;

      return (
        <p>{ title }</p>
      )
    }
  }

在 Vue 中进行类型检查:

// title.vue (Title组件)
  <template>
    <p>{{ title }}</p>
  </template>

  <script>
    export default {
      props: {
        title: {
          type: String,
          required: true
        }
      }
    }
  </script>

二. 函数的参数的校验

函数的参数校验,只要按照传统的方法进行校验即可。在函数内部顶部判断参数的值和类型,如果不满足要求,则抛出异常,并给出相应的提示。

判断一个函数的第一个必填,且为 String 格式

// ES6 语法
  changeTitle(title) {
    if (typeof title !== 'string') {
      throw new Error('必须传入一个 title,才能修改 title。')
    }
    // 满足条件,可以进行修改
    this.title = title   // vue 语法
    this.setState({      // react 语法,修改state的值
      title
    })
  } //在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力

##生命周期

一个组件,需要明确知道在生命周期的不同阶段做该做的事。

初始化阶段,读取属性的值,如果需要做数据和逻辑处理的话,在这个阶段进行。

属性值变化时,如果属性发生变化,且需要对变化后的数据进行处理的话,在这个阶段进行处理。

组件销毁阶段,如果组件已经创建了一些可能会对系统产生一些副作用的东西,可以在这个阶段进行清除。比如 timeInterval、timeout 等。

如果组件在渲染的时候报错,需要展示错误信息。React v16 中提供了 componentDidCatch 生命周期函数,Vue v2.5 中提供了 errorCaptured 的钩子函数。

React 中提供了一些生命周期函数:componentWillMount,componentDidMount,componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,componentDidUpdate,render,componentWillUnmount,componentDidCatch(React v16)。

Vue 中提供了一些生命周期函数:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed,errorCapture,errorCaptured(Vue v2.5)。

每个生命周期的具体用法,请参考官方详细文档。

##事件传递

Vue 中传递事件很简单,只需要在子组件内使用 this.$emit(‘event1’) 即可向外传递一个事件 event1,在父组件调用该子组件时,只需要监听 event1 事件,并给出对应事件处理逻辑即可。

Vue中事件传递

Vue子组件定义 child-component.vue

Vue.component('child-component', {
  methods: {
    emitEvent() {
      this.$emit('event1', 'This is a event.')
    }
  },
  mounted() {
    this.emitEvent()
  }
}) //在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力

Vue 父组件调用子组件

<template>
  <div>
    <child-component @event1="eventHandler" />
  </div>
</template>

<script>
  import childComponent from './child-component'
  export default {
    components: {
      childComponent
    },
    methods: {
      eventHandler(event) {
        console.log(event)
      }
    }
  }
</script>

而在 React 中,官方没有给出组件间的事件传递解决方案,这也是 React 中比较坑的一点。不过,还是可以使用其他方式来实现。

React 中,父组件可以使用 props 向子组件传值,而子组件向父组件传值,需要在父组件内定义函数并通过属性传递给子组件,在子组件内通过调用该属性对应的函数,传入参数,传递给父组件内的函数,并在父组件的该函数中做逻辑的处理。

React 子组件定义 child-component.js

class ChildComponent extends React.Components {
  render() {
    return (
      <button onClick={
        () => {
          this.props.clickHandler('This is a click')
        }
      }></button>
    )
  }
}

React 父组件调用子组件

import ChildComponent from './child-component'
//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力
class ParentComponent extends React.Components {
  clickHandler(message) {
    console.log(message)
  }

  render() {
    return (
      <child-component
        clickHandler={ this.clickHandler.bind(this) }
        />
    )
  }
}

前端组件化开发的实践,是一个很长的过程,坚持并持续优化,带动系统整体的优化。

结语

感谢您的观看,如有不足之处,欢迎批评指正。

03-30 21:44