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.频繁访问数据库或文件的对象
