「彈跳窗」是如何開發的？用狀態驅動還是命令式？

這篇文章為大家帶來了關於前端開發彈窗的相關知識，其中主要介紹了前端開發工程師如何快捷高效的開發彈窗，感興趣的朋友，下面一起來看一下吧，希望對大家有幫助。

身為前端開發工程師，開發各種彈跳窗是家常便飯，但如何快速且有效率、風格統一是一個問題。

狀態驅動

在現今前端技術堆疊都是 Vue、 React 的情況下，使用狀態驅動是常用方式。例如我們頁面要引入一個彈窗，點擊某個按鈕彈出：

<template>
	<div>
		<Modal1 v-show="visible" @close="closeModal" />
		<button @click="showModal" >click</button>
	</div>
</template>

<script>
import Modal1 from &#39;./modals/Modal1.vue&#39;
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 &#39;./modals/Modal1.vue&#39;
import Modal2 from &#39;./modals/Modal2.vue&#39;
import Modal3 from &#39;./modals/Modal3.vue&#39;

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

當然，命令式還是狀態驅動開發，一直都有爭議：

這是尤雨溪的觀點，支持狀態驅動：

www.zhihu.com/question/35…

還有一些支援指令式的網友：

www.zhihu.com/question /35…

截取片段：

對使用者來說，他只需要專注於他想展現的東西，展現的規則，而不需要額外的專注於彈窗顯隱這樣的無關邏輯--呼叫本身就是要顯示嘛。

改成命令式的調用，使用者就不需要去引入元件，掛載元件，聲明回調，打斷邏輯流，可以只專注於自己的資料。

我的觀點

• 狀態驅動多個彈窗類別元件時，程式碼過於冗餘。
• 對於大型團隊來說，一線業務開發人員，水平層次不去，程式碼風格各異，分散的狀態驅動，每個人變數命名等風格都不一樣，風格無法統一，導致程式碼雜亂，無法維護。
• Promise 函數式使得彈跳視窗使用者無需關心顯隱等邏輯，就近原則，只有業務走到這裡，彈跳窗該出現了，才呼叫對應彈窗函數。
• 當然，這種方法，增加了彈窗開發人員的工作，但減輕了彈跳窗使用人員的心智負擔。
• 這個函式庫隱式的傳入了callbackResolve和 callbackReject兩個 props, 依賴來源不清晰，帶來了新的心智負擔。暫時沒好的思路處理，歡迎 PR。

最後

開發彈窗時，你會比較願意使用狀態驅動還是指令式呢？命令式是否適合你們的團隊或專案? 歡迎試用。

GitHub 位址

npm 位址

## 相關教學：《

web前端開發影片教學》

#

以上是「彈跳窗」是如何開發的？用狀態驅動還是命令式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！