javascript - 在 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 属性事件处理程序的问题是您只能在其中使用全局函数。浏览器上的全局命名空间非常拥挤，因此最好避免在可以避免的情况下添加更多内容。

在您的示例中，您可能会考虑确保可以使用 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 的 native 模块还是 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>