前端组件化开发

发表于

什么是组件化开发

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

怎么设计一个组件

单一

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

与业务逻辑解耦

一个组件应该是纯粹,不参杂业务逻辑的,当涉及到业务时,如日期选择组件,产品要求日期小于当日的不可以选择,否则弹出提示框提示用户,这是我们就应该通过传入的配置参数,来进行判断,如果开启不能选择小于当前日期配置的话,当用户点击不符合要求的日期时,通过组件事件传递,将该事件告知父组件,由父组件进行业务逻辑的处理。

可配置

在一开始设计组件的时候就应该结合业务需求考虑哪些功能应该做成可配置式的,如干警端src/components/noResultComponent(用于空数据时的展示),默认的文案是暂无数据,但是在有时候刚进入页面时,此时网络正在请求数据,页面此时用暂无数据就不太合适,这时候可以传正在加载来告知用户,此时正在请求数据过程中请等待。

属性值的检验

1.传入属性是否合法
2.属性是否必传

在wepy中进行类型检查:

1
2
3
4
5
6
props = {
        text: {
          type: String,
          default: '正在加载'
        }
      }

Vue中类型检查

1
2
3
4
5
6
7
props = {
        someprop: {
          type: String,
          default: 'someText',
          required: true
        }
      }

React中进行类型检查

1
2
3
4
5
6
7
8
9
10
import React from 'react'
import PropTypes from 'prop-types'
class MyComponent extends React.Component {
  render() {
    // ... do things with the props
  }
}
MyComponent.propTypes = {
    someProps:PropTypes.string.isRequired
}

组件生命周期

初始化阶段,读取属性值,并进行处理

展示阶段,监听属性变化,进行相应逻辑处理

组件销毁阶段,及时移除组件中对整个系统产生副作用的操作,如addEventListener,setInterval等等。

在小程序中定义组件生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Component({
  lifetimes: {
    attached() {
      // 在组件实例进入页面节点树时执行
    },
    detached() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached() {
    // 在组件实例进入页面节点树时执行
  },
  detached() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

事件传递

在wepy中,wepy.component基类提供$broadcast、$emit、$invoke三个方法用于组件之间的通信和交互
在Vue中,子组件通过this.$emit发送,父组件只需监听该发送的事件即可
在’React’中,父组件可以使用 props 向子组件传值，而子组件向父组件传值，需要在父组件内定义函数并通过属性传递给子组件，在子组件内通过调用该属性对应的函数，传入参数，传递给父组件内的函数，并在父组件的该函数中做逻辑的处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//子组件
class ChildComponent extends React.Components {
  render() {
    return (
      <button onClick={
        () => {
          this.props.clickHandler('This is a click')
        }
      }></button>
    )
  }
}
//父组件
import ChildComponent from './child-component'

class ParentComponent extends React.Components {
  clickHandler(message) {
    console.log(message)
  }

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