IceHoney IceHoney
IceHoney

frontend

Vue中组件的设计

frontend vue

Vue 中组件设计经常遇到复合组件的问题，例如下拉菜单，下拉菜单中我们不仅要实现select元素的功能，还要实现option元素的功能，这样才是一个完整的下拉菜单组件。

# 复合组件中的数据相互访问

复合组件中的数据访问是设计组件的一个重要议题，设计不好会严重影响组件的灵活性。我们拿 Element UI 的组件来举个例子：

<el-select v-model="value" placeholder="请选择">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  >
  </el-option>
</el-select>
1
2
3
4
5
6
7
8
9

这是一个经典的例子，但是实际使用过程中，我们可能会二次封装组件,例如我们需要给el-option加一些事件或者样式，那我们的代码会变成这样：

<el-select v-model="value" placeholder="请选择">
  <styled-el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  >
  </styled-el-option>
</el-select>
1
2
3
4
5
6
7
8
9

styled-el-option 是我们二次封装的组件，里面包含了el-option组件。如果我们使用$parent在el-option组件中访问el-select组件的话，二次封装的情况下就会出错。 因为el-option的父组件不再是el-select，而是styled-el-option。正确的数据访问方式是使用provide 和 inject。

# 子组件访问父组件

首先我们需要在父附件中这样定义：

provide: function () {
  return {
    'select': this
  }
}
1
2
3
4
5

然后在子组件中使用inject:

inject: ['select'];
1

这样子组件就可以访问父组件了，使用provide的好处是不用担心复合组件中的再封装问题，Vue 会自动向上查找。

# 父组件访问子组件

Vue 中并没有提供非常方便的查找子组件的功能， 所以目前的方法是在父组件中存储子组件的实例。

父组件中定义数据：

data: function () {
  return {
    options: []
  }
}
1
2
3
4
5

子组件通过inject可以访问父组件，所以：

created() {
  this.select.options.push(this);
}
1
2
3

在创建组件的时候同时传入父组件的data字段中。

# 总结

灵活的设计组件才能在实际开发中更方便的使用，一些第三方组件开发的时候没有考虑到二次封装的可能性，直接通过$parent和$children进行数据的更新。导致可用性大大降低。

# 参考

Dependency Injection (opens new window)

Vue实现双Slider

frontend vue

前端由于历史原因，基本上没有组件的概念，原生的 HTML 元素提供的功能非常简陋，所以都需要开发者自己实现或者定制组件。这次讲讲双 Slider 的实现。

# 技术选型

目前比较流行的 Vue 的组件库是Element (opens new window) 和 View UI (opens new window)。这两个组件库都使用了最常用的方法，使用div或者span，元素模拟滑动条，监听事件，并处理滑动。但是 HTML 元素本身提供了Range (opens new window)标签，我们可以修改下样式来使用，这样就避免自己直接处理事件监听，也可以减少浏览器兼容性问题。

# 样式定制化

目前针对 Range 元素的样式定制化还没有纳入 Web 标准，所以在处理起来稍微花点功夫。首先，我们需要修改默认的滑块样式。使用的 CSS 选择器是-webkit-slider-thumb (opens new window)。由于未纳入标准，需要使用浏览器前缀才行。这里我们可以借助 postcss-input-range (opens new window) 插件来完成这项工作。

# 双 Slider 实现

HTML 本身只提供了单滑块，要想实现双 Slider，只能两个叠加在一起了，并且需要自己实现 Slider 的选中范围，因为目前的 css selector 并不能达到这种效果。如何动态的控制 Slider 的显示长度呢？当然可以计算出目前的选中百分比，通过 css variables 来达到更新样式的效果。

# Slider 滑动规则

当然，我们左边的滑块不能滑过右边的滑块，这是基本常识。这里就需要监听input 事件，当超出范围的时候，强制把值重置回合法值就可以了。

# 实现效果

# 总结

能用原生 HTML 标签来解决的问题，尽量还是不要自己实现事件监听了。这样性能也会更好，兼容性上也不会太差。

React的TypeScript写法

frontend react

最近在用 React 写前端，不得不说 React 对 TypeScript 的支持比 Vue 好，Vue 的话，在组件传 Prop 的时候会丢失静态检查。

# React 组件写法

目前 React 有两种写法，一种是 Class Components，另外一种是 Function Components。这两种写法都可以，不过如何选择呢？ 个人倾向于复杂的组件需要管理生命周期或者事件响应的话使用 Class Components，简单的组件例如只是展示一个按钮或者链接。使用 Function Components。 因为 Function Components 写起来代码更短。

# Class Components

import React, { ReactNode } from 'react';

interface ButtonProps {
  disabled?: boolean;
  children: ReactNode;
}

interface ButtonStates {
  count: number;
}

class Button extends React.Component<ButtonProps, ButtonStates> {
  static defaultProps = {
    disabled: false
  };

  constructor(props: ButtonProps) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    const { disabled, children } = this.props;

    return <button disabled={disabled}>{children}</button>;
  }
}

export default Button;
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
29
30
31

上面的例子演示了如何定义属性和状态，并且设置默认属性值和初始化状态。

# Function Components

import React, { ReactNode } from 'react';

interface ButtonProps {
  disabled?: boolean;
  children: ReactNode;
}

const Button: React.FC<ButtonProps> = ({ disabled = false, children }) => {
  return <button disabled={disabled}>{children}</button>;
};

export default Button;
1
2
3
4
5
6
7
8
9
10
11
12

Function Components 不能直接传入 state 参数，需要使用 useState 函数来处理。

# 总结

React 写起来非常方便，但是条件渲染还是没有 Vue 方便。由于没有官方的 TypsScript 例子。只能自己总结一下方便以后使用了。