uniapp表单验证插件_封装vue插件，读懂这篇文章就够了

DEMO

麻不烧的Github

配合着源码，用心看完这篇文章，你便领悟了封装的精髓，麻雀虽小，五脏俱全。

前记

业务代码之外的代码，我想称之为增值代码。

什么意思？

作为一个程序员，你应该除了完成领导安排的任务，你还应该有一些自己的时间，用来“玩”一些比较有意思的事情。

当现有框架、库满足不了我们需求的时候，我们应该尝试去自己造一些工具。也正是这些你所实现的，成就了他人，造就了自己。

不信，你且想一想，他人会关心你写的具体的业务逻辑代码吗？我想他们更关心的是，你写的插件，是如何使用的吧，以及方不方便他们借此完成他们自己业务代码。

再通俗一点，他们不会记住你，但是他们会记住你的Api，因而忆起你。

还有很重要的一点，所有的技术，都是服务于业务的，否则，就是扯皮。

背景

入职新公司以来，一直忙于开发业务，过程中，多处用到了领导写的牛逼工具。说实话，内心由衷的佩服，简直就是解放生产力，放到古代，就是要被封神滴。

举个例子：

领导花了一段时间，研究出了一个自动表单生成器。之前手写一个表单配置页，加上表单验证，可能需要半天，甚至更久。

现在呢？所有的表单、样式及验证，都可以通过代码配置实现，二十分钟可能就完成了。

由此，我悟出了一个道理:

重复地做一件事，不如用心地做“一件事”。

我想，你肯定也想成为他人口中的那个男人，但整天活在自己的世界里，你可能一时并不知道该如何去做，这里我想告诉你：

成长的一个关键性因素，就是来自于模仿。

对的，你可以先尝试着去阅读下他人的代码，看看别人的实现方式，再者可以去github上溜一圈，优秀项目太多了，仿着写去呗。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

只要你想学，你就一定能学会，只不过是实现的方式好与坏而已，这些是需要后期不断完善的。

鉴于本篇文章快要跑题了，不再多述，进入正题...

正文

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 })

---

至此，基础功能应该都涵盖了，这个时候你要去考虑一些内建的问题

1. 这么多配置项，我作为一个使用者，都关心吗？或者说，都需要配置吗？
2. 针对不同的状态(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