我只是在学习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
       }
   }

最佳答案

使用旧式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的本机模块或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>

关于javascript - 是否在html中创建对象并让函数在oop中被视为不良做法?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56200924/

10-12 12:57
查看更多