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