Какой вариант кода лучше?

Question

[Марян Витак]

Есть 2 варианта, оба рабочие. Какой лучше использовать в будущем?

Вариант 1

let btn = document.querySelector('.btn'),
    overlay = document.querySelector('.overlay'),
    modal = document.querySelector('.modal'),
    that = this;

function open(element) {
    that.elenent = element;
    element.classList.add('open');
}

function close(element) {
    that.elenent = element;
    element.classList.remove('open');
}

btn.onclick = function () {
    open(overlay);
    open(modal);
};

overlay.onclick = function () {
    close(overlay);
    close(modal);
};

Вариант 2

let btn = document.querySelector('.btn'),
    overlay = document.querySelector('.overlay'),
    modal = document.querySelector('.modal');

function Open() {
    overlay.classList.add('open');
    modal.classList.add('open');
}

function Close() {
    overlay.classList.remove('open');
    modal.classList.remove('open');
}

btn.onclick = function () {
    Open();
};

overlay.onclick = function () {
    Close();
};

Comments

[Dmitriy Uvarov]

Третий

Answer 1

[Антон Спирин]

Хотя бы такой:

function Modal(options) {
  this.el = (options && options.el) || document.body;
  // init some options (text, width, onClose, onConfirm, etc)
  this.init();
}

Modal.prototype.init() {
  // build and append modal
}

Modal.prototype.show() {
  // show modal and overlay
}

Modal.prototype.close() {
  // close modal and overlay
}

var modal = new Modal(options);
var btn = document.querySelector('.btn');

btn.addEventListener('click', function() {
  modal.show();
});