本篇文章给大家带来了关于前端开发弹窗的相关知识，其中主要介绍了前端开发工程师如何快捷高效的开发弹窗，感兴趣的朋友，下面一起来看一下吧，希望对大家有帮助。
作为一名前端开发工程师，开发各种弹窗是家常便饭，但如何快捷高效、风格统一是一个问题。
状态驱动在现如今前端技术栈都是 vue、 react 的情况下，使用状态驱动是一种常用方式。比如我们页面要引入一个弹窗，点击某个按钮弹出：
<template> <div> <modal1 v-show="visible" @close="closemodal" /> <button @click="showmodal" >click</button> </div></template><script>import modal1 from './modals/modal1.vue'export default { components: { modal1 }, data() { return { visible: false } }, methods: { // 弹出弹窗 showmodal(){ this.visible = true }, // 关闭弹窗，并传回数据 closemodal(data) { this.visible = false // 拿到 data todo something } }}
以上有一个问题，控制弹窗显隐的变量、显示弹窗的逻辑、关闭弹窗的回调逻辑分散在不同的地方。
假设这个页面有不止一个弹窗，那么这样写：
<template> <div> <modal1 v-show="visible1" @close="closemodal1" /> <modal2 v-show="visible2" @close="closemodal2" /> <modal3 v-show="visible3" @close="closemodal3" /> <button @click="showmodal1" >click</button> <button @click="showmodal2" >click</button> <button @click="showmodal3" >click</button> </div></template><script>import modal1 from './modals/modal1.vue'import modal2 from './modals/modal2.vue'import modal3 from './modals/modal3.vue'export default { components: { modal1, modal2, modal3 }, data() { return { visible1: false, visible2: false, visible3: false, } }, methods: { // 弹出弹窗 showmodal1(){ this.visible1 = true }, // 关闭弹窗，并传回数据 closemodal1(data) { this.visible1 = false // 拿到 data todo something }, showmodal2(){ this.visible2 = true }, // 关闭弹窗，并传回数据 closemodal2(data) { this.visible2 = false // 拿到 data todo something }, showmodal3(){ this.visible3 = true }, // 关闭弹窗，并传回数据 closemodal3(data) { this.visible3 = false // 拿到 data todo something }, }}
这样写起来简直不要太啰嗦。
命令式开发（函数式）我开发了 promise-modal 这个库，可以在 react 项目中 promise 函数式的开发调用弹窗。
安装npm i promise-modal
使用你的 modal 组件这样写，我们会传入 callbackresolve和 callbackreject 两个 props 到你的组件中，你需要在关闭 modal 的时候调用它们。
import react, { usestate } from 'react'import { modal, button } from 'antd'import proptypes from 'prop-types'const testmodal = (props) => { const { title, callbackresolve, callbackreject } = props const [ismodalvisible, setismodalvisible] = usestate(true) const handleok = () => { setismodalvisible(false) callbackresolve(true) } const handlecancel = () => { setismodalvisible(false) callbackreject(false) } return ( <modal destroyonclose title={title} visible={ismodalvisible} onok={handleok} oncancel={handlecancel}> <p>some contents...</p> <p>some contents...</p> </modal> )}testmodal.proptypes = { title: proptypes.string.isrequired, callbackresolve: proptypes.func.isrequired, callbackreject: proptypes.func.isrequired,}export default testmodal
把你的 modal 组件传入 create 函数
import { create } from 'promise-modal'import testmodal from './testmodal'// 如果你使用 class 组件export default (data) => create(testmodal, data)// 如果你使用函数式组件和 hooks，你必须创建一个自定义 hooks 返回export const usetestmodal = () => { const showtestmodal = (data) => create(testmodal, data) return showtestmodal}
业务代码中使用 modal，像 promise 函数一样。
import { usetestmodal } from './modals/testmodal'const showtestmodal = usetestmodal()// use promise.thenshowtestmodal({ title: 'test modal',}) .then((response) => { console.log('response: ', response) }) .catch((error) => { console.log('error: ', error) })// use awaitconst res = await showtestmodal({ title: 'test modal',})console.log('res: ', res)// do something here
当然，命令式还是状态驱动开发，一直都有争议：这是尤雨溪的观点，支持状态驱动：
www.zhihu.com/question/35…
还有一些支持命令式的网友：
www.zhihu.com/question/35…
截取片段：
对于使用者来说，他只需要专注于他想展现的东西，展现的规则，而不需要额外的关注弹窗显隐这样的无关逻辑--调用本身就是要显示嘛。
改成命令式的调用，使用者就无需去引入组件，挂载组件，声明回调，打断逻辑流，可以只关注于自己的数据。
我的观点状态驱动多个弹窗类组件时，代码过于冗余。对于大型团队来说，一线业务开发人员，水平层次不去，代码风格各异，分散的状态驱动，每个人变量命名等风格都不一样，风格无法统一，导致代码杂乱，无法维护。promise 函数式使得弹窗使用者无需关心显隐等逻辑，就近原则，只有业务走到这里，弹窗该出现了，才调用对应弹窗函数。当然，这种方法，增加了弹窗开发人员的工作，但减轻了弹窗使用人员的心智负担。这个库隐式的传入了callbackresolve和 callbackreject两个 props, 依赖来源不清晰，带来了新的心智负担。暂时没好的思路处理，欢迎 pr。最后开发弹窗时，你更愿意使用状态驱动还是命令式呢？命令式是否适合你们的团队或项目? 欢迎试用。
github 地址
npm 地址
相关教程：《web前端开发视频教程》
以上就是“弹窗”是如何开发的？用状态驱动还是命令式？的详细内容。