功能性JavaScript编程-制作模态，弹出窗口并进行重构 [英] Functional JavaScript Programming - Making a Modal, a popup, and refactoring it

问题描述

我正在使用ES5。我正在学习JavaScript。

I'm using ES5. I'm learning JavaScript.

我做了这个模态，但是我想重构其中的代码，我敢肯定有更好的方法

I did this modal, but I want to re-factor the code that's there, I'm pretty sure there is a better way to do this.

如果我添加5modals，代码将如何知道哪个模态是哪个？如何添加该功能？我想这与id有关，但是动态性如何？还是更多的OOP JS？

If I add 5modals, how will the code know which modal is which? How can I add that functionality as well? I guess it had to do with id's, but how would that be dynamic? Or is that more OOP JS?

以下是代码笔中的代码- https://codepen.io/lovetocodex/pen/mpxmjY

Here is the code in the codepen - https://codepen.io/lovetocodex/pen/mpxmjY

模态似乎还不那么流畅，即使我设置了不透明度和过渡效果-仍然可以顺利消除。

And the modal seems to kinda pop up not as smooth, even though I set opacity and transition - it goes away smoothly however.

JS代码：

window.onload = function() {

//Variables
var modal = document.querySelector('.modal');
var modalBtn = document.querySelector('.modal-btn');
var modalCloseBtn = document.querySelector('.modal__close');
var body = document.querySelector('body');

var modalOverlay = document.createElement('div');
modalOverlay.className = 'modal-overlay';

function openModal(e) {
    e.preventDefault();
    modalOverlay.classList.add('is-open');
    modal.classList.add('is-open');
    document.body.appendChild(modalOverlay);
}

function closeModal(e) {
    modalOverlay.classList.remove('is-open');
    modal.classList.remove('is-open');
    document.body.removeNode(modalOverlay);
}

modalCloseBtn.addEventListener('click', closeModal);
modalOverlay.addEventListener('click', closeModal);
modalBtn.addEventListener('click', openModal);

}

HTML：

     <button class="modal-btn"> Click Me </button>

    <div class="modal">

    <div class="modal__inner">

    <div class="modal__header">
    <h1>Awesome Modal</h1>
    <button class="modal__close">
             &#x2716;
    </button>

    </div>

    <div class="modal__content">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas corporis, ad quae sit reprehenderit amet, ipsam delectus error excepturi suscipit labore. Neque animi vero perspiciatis accusamus doloribus praesentium minus magnam.</p>
    </div>

</div><!-- /modal__content -->

</div>

推荐答案

您可以通过内部函数使用闭包：

You could use closures through inner functions:

  function createModal() {
   //Variables
    var modal = document.querySelector('.modal');
    var modalBtn = document.querySelector('.modal-btn');
    var modalCloseBtn = document.querySelector('.modal__close');
    var body = document.querySelector('body');
    var modalOverlay = document.createElement('div');
    modalOverlay.className = 'modal-overlay';

    function openModal(e) {
       e.preventDefault();
       modalOverlay.classList.add('is-open');
       modal.classList.add('is-open');
       document.body.appendChild(modalOverlay);
    }

    function closeModal(e) {
     modalOverlay.classList.remove('is-open');
     modal.classList.remove('is-open');
     document.body.removeNode(modalOverlay);
    }

    modalCloseBtn.addEventListener('click', closeModal);
    modalOverlay.addEventListener('click', closeModal);
    modalBtn.addEventListener('click', openModal);

 }

 window.onclick = () => {
    createModal();
    createModal();
 };

这篇关于功能性JavaScript编程-制作模态，弹出窗口并进行重构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！