vue方法调用失败后多次调用_使用 VUE 开发前端 SDK（vue-cli 构建库）

最新推荐文章于 2024-05-31 17:35:31 发布

weixin_39626369

最新推荐文章于 2024-05-31 17:35:31 发布

阅读量384

点赞数

文章标签： vue方法调用失败后多次调用

关键词：SDK，VUE，单例模式，代码复用

本文旨在分享一个前端 sdk 的开发方式。即使用 vue 直接开发

1.项目背景

需求描述：

1.开发一个集团通用 SSO 单点登录页面，大致如下图：

2.开发一个对应 sdk，给接入方使用，页面效果和 web 保持一致。如下图：

SDK 需求：
提供调用方式给用户，可以传递参数，调用方法，直接生成登录弹框和背景半透明的蒙层
在弹框成功登录以后，通知用户
封装好 sdk，永远只能有一个弹框。

需求分析：

因为公司主技术栈是 vue，按照传统的思路是分成两个项目来写，一个写 web 站点，一个写 sdk。然后调试保持 UI 和动画效果一致即可。

这样做的缺点显而易见。首先业务逻辑的代码很难复用。web 站点的业务逻辑是使用 vue 的，sdk 则不一定了。一样的逻辑写两遍，很难受~最重要的是 C 端的代码，UI 和动画效果要求比较高~这个也要调试两遍的话，真的要疯~除了外观看起来一样，基本上是完全不同的两个项目了，代码复用率无限趋近于 0~

所以重点来了，能不能我们只写一套代码，然后通过工具，编译打包出两个产出：一个 web 站，一个 sdk 库文件。这样代码是一套，各种效果只需要调试一遍即可。额外的工作量是，需要对两种编译环境做一些额外的处理工作

结果就是还真有~vue-cli 构建一个库

2.实际操作

使用 vue 开发 web 站点，比较常规，就不详细介绍了。接下来我重点分享一下实际操作 sdk 的过程

1.首先，package.json 文件添加命令

"lib": "vue-cli-service build --mode u2lib --target lib --inline-vue --name Login src/Login.js",

命令解读：

1.为什么入口文件的选择 js 而不是 vue。
默认是 src/App.vue。基于我们的需求。显然使用 js 作为入口比较好。这样方便我们暴露给用户一些方法去直接调用。
2.为什么添加 --inline-vue 命令因为最终的产出是一个 sdk 文件。这就需要把 vue 打包到 sdk 中，需要添加--inline-vue 命令
3.--mode u2lib，添加一套.env.u2lib 的编译环境。这样方便我们添加一些全局的编译变量，方便做 web 和 sdk 的特殊处理

2.我们来看看入口的 js 文件（这才是重点）

import Vue from 'vue'
// lib模式下，vue的主入口文件
import Lib from './Lib.vue'

Vue.config.productionTip = false

class Login {
    constructor(option, cb) {
        if (!Login.instance) {
            Login.renderDom(option, cb)
            Login.instance = this
        }
        return Login.instance
    }
    // 渲染vue
    static renderDom(option, cb) {
        // 先判断参数
        if (如果option缺点必要的参数则提示) {
            console.log('缺少参数')
            return
        }
        // 1.创建挂载节点
        const outer = document.createElement('div')
        outer.setAttribute('id', 'Login')
        document.body.appendChild(outer)
        // 2.vue挂载
        new Vue({
            render: h => h(Lib)
        }).$mount('#Login')
        // 3.传入的参数绑定到全局，方便统一调用
        Vue.prototype.$keyA = option.keyA
        Vue.prototype.$keyB = option.keyB
        // 4.绑定成功的回调，完成弹框功能后，通知用户
        Vue.prototype.$successCb = cb
    }
    // 初始化
    static init(option, cb) {
        if (!this.instance) {
            this.instance = new Login(option, cb)
        }
        return this.instance
    }
}

export default Login

文件都有比较详细的注释，

为什么要使用单例模式，防止用户多次调用，页面上出现多个弹框，
使用单例模式后，有个问题，如果关闭了弹框，基于单例模式是没办法再次调用，出现弹框的？这就需要在关闭的地方。手动的 Login.instance = null

3.最后的效果

1.产出文件：

web 模式就是正常的站点模式。
sdk 模式，最后的产出有 6 个文件，Login.common.js,Login.umd.js,Login.umd.min.js 和三个文件对应的 giz 文件。（css 已经强制内联了）

2.sdk 的使用方式

const l = Login.init({一堆参数}, () => {
    console.log('完成了弹窗功能~~')
})
// 或者
const l = new Login({一堆参数}, () => {
    console.log('完成了弹窗功能~~')
})

4.总结分析

使用 vue 来开发一个 sdk，比较新颖。放弃了传统开发 sdk 的方式（需要引入模板）最终 sdk 体积也不小
优点：一套代码，两种产出，方便快捷。UI 和动画效果绝对一致
缺点：sdk 的体积比较难控制，我在仅使用 vue，放弃 vue-router，UI 库（ele 或者 antd），体积依旧干到了 180KB 左右。当然体积还有持续优化的空间，但是不会太大。
后续优化思路：图片全部使用 CDN 外链，大概会减少 20kb 左右的体积，去掉多余的依赖包（目前根据--report 分析结果来看，基本上删无可删了）

感谢观看，如有错误，欢迎拍砖！谢！欢迎留言交流