vue

Vue代码风格

良好的代码风格更容易维护代码,虽然没有绝对的标准,但保持自己一贯的代码风格可以提高代码质量。接下来就来介绍我开发 Vue 代码的大致风格吧。

# DatePicker.vue

<template>
  <!-- 组件名字应该大写字母开头,组件最外层节点类名和组件文件名保持一致,PascalCase改成下划线 -->
  <div class="date-picker" v-click-outside="clickClose">
    <!-- 属性定义应该先定义原生属性,再定义Vue属性 -->
    <div
      class="date-picker-rel"
      ref="reference"
      @click="handleClick"
      :class="{ 'o-disabled': disabled }"
    >
      <slot name="picker">
        <VueInput
          v-model="currentDate"
          class="date-picker-input"
          :disabled="disabled"
          :placeholder="placeholder"
          :clearable="clearable"
          @on-clear="clearDate"
          @on-input="input"
          @on-blur="updateDate"
        >
          <template v-slot:suffix>
            <svg-icon
              name="date"
              class="date-picker-icon"
              :class="{ 'o-disabled': disabled, 'o-show': visible }"
            />
          </template>
        </VueInput>
      </slot>
    </div>
    <transition name="fade">
      <div
        class="date-picker-popper"
        :style="styles"
        ref="popper"
        v-show="visible && !disabled"
      >
        <DateTable
          :selectedDate="formatedDate"
          :isRange="isRange"
          :visible="visible"
          @select="selectDate"
        />
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
/**
 * 模块定义:
 * 1. 先第三方后自定义
 * 2. 除非是组件内部私有模块,否则全部使用 @ 绝对路径引用
 * 3. 按需引用
 */
import { Component, Mixins, Prop, Watch } from 'vue-property-decorator';
// @ts-ignore
import { directive as clickOutside } from 'v-click-outside-x';
import Input from '@/components/input';
import PopperMixin from '@/mixins/popper';
import dateUtils from '@/utils/date';
import DateTable from './DateTable.vue';
import { namespace } from 'vuex-class';

const Info = namespace('information');

@Component({
  directives: {
    clickOutside
  },
  components: {
    DateTable,
    VueInput: Input
  },
  provide() {
    return {
      picker: this
    };
  }
})
// 类名和组件名保持一致,方便调试
export default class DatePicker extends Mixins(PopperMixin) {
  /**
   * 属性定义区域
   */
  @Prop() readonly value!: Date | null | Array<Date | null>;
  @Prop({ default: false }) readonly disabled!: boolean;
  @Prop({ default: false, type: Boolean }) readonly clearable!: boolean;
  @Prop({ default: '' }) readonly placeholder!: string;
  /**
   * State映射区域,定义顺序是: State Getter Action Mutation
   */
  @Info.State notifications!: Array<IAnnouncement>;

  /**
   * data定义区域
   */
  currentDate = '';
  updateByInput = false;

  /**
   * computed区域, 如果同时有 get 和 set 记得配对写一起
   */
  get formatedDate(): Array<Date | null> {
    if (Array.isArray(this.value)) {
      return this.value;
    } else {
      return [this.value];
    }
  }

  get isRange() {
    return Array.isArray(this.value);
  }

  /**
   * watch区域, 函数名 on + 属性名 + Changed
   */
  @Watch('value', { immediate: true })
  onValueChanged() {
    this.currentDate = dateUtils.formatDate(this.value);
  }

  /**
   * 生命周期函数
   * beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate ->
   * updated -> activated -> deactivated -> beforeDestroy -> destroyed -> errorCaptured
   */
  created() {
    // noop
  }

  /**
   * methods 区域
   */
  clickClose() {
    if (this.visible && !this.disabled) {
      this.closePopper();
    }
  }

  handleClick() {
    if (!this.disabled) {
      if (this.visible) {
        this.closePopper();
      } else {
        this.showPopper();
      }
    }
  }

  clearDate() {
    if (this.isRange) {
      this.$emit('input', [null, null]);
    } else {
      this.$emit('input', null);
    }
  }

  input() {
    this.updateByInput = true;
  }

  updateDate() {
    if (this.updateByInput) {
      if (this.isRange) {
        const dates = this.currentDate.split(' - ');
        if (dates.length > 1) {
          const [start, end] = dates;
          const startDate = dateUtils.parseDate(start);
          const endDate = dateUtils.parseDate(end);
          if (
            !Number.isNaN(startDate.getTime()) &&
            !Number.isNaN(endDate.getTime())
          ) {
            this.$emit(
              'input',
              [startDate, endDate].sort((s, e) => {
                return s.getTime() - e.getTime();
              })
            );
          } else {
            this.$emit('input', this.value);
            this.currentDate = dateUtils.formatDate(this.value);
          }
        }
      } else {
        const startDate = new Date(this.currentDate);
        if (!Number.isNaN(startDate.getTime())) {
          this.$emit('input', startDate);
        } else {
          this.$emit('input', this.value);
          this.currentDate = dateUtils.formatDate(this.value);
        }
      }
      this.updateByInput = false;
    }
  }

  selectDate(date: Date | Array<Date>) {
    this.currentDate = dateUtils.formatDate(date);
    this.$emit('input', date);
    this.clickClose();
  }
}
</script>
<style lang="scss">
.date-picker {
  display: block;
  /**
   * CSS书写顺序
   * 以 Formatting Model (布局方式,位置) -> Box Model (尺寸) -> Typographic (文本相关) -> Visual (视觉效果)
   * 的顺序书写,可以提高代码的可读性。
   * Formatting Model 相关属性包括: position, top, right, bottom, left, float, display, overflow 等
   * Box Model 相关属性包括: border, margin, padding, width, height 等
   * Typographic 相关属性包括: font, line-height, text-align, word-wrap 等
   * Visual 相关属性包括: background, color, transition, list-style 等
   * 如果有 content 属性, 应该放在最前面。
   */

  &-popper {
    width: 272px;
  }
}
</style>
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226

# 总结

良好的代码风格可以提高代码的可读性,建议大家都保持一致的风格,方便团队合作。

# 参考

Organizing your CSS (opens new window)

vue实现datepicker组件

前端组件化的今天,选择日期组件算是最复杂的一个了吧。我们需要考虑日期显示的多语言,弹框的显示位置,以及日期月份的计算。

# 日期相关计算

计算每个月的天数,这个是不变的。一三五七八十腊,三十一天永不差;四六九冬三十整,惟有二月二十八,闰年还要把一日加。

function getDayCountOfMonth(year: number, month: number) {
  if (month === 3 || month === 5 || month === 8 || month === 10) {
    return 30;
  }

  if (month === 1) {
    if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
      return 29;
    } else {
      return 28;
    }
  }

  return 31;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

计算每个月的 1 号是周几:

function getFirstDayOfMonth(date: Date) {
  const temp = new Date(date.getTime());
  temp.setDate(1);
  return temp.getDay();
}
1
2
3
4
5

其他计算函数可以去看完整代码date.ts (opens new window)

# 弹窗定位相关

点击日期输入框,需要弹出下拉菜单,下拉菜单位置的计算并不简单,需要考虑到浏览器的窗口,如果输入框在下方,需要在上方弹出,如果输入框在上方,需要在下方弹出。 并且用户滑动到可视范围以外的话,还要可以隐藏。所以我们这里引用了一个比较成熟的第三方库来解决这个问题。 popperjs (opens new window) 这个库可以帮我们解决上面的问题,节约开发的成本。

# 多语言支持

日期选择组件,是为数不多需要做多语言支持的组件。因为我们要显示月份和每周的名字。就不得不做多语言处理了。目前我做的 demo 里面包含了三种语言的支持。

# 总结

日期选择组件,常见的需求有单日期选择和日期范围选择。优秀的组件需要同时满足这两个需求。并且尽量保证代码的简洁性。为此,我在 Github 写了一个 demo 库,希望可以给大家参考。

vue-datepicker (opens new window)

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组件。如果我们使用$parentel-option组件中访问el-select组件的话,二次封装的情况下就会出错。 因为el-option的父组件不再是el-select,而是styled-el-option。正确的数据访问方式是使用provideinject

# 子组件访问父组件

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

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)