1.组件和插件的区别与联系
区别
- 组件的使用频率往往大于插件
- 组件的作用范围往往小于插件
联系
- 插件可以封装组件,组件可以暴露数据给插件
这里不做过多阐述,有兴趣可以参考下劳卜大大的这编文章,写的很通俗易懂。
2.实现插件的必备因素
基础
你需要清楚的知道vue的一些高阶知识点以及相关内容,比如
- Vue.extend构造器
- $mount手动挂载实例
- mixin混合注入
- 父子组件传参、跨级组件传参
- 理解Vue构造函数及prototype原形对象
- npm官网注册账号
- webpack打包
- ...
技巧
以下这个技巧是今天开发的时候悟出来的,目测很有用:
别着急开发,先想着如何在开发中使用你的插件
什么意思?顺着我的思路捋下去
因为我想实现一个全局toast插件,大概用法
this.$toast('那个男人')
// todo
复制代码
光弹出文案不行,应该有一个控制弹出方向的变量
this.$toast('那个男人',{
position:'topCenter'
})
复制代码
全局toast的状态应该有多种,比如常见的成功
、错误
、警告
、普通
...
// 成功success
// 错误error
// 警告warning
// 普通info
this.$toast('那个男人',{
position:'topCenter',
type:'success'
})
复制代码
应该有一个时间变量去控制多长时间自动消失toast
this.$toast('那个男人',{
position:'topCenter',
type:'success',
closeTime: 3 // 控制3秒后消失toast
})
复制代码
会不会存在一种业务场景,我们不需要自动消失toast
this.$toast('那个男人',{
position:'topCenter',
type:'success',
closeTime: 3 // 控制3秒后消失toast
autoClose: false
})
复制代码
如果我想在toast结束后,触发一些回调动作,比如删除成功toast后刷新列表页面
this.$toast('那个男人',{
position:'topCenter',
type:'success',
closeTime: 3 // 控制3秒后消失toast
autoClose: true,
callback () {
...
}
})
复制代码
toast的内容,可能会很长,因此应该有两个变量分别控制toast宽度和高度
this.$toast('那个男人',{
position:'topCenter',
type:'success',
closeTime: 3 // 控制3秒后消失toast
autoClose: true,
callback () {
...
},
width:300,
height:80
})
复制代码
至此,基础功能应该都涵盖了,这个时候你要去考虑一些内建的问题
- 这么多配置项,我作为一个使用者,都关心吗?或者说,都需要配置吗?
- 针对不同的状态(success/error/warning/info),肯定要用不同的颜色区分,以及使用不同的图标,他们之间有什么关系吗?
配置项多应该怎么解决-默认值
默认给个type呗,比如我的项目中默认的type是info,当我在使用的时候,没有传入type时,默认为info
因为大部分的toast场景都是短暂的停留在页面,所以autoClose设置为true
又因为大部分的toast文案比较短,所以我的默认toast长宽设置为300、80应该足够了
...
以上默认配置,都可以在使用的时候,传入参数覆盖默认参数
针对不同的状态,toast图标、颜色、标题之间有什么联系?
本地存一个map映射配置表,根据传入的type,我就可以准确的知道图标、颜色、标题应该是什么
总结几点:
- 插件对外暴露的参数应保持最少原则,聚焦使用者关注点
- 插件或组件的实现应该要基于使用场景考虑
- 开发一款组件或者插件,应该保持软件工程领域的开放封闭原则
- 一款好的插件或组件并不是一蹴而就的,往往需要后期使用过程中发现问题,加以完善
- 组件或者插件的文档一定要完善,并不是每一个使用它的人,都关心它的内部实现,他们更关心的可能仅是如何快速上手
实现
上文提到过,组件可以暴露数据给插件,对于这句话
我的理解是,组件是静态的,只是对外暴露一些参数入口props
。 插件,让我们可以动态的往其中注入一些自定义参数。具体的实现,还是在组件当中完成。
于是乎:我写了一个静态组件,通过props定义上文提到的相关变量
先看下script部分
再来看下html部分
可以看到,内部实现其实很简单,无非就是通过外部传入的props,控制内部的展示细节而已
到这里静态组件基本已经完成了(css样式代码不在这里贴了)
注意:
- props定义的时候,最好用对象的写法,作为一定的约束
- 变量名字最好做到见名知意
- class名的绑定可以充分利用vue提供的数组以及对象形式或者配合计算属性完成
静态组件怎么变成插件使用呢?
这里不再做过多阐述,vue封装插件的常用方法主要有以下四种,有疑惑的话,建议观阅vue开发插件,当然我觉得你应该还需要去了解下Vue.extend的用法,插件的实现离不开它哦。
看下关键部分:该文件也是我们后期webpack打包(build)的入口文件
该文件内容涉及到的知识点,也是开发一个vue插件最核心的内容。里面的每一行代码,都充满了杀机~
至此,关于插件实现部分基本已经全部完成。
3.如何将自己的插件上传到npm上去
这里的话,网上的教程有很多,我理解你只需要了解以下几行代码的作用,就足够了
// webpack.config.js
module.exports = {
entry: process.env.NODE_ENV === 'development' ? './src/main.js' : './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js',
libraryTarget: 'umd'
},
...
// package.json
{
"name": "mbs-toast",
"description": "a toast plugin base on Vue2",
"version": "1.0.0",
"author": "xxx <xxx88888@163.com>",
"license": "MIT",
"private": false,
"main": "dist/build.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
...
复制代码
- 这里的entry入口文件配置的意思是,开发环境时,入口文件用main.js(方便开发调试使用),打包时入口文件为index.js
- filename是打包生成文件的名字,这里是webpack-simple模版默认使用的就是build.js,没有特殊需求的话,不建议改动
- libraryTarget属性可能大家都会比较陌生,因为一般如果只在项目中使用 webpack 不需要关注这两个属性,但是如果是开发类库、插件,那么这两个属性就是必须了解的,不清楚的可以参考详解webpack中ibraryTarget属性
- package.json文件中的main字段,指定了该npm包引用的入口(记住一定要记得添加,并且文件名应与上面第二点提到的保持一致)
这里我用的模版是自己在官方webpack-simple模版的基础上做了一些定制化的,里面为了方便我平时开发,加入了scss、eslint,这样的话,后面就不用每次手动install了,有兴趣的可以看下README,定制一份属于自己的脚手架模板
在你了解了上述背景后,你只需要执行以下几步即可实现皆大欢喜
顺利的话,现在你已经可以在正式项目中,通过
npm install -S xxx 安装你的私有包了
复制代码
最后在你的入口文件注册你的插件
import toastPlugin from 'xxx'
Vue.use(toastPlugin) // 这里Vue.use的第二个参数,可以通过全局配置,做一些自定义配置,有需要的自行前往学习
复制代码
到这里,所有的一切,已尘埃落定,你可以在代码中愉快的使用了
this.$toast('尘埃落定', {
callback () {
console.log('hello world')
},
type: 'success',
// position: 'topRight',
autoClose: false
})