[JavaScript知识库]Vue开发中关于接口的策略模式

定义一个默认接口实现 defaultSearcher.js?

// 默认接口实现 defaultSearcher.js

class DefaultSearcher {
  async searchByKeyword () {
    return await fetch(api.user.queryDefaultUser, {}) // 默认实现
  }

  static _singleton_ = null

  static get singleton () {
    const _this = this
    return _this._singleton_ || (
      _this._singleton_ = new ThisUserSelect()
    )
  }
}
export {
  DefaultSearcher
}

定义一个基础组件 UserSelect

// 基础组件 UserSelect

import { DefaultSearcher } from './defaultSearcher'

export default {
  props: {
   searcher: {
    type: Object,
    default: () => DefaultSearcher.singleton
   },  
  },
  methods: {
    async fetchUserList () {
      await this.searcher.searchByKeyword()
    }
  }
}

调用这个基础组件

<UserSelect></UserSelect>

这里定义一个基础组件UserSelect只负责自己业务不涉及接口调用，所有的接口调用由DefaultSearcher这个默认实现类以及他的子类来提供数据来源包括对数据的处理，如果没有传searcher就会调用默认的实现，其他组件也可以有自己的实现，举个栗子：

定义一个自定义的接口实现?customSearcher.js

// customSearcher.js

import { DefaultSearcher } from './defaultSearcher'

class CustomSearcher extends DefaultSearcher {
  async searchByKeyword () {
    return await fetch(api.user.queryCustomUser, {}) // 自定义接口
  }
}

export {
  CustomSearcher
}

import { CustomSearcher } from './customSearcher'

export default {
  data () {
    return {
      customSearcher: {}
    }
  },
  beforeCreate () {
    this.customSearcher = CustomSearcher.singleton
  }
}

?调用这个基础组件并传入自定义的接口实现

<UserSelect :searcher="customSearcher"></UserSelect>

以上策略模式在进行组件封装上会提供很大的帮助，并且无论接口怎么变化扩展起来都会很方便。