vue封裝一個通過API形式調用的組件 (單例模式思路）

文件結構

├── src
    └── assets  項目靜態資源
        ├── logo.png  圖片資源
    ├── components  業務組件
        ├── file  組件
          ├── file.js 
          ├── file.vue 
          └── index.js
    ├── view  頁面文件
        └── home.vue

$file實現步驟

• 聲明一個實例 Instance
• 然后將聲明的實例掛載函數$mount()上
• 獲取Vue實例關聯的DOM元素 然后將獲取的DOM結構掛載到body上

file.vue

<template>
  <div class="preview" v-if="visible">
    <div class="preview_mask" @click="handleClose" />
    <div class="content">
      <img :src="src" alt />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      src: '',
      visible:false,
    }
  },
  props: {
    fileType: {
      type: String,
      default: 'img',
    },
    fileSrc: {
      type: String,
      default: '',
    },
  },
  mounted() {
    this.showView()
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    showView() {
      if (!this.fileSrc) {
        const message =
          this.fileType === 'img' ? '暫無相關影像信息' : '暫無相關文件'
        alert(message)
        return
      }
      if (this.fileType === 'img') {
        this.src = this.fileSrc
         this.visible = true
      } else {
        window.open(this.fileSrc)
      }
    },
  },
  // computed: {
  //   list() {
  //     return this.url ? [this.url] : []
  //   },
  // },
}
</script>
<style lang="less" scoped>
.preview {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  .preview_mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(55, 55, 55, 0.6);
    cursor: pointer;
  }
  .content {
    max-width: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    img {
      max-width: 1000px;
    }
  }
}
</style>

file.js

import File from './file.vue'
import Vue from 'vue'

File.newInstance = properties => {
  const props = properties || {}
  const Instance = new Vue({
    data: props,
    render(h) {
      return h(File,{ props })
    }
  })

  const component = Instance.$mount()
  document.body.appendChild(component.$el)
}
export default File

index.js 封裝api

import File from './file.js'

let fileInstance

function getFileInstance (props) {
  fileInstance = fileInstance || File.newInstance(props)
  return fileInstance
}


function file(props) {
  getFileInstance(props)
}

export default file

main.js

import Vue from 'vue'
import App from './App.vue'
// import Viewer from 'v-viewer'
import File from '@/components/file'  // 引入組件file
Vue.config.productionTip = false

// Vue.use(Viewer)

Vue.prototype.$File = File // 掛載到原型
new Vue({
  render: h => h(App),
}).$mount('#app')

index.vue 中使用 直接調用this.$File()

<template>
  <div>
    <button @click="handleOpen">打開文件</button>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data() {
    return {
      fileSrc: require('./assets/logo.png')
    }
  },
  methods: {
    handleOpen() {
       this.$File({ fileSrc: this.fileSrc, fileType: 'img'})
    },
  }
}
</script>

使用單例模式實現項目中通用的唯一組件，這種方式封裝成插件...開箱即用，可以根據自己的業務需求擴展

文字不夠解釋一下單例模式（這個是看的別的文字總結的）

單例模式

單例模式(Singleton)，也叫單子模式，是一種常用的軟件設計模式。在應用這個模式時，單例對象的類必須保證只有一個實例存在。許多時候整個系統只需要擁有一個的全局對象，這樣有利於我們協調系統整體的行為。比如在某個服務器程序中，該服務器的配置信息存放在一個文件中，這些配置數據由一個單例對象統一讀取，然后服務進程中的其他對象再通過這個單例對象獲取這些配置信息。這種方式簡化了在復雜環境下的配置管理

優點

• 在單例模式中，活動的單例只有一個實例，對單例類的所有實例化得到的都是相同的一個實例。這樣就 防止其它對象對自己的實例化，確保所有的對象都訪問一個實例
• 單例模式具有一定的伸縮性，類自己來控制實例化進程，類就在改變實例化進程上有相應的伸縮性
• 由於在系統內存中只存在一個對象，因此可以 節約系統資源，當 需要頻繁創建和銷毀的對象時單例模式無疑可以提高系統的性能
• 避免對共享資源的多重占用

缺點

• 不適用於變化的對象，如果同一類型的對象總是要在不同的用例場景發生變化，單例就會引起數據的錯誤，不能保存彼此的狀態
• 由於單利模式中沒有抽象層，因此單例類的擴展有很大的困難
• 單例類的職責過重，在一定程度上違背了“單一職責原則”
• 濫用單例將帶來一些負面問題，如為了節省資源將數據庫連接池對象設計為的單例類，可能會導致共享連接池對象的程序過多而出現連接池溢出；如果實例化的對象長時間不被利用，系統會認為是垃圾而被回收，這將導致對象狀態的丟失

適用場景

單例模式只允許創建一個對象，因此節省內存，加快對象訪問速度，因此對象需要被公用的場合適合使用，如多個模塊使用同一個數據源連接對象等等
1.需要頻繁實例化然后銷毀的對象。
2.創建對象時耗時過多或者耗資源過多，但又經常用到的對象。
3.有狀態的工具類對象。
4.頻繁訪問數據庫或文件的對象