Wie werden „Pop-ups“ entwickelt? Staatlich gesteuert oder zwingend erforderlich?

Dieser Artikel vermittelt Ihnen relevantes Wissen über Front-End-Entwicklungsfenster. Er stellt vor allem vor, wie Front-End-Entwicklungsingenieure schnell und effizient Pop-up-Fenster entwickeln können es wird dir hilfreich sein.

Als Frontend-Entwicklungsingenieur ist die Entwicklung verschiedener Popup-Fenster an der Tagesordnung, aber wie man das schnell, effizient und mit einem einheitlichen Stil macht, ist ein Problem.

Zustandsgesteuert

In den heutigen Front-End-Technologie-Stacks sind Vue, React, die Verwendung von zustandsgesteuerten ist eine gängige Methode. Wenn wir beispielsweise ein Popup-Fenster auf unserer Seite einführen möchten, klicken Sie auf eine Schaltfläche, um Folgendes anzuzeigen: 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

Es ​​gibt ein Problem mit den oben genannten Variablen, die das Anzeigen und Ausblenden des Popup-Fensters steuern. Die Logik zum Anzeigen des Popup-Fensters und die Rückruflogik zum Schließen des Popup-Fensters sind an verschiedenen Stellen verteilt.

Angenommen, diese Seite hat mehr als ein Popup-Fenster, dann schreiben Sie es so:

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
}

Das ist nicht zu ausführlich, um es zu schreiben.

Imperative Entwicklung (funktional)

Ich habe promise-modal Diese Bibliothek kann Promise in React-Projekten funktionsfähig machen. Entwickeln Sie das Anruf-Popup Fenster.

Installieren

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

Verwenden

🎜Schreiben Sie Ihre modale Komponente so, wir übergeben callbackResolve und callbackReject zwei Requisiten für Ihre Komponente, Sie müssen sie beim Schließen des Modals aufrufen. 🎜rrreee🎜Übergeben Sie Ihre Modal-Komponente an die Erstellungsfunktion.🎜rrreee🎜Verwenden Sie Modal im Geschäftscode, genau wie die Promise-Funktion. 🎜rrreee🎜Natürlich war zwingende oder staatlich getriebene Entwicklung schon immer umstritten: 🎜🎜Das ist der Standpunkt von You Yuxi, der staatlich getriebene Entwicklung unterstützt: 🎜

www.zhihu.com/question/35…

Es gibt auch einige Internetnutzer, die den imperativen Stil unterstützen:

www.zhihu.com/question/35…

Abgefangene Schnipsel:

Für Benutzer Das Das heißt, er muss sich nur auf das konzentrieren, was er anzeigen möchte, und auf die Regeln für die Anzeige, und muss sich nicht besonders um irrelevante Logik wie das Ein- oder Ausblenden des Popup-Fensters kümmern – der Anruf selbst soll angezeigt werden.

Durch die Änderung in einen zwingenden Aufruf müssen Benutzer keine Komponenten einführen, keine Rückrufe deklarieren und den Logikfluss nicht unterbrechen. Sie können sich nur auf ihre eigenen Daten konzentrieren.

Meine Meinung

• Wenn der Staat mehrere Popup-Komponenten steuert, ist der Code zu redundant.
• Für große Teams haben Geschäftsentwickler an vorderster Front unterschiedliche Hierarchieebenen, unterschiedliche Codestile und dezentrale Statustreiber. Die Stile können nicht vereinheitlicht werden, was zu unordentlichem Code führt, der nicht verwaltet werden kann.
• Der funktionale Stil verspricht, dass Benutzer von Popup-Fenstern sich keine Gedanken über Logik wie Ein- und Ausblenden machen müssen. Das Prinzip der Nähe besteht darin, dass das entsprechende Popup-Fenster erst dann angezeigt wird, wenn das Unternehmen diesen Punkt erreicht Popup-Fensterfunktion aufgerufen wird.
• Natürlich erhöht diese Methode die Arbeit der Popup-Fenster-Entwickler, verringert jedoch die mentale Belastung der Popup-Fenster-Benutzer.
• Diese Bibliothek übergibt implizit callbackResolve和 callbackRejectzwei Requisiten, und die Abhängigkeitsquelle ist unklar, was eine neue mentale Belastung mit sich bringt. Ich habe im Moment keine gute Idee, daher ist PR willkommen.

Abschließend

Würden Sie bei der Entwicklung von Popup-Fenstern lieber zustandsgesteuerte oder imperative Methoden verwenden? Ist Imperative für Ihr Team oder Projekt geeignet? Probieren Sie es aus.

GitHub-Adresse

npm-Adresse

Verwandte Tutorials: „Video-Tutorial zur Web-Front-End-Entwicklung“

Das obige ist der detaillierte Inhalt vonWie werden „Pop-ups“ entwickelt? Staatlich gesteuert oder zwingend erforderlich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!