「ポップアップ」はどのように開発されるのでしょうか?国家主導か、それとも強制か？

この記事では、フロントエンド開発のポップアップ ウィンドウに関する関連知識を主に紹介しています。興味のある方は、以下をご覧ください。それはあなたに役立ちます。

フロントエンド開発エンジニアとして、さまざまなポップアップウィンドウを開発するのは日常的ですが、それをいかに迅速かつ効率的に、かつ統一されたスタイルで開発するかが課題です。

ステート ドリブン

今日のフロントエンド テクノロジ スタックでは、Vue、React があり、ステート ドリブンを使用するのが一般的な方法です。たとえば、ページにポップアップ ウィンドウを導入したい場合は、ボタンをクリックしてポップアップします。 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

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

上記には、ポップアップ ウィンドウの表示と非表示を制御する変数に問題があります。ポップアップ ウィンドウを表示するためのロジックと、ポップアップ ウィンドウを閉じるためのコールバック ロジックが異なる場所に分散されています。

このページに複数のポップアップ ウィンドウがあると仮定して、次のように記述します:

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
}

これはあまり冗長に書くことはできません。

命令型開発 (関数型)

私は promise-modal このライブラリは React プロジェクトで 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 という 2 つのプロパティをコンポーネントに追加します。モーダルを閉じるときにこれらを呼び出す必要があります。 🎜rrreee🎜Modal コンポーネントを create 関数に渡します🎜rrreee🎜Promise 関数と同じように、ビジネス コードで Modal を使用します。 🎜rrreee🎜もちろん、命令型開発かステート駆動型開発かは常に物議を醸しています: 🎜🎜これは、ステート駆動型開発を支持する You Yuxi の視点です: 🎜

www.zhihu.com/question/35…

命令型スタイルを支持するネチズンもいます:

www.zhihu.com/question/35…

インターセプトされたスニペット:

ユーザー向けつまり、表示したいものと表示のルールだけに集中する必要があり、ポップアップ ウィンドウの表示または非表示などの無関係なロジックに特別な注意を払う必要はなく、通話自体が表示されることになります。

これを命令型呼び出しに変更することで、ユーザーはコンポーネントの導入、コンポーネントのマウント、コールバックの宣言、ロジック フローの中断を行う必要がなく、自分のデータのみに集中できます。

私の意見

• 状態が複数のポップアップコンポーネントを駆動する場合、コードは冗長すぎます。
• 大規模なチームの場合、最前線のビジネス開発者はさまざまなレベルの階層、さまざまなコード スタイル、分散状態ドライバー、および変数の命名などのスタイルを全員で統一することができず、その結果、保守できない乱雑なコードが生成されます。
• プロミス機能スタイルとは、ポップアップ ウィンドウのユーザーが表示や非表示などのロジックを気にする必要がないことを意味します。近接性の原則に従って、ビジネスがこの時点に達し、ポップアップ ウィンドウが表示される必要がある場合にのみ、ポップアップ ウィンドウが表示されます。対応するポップアップ ウィンドウ関数が呼び出されます。
• もちろん、この方法ではポップアップ ウィンドウ開発者の作業は増えますが、ポップアップ ウィンドウ ユーザーの精神的負担は軽減されます。
• このライブラリはcallbackResolve和 callbackReject2つのpropsを暗黙的に渡しており、依存元が不明瞭であり、新たな精神的負担をもたらしています。現時点では良いアイデアがありませんので、PR を歓迎します。

最後に

ポップアップ ウィンドウを開発するとき、ステート駆動型メソッドと命令型メソッドのどちらを使用しますか?命令型はあなたのチームやプロジェクトに適していますか? 試してみてください。

GitHub アドレス

npm アドレス

関連チュートリアル: "Web フロントエンド開発ビ​​デオ チュートリアル"

以上が「ポップアップ」はどのように開発されるのでしょうか?国家主導か、それとも強制か？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。