什么时候抽象公共组件/基础组件/公共方法?

2019/08/08 web

什么时候抽象公共组件/基础组件/公共方法?

以前我觉得三个以上长的差不多就可以抽象成公共组件/基础组件/公共方法,在一次工作中我觉得两个就够了,因为考虑到后期的维护,每次都要改两个地方,有时候会改错或者忘记改,麻烦。如果这个时候抽象成一个公共的,改的时候只要改一个就好了。

在抽象的时候尽可能的颗粒化,一个组件只做一件事我们发现所有的 ui 组件库,基本都是一个组件做一件事。举个例子:如果两个页面长得差不多,我们就可以每一块细细分割。这样做是为了避免一种情况,两个长得差不多的页面到后期可能会变得不一样,如果整个页面是一个组件的话,我们有可能会组件就需要 v-if 去判断,如果不同的地方多了,就有很多 v-if 了,和我们最初的目的背道而驰。还有一种情况是一个组件可能会根据数据的项数进行布局,如果布局的情况少我们可以父组件传入一个参数,告诉子组件怎么展示,如果在子组件再去判断的话,有些麻烦,能通过父组件解决问题的,别去子组件(我踩了一个巨坑,子组件里面太多 v-if 到后面自己代码都看不懂了)

我们在写公共组件,基础组件的时候,因为不知道后期会需要一些什么数据要通过子组件回传给父组件,建议是把子组件知道的所有有可能会用上的数据都传出去,免得后期扩展的时候,一直去改子组件,又怕一发而动全身,结果本来很简单的一个子组件变得很复杂了。如果整个项目是一个人负责还好,如果多个人用,那就麻烦了。

在抽象公共组件/基础组件/公共方法,我们要尽可能的考虑多种情况,后期的维护。

都是平时写业务代码,然后又想偷懒,踩坑才出来的。血的教训,写了很多业务代码,虽然很多是重复性的,复制粘贴的,但是我自己觉得写这些业务代码对我来说并不是无用的。因为想偷懒会想着怎么样去抽象,当很多差不多页面功能方法的时候,会慢慢的形成自己的组件库,公共方法。

今天开始要慢慢形成自己的库,下次用的时候直接去复制粘贴,免得又写一遍,然后还有想组件的名字

附上两个常用的公共方法

class Tool {
  /**
   * 是否为空
   * @param str
   * @returns {boolean}
   */
  isNotEmpty(str) {
    if (str !== '' && str != null && typeof str !== 'undefined') {
      return true
    }
    console.warn('argument format is wrong')
    return false
  }
  /**
   * 格式化时间 dateformat
   * format(new Date()) //不传 fmt,则默认为 yyyy-MM-dd hh:mm:ss ;
   * format(new Date(), 'yyyy-MM-dd hh:mm:ss');
   * format(new Date(), 'yyyy/MM/dd hh:mm:ss');
   * format(new Date(), 'yyyy/MM/dd');
   * @param date
   * @param fmt
   * @returns {*}
   */
  formatDate(date, fmt) {
    let time = {
      'M+': date.getMonth() + 1, // 月份
      'd+': date.getDate(), // 日
      'h+': date.getHours(), // 小时
      'm+': date.getMinutes(), // 分
      's+': date.getSeconds(), // 秒
      'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
      S: date.getMilliseconds() // 毫秒
    }
    if (!this.isNotEmpty(fmt)) {
      fmt = 'yyyy-MM-dd hh:mm:ss'
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) //年份替换yyyy
    }
    for (let key in time) {
      if (new RegExp(`(${key})`).test(fmt)) {
        fmt = fmt.replace(RegExp.$1, ('' + time[key]).length > 1 ? time[key] : `0${time[key]}`)
      }
    }
    return fmt
  }
}

上面是 javaScript 的写法,有一个不太好的是如果我们传入的 datefmt 不是日期对象和字符串就报错了,顺便在附上 TypeScript 代码

class Tool {
  formatDate(date: Date, fmt: string) {
    let time: object = {
      'M+': date.getMonth() + 1, // 月份
      'd+': date.getDate(), // 日
      'h+': date.getHours(), // 小时
      'm+': date.getMinutes(), // 分
      's+': date.getSeconds(), // 秒
      'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
      S: date.getMilliseconds() // 毫秒
    }
    if (!fmt) {
      fmt = 'yyyy-MM-dd hh:mm:ss'
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) //年份替换yyyy
    }
    for (let key in time) {
      if (new RegExp(`(${key})`).test(fmt)) {
        fmt = fmt.replace(RegExp.$1, ('' + time[key]).length > 1 ? time[key] : `0${time[key]}`)
      }
    }
    return fmt
  }
}

后续会慢慢补全,同步附上 javaScriptTypeScript ,这里先占位


一名伪程序猿——sunseekers,曾被bug虐的体无完肤,却依旧待他如初恋。

如果我改过的某一个bug,吐槽过的某一个需求,写过的某一行代码

曾在你的心里荡起涟漪,那至少说明在逝去的岁月里,我们在某一刻,共同经历着一样的情愫。

有时候,虽然素未谋面。却已相识很久,很微妙也很知足。


如果你喜欢我写过的某一个文字,请支持我,鼓励我,你的鼓励是我最大的动力来源

当然恰好你也喜欢我的话,我们可以互相关注,相互学习的哟!

sunseekers

Search

    Table of Contents