'팝업'은 어떻게 개발되나요? 국가 중심인가, 아니면 필수인가?

이 글에서는 프론트엔드 개발 팝업 창에 대한 관련 지식을 주로 소개하며, 관심 있는 분들은 아래를 살펴보시기 바랍니다. 그것은 모두에게 도움이 될 것입니다.

프론트엔드 개발 엔지니어로서 다양한 팝업창을 개발하는 것은 흔한 일이지만, 이를 어떻게 빠르고 효율적으로, 그리고 통일된 스타일로 할 것인가가 문제입니다.

상태 중심

오늘날의 프런트엔드 기술 스택에는 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 두 개의 prop을 구성 요소에 추가하려면 Modal을 닫을 때 이를 호출해야 합니다. 🎜rrreee🎜Modal 구성 요소를 생성 함수에 전달하세요.🎜rrreee🎜Promise 함수처럼 비즈니스 코드에서 Modal을 사용하세요. 🎜rrreee🎜물론, 명령형 개발이나 국가 주도 개발은 항상 논란의 여지가 있었습니다. 🎜🎜국가 주도 개발을 지지하는 You Yuxi의 관점은 다음과 같습니다. 🎜

www.zhihu.com/question/35…

명령어 스타일을 지지하는 네티즌도 있습니다:

www.zhihu.com/question/35…

가로채기된 스니펫:

사용자용 즉, 표시하려는 내용과 표시 규칙에만 집중하면 되며 팝업 창을 표시하거나 숨기는 등 관련 없는 논리에 특별히 주의를 기울일 필요가 없습니다. 호출 자체가 표시됩니다.

명령형 호출로 변경하면 사용자는 구성 요소를 소개하고, 구성 요소를 마운트하고, 콜백을 선언하고, 논리 흐름을 중단할 필요가 없으며 자신의 데이터에만 집중할 수 있습니다.

내 의견

• 상태가 여러 팝업 구성 요소를 구동할 때 코드가 너무 중복됩니다.
• 대규모 팀의 경우 일선 비즈니스 개발자는 계층 구조 수준, 코드 스타일, 분산 상태 드라이버가 모두 다르며 스타일을 통합할 수 없어 유지 관리할 수 없는 지저분한 코드가 발생합니다.
• Promise 기능적 스타일은 팝업 창 사용자가 표시 및 숨김과 같은 논리에 대해 걱정할 필요가 없다는 것을 의미합니다. 근접성의 원칙은 비즈니스가 이 지점에 도달하고 팝업 창이 나타나야 한다는 것입니다. 팝업창 기능이 호출됩니다.
• 물론 이 방법은 팝업창 개발자의 작업량을 늘리지만, 팝업창 사용자의 정신적 부담은 줄여줍니다.
• 이 라이브러리는 callbackResolve和 callbackReject두 개의 prop을 암시적으로 전달하며 종속성 소스가 불분명하여 새로운 정신적 부담을 가져옵니다. 당장은 좋은 생각이 없으니 홍보를 환영합니다.

마지막으로

팝업 창을 개발할 때 상태 중심 방법과 명령형 방법 중 어떤 것을 사용하시겠습니까? 명령형이 귀하의 팀이나 프로젝트에 적합합니까?

GitHub 주소

npm 주소

관련 튜토리얼: "웹 프론트 엔드 개발 비디오 튜토리얼"

위 내용은 '팝업'은 어떻게 개발되나요? 국가 중심인가, 아니면 필수인가?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!