Javascript 在面向对象编程中，用html创建对象和函数被认为是不好的做法吗？

我刚刚学习了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>

---

使用旧式的

onxyz

属性事件处理程序的问题在于，只能在它们中使用全局函数。浏览器上的全局名称空间非常拥挤，因此最好在可以避免的情况下避免添加更多的名称空间

在您的示例中，您可以考虑确保按钮可以用CSS选择器（或<代码> ID <代码>）标识，然后使用诸如“代码> AdvestTrister-< /代码>”的现代技术钩住处理程序：

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块以避免创建全局
班主任{
构造函数（第一个\u名称\u id、第二个\u名称\u id、输出\u id）{
this.first\u name=document.getElementById（first\u name\u id）；
this.second\u name=document.getElementById（second\u name\u id）；
this.output=document.getElementById（输出id）；
}
writeName（）{
返回this.output.innerHTML=“您的名字是”+this.first\u name.value+“”+this.second\u name.value；
}
}
document.getElementById（“显示名称”）.addEventListener（“单击”，函数）（）{
const name=新人（“第一名”、“第二名”、“输出”）；
name.writeName（）；
});
}

显示名称

使用旧式的

onxyz

-属性事件处理程序的问题在于只能在它们中使用全局函数。浏览器上的全局名称空间非常拥挤，因此最好在可以避免的情况下避免添加更多的名称空间

在您的示例中，您可以考虑确保按钮可以用CSS选择器（或<代码> ID <代码>）标识，然后使用诸如“代码> AdvestTrister-< /代码>”的现代技术钩住处理程序：

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块以避免创建全局
班主任{
构造函数（第一个\u名称\u id、第二个\u名称\u id、输出\u id）{
this.first\u name=document.getElementById（first\u name\u id）；
this.second\u name=document.getElementById（second\u name\u id）；
this.output=document.getElementById（输出id）；
}
writeName（）{
返回this.output.innerHTML=“您的名字是”+this.first\u name.value+“”+this.second\u name.value；
}
}
document.getElementById（“显示名称”）.addEventListener（“单击”，函数）（）{
const name=新人（“第一名”、“第二名”、“输出”）；
name.writeName（）；
});
}

显示名称

在我看来，是的，这是一种非常糟糕的做法。要使某些东西可点击（如按钮），请在单独的JS文件中使用此代码

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

---

在我看来，是的，这是一种非常糟糕的做法。要使某些东西可点击（如按钮），请在单独的JS文件中使用此代码

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

不鼓励使用On事件（例如

On事件（例如