Является ли создание объектов в html и наличие функций плохой практикой в ​​oop?

Question

Я только что узнал о JS и oop, и мне было интересно, считается ли создание объектов в HTML и вызов функций там плохой практикой. Например, в событии onclick, как в примере ниже. Также разрешено ли иметь функции, которые не являются методами? Например, иметь одну функцию, где я буду создавать все объекты и вызывать их методы.

<input id="first_name" type="text" placeholder="First Name">
<input id="second_name" type="text" placeholder="Second Name">
<button onclick="const name = new Person('first_name', 'second_name', 'output'); name.writeName()">Show name</button>
<p id="output"></p>

class Person {
       constructor(first_name_id, second_name_id, output_id) {
           this.first_name = document.getElementById(first_name_id)
           this.second_name = document.getElementById(second_name_id)
           this.output = document.getElementById(output_id)
       }
       writeName() {
           return this.output.innerHTML = "Your name is" + this.first_name.value + " " + this.second_name.value
       }
   }

Answer 1

Проблема с использованием обработчиков событий onxyz -attribute старого стиля заключается в том, что в них можно использовать только функции global . Глобальное пространство имен в браузерах очень заполнено, поэтому лучше избегать добавления к нему большего, когда вы можете избежать этого.

В вашем примере вы могли бы рассмотреть возможность идентификации кнопки с помощью селектора CSS (или id), а затем подключить ваш обработчик, используя современные методы, такие как addEventListener:

const theButton = document.querySelector("selector-for-the-button"); // or = document.getElementById("the-button-id");
theButton.addEventListener("click", function() {
    const name = new Person('first_name', 'second_name', 'output');
    name.writeName();
});

Таким образом, Person не обязательно должен быть глобальным.

Это особенно полезно в сочетании с модулями (будь то собственные модули JavaScript или те, которые предоставляются Webpack, Rollup и аналогичными).

Вот полный пример, обратите внимание, что он не использует глобальные переменные:

{ // Scoping block to avoid creating globals
    class Person {
        constructor(first_name_id, second_name_id, output_id) {
            this.first_name = document.getElementById(first_name_id);
            this.second_name = document.getElementById(second_name_id);
            this.output = document.getElementById(output_id);
       }
       writeName() {
           return this.output.innerHTML = "Your name is " + this.first_name.value + " " + this.second_name.value;
       }
    }
    
    document.getElementById("show-name").addEventListener("click", function() {
        const name = new Person('first_name', 'second_name', 'output');
        name.writeName();
    });
}

<input id="first_name" type="text" placeholder="First Name">
<input id="second_name" type="text" placeholder="Second Name">
<button id="show-name">Show name</button>
<p id="output"></p>

Answer 2

На мой взгляд, да, это очень плохая практика. Чтобы сделать что-то интерактивное (например, кнопку), используйте этот код в отдельном файле JS.

// Anoymonous function
varName.addEventListener("click", function(){
alert("hi")
})