這篇文章為大家帶來了關於前端開發彈窗的相關知識，其中主要介紹了前端開發工程師如何快捷高效的開發彈窗，感興趣的朋友，下面一起來看一下吧，希望對大家有幫助。
身為前端開發工程師，開發各種彈跳窗是家常便飯，但如何快速且有效率、風格統一是一個問題。
在現今前端技術堆疊都是 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.then
showTestModal({
title: 'Test Modal',
})
.then((response) => {
console.log('response: ', response)
})
.catch((error) => {
console.log('error: ', error)
})
// use await
const res = await showTestModal({
title: 'Test Modal',
})
console.log('res: ', res)
// do something here這是尤雨溪的觀點，支持狀態驅動：
還有一些支援指令式的網友：
截取片段：
對使用者來說，他只需要專注於他想展現的東西，展現的規則，而不需要額外的專注於彈窗顯隱這樣的無關邏輯--呼叫本身就是要顯示嘛。
改成命令式的調用，使用者就不需要去引入元件，掛載元件，聲明回調，打斷邏輯流，可以只專注於自己的資料。
callbackResolve和 callbackReject兩個 props, 依賴來源不清晰，帶來了新的心智負擔。暫時沒好的思路處理，歡迎 PR。 開發彈窗時，你會比較願意使用狀態驅動還是指令式呢？命令式是否適合你們的團隊或專案? 歡迎試用。
## 相關教學：《web前端開發影片教學》
以上是「彈跳窗」是如何開發的？用狀態驅動還是命令式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
