如何将面向对象的Javascript用于DOM操作

我了解OOP的主要原理，并且知道如何在JS中实现它

function Person(name) {
    this.name = name;
    this.speak = function(msg) {
        console.log('Person says:' + msg);
    }
}

var dad = new Person('David');
dad.speak('I am your dad!');

上面的脚本只不过是在控制台中打印一条消息。我不明白我们是如何用这种技术处理DOM的。也许是这样的

function Person(target, name) {
    this.target = target;
    this.name = name;
    this.speak = function(msg) {
        this.target.find('.speech-bubble').html(msg);
    }
}

var dad = new Person($('#dad'), 'David');
dad.speak('I am your dad!');

尽管这似乎不是一个好方法

---

如何通过OO Javascript使用对象、方法、构造函数等操作DOM？

您需要了解的是

原型的概念

使用
new
创建实例时，您正在基于原型构建对象

考虑以下几点：


职能人员（姓名）{
this.name=名称；
this.speak=函数（msg）{
log（'人说：'+msg）；
};
}
var dad=新人（“大卫”）；
爸爸，说：‘我是你爸爸！’；
console.log（'dad.speak等于dad.speak吗？'，dad.speak==dad.speak）；
var mom=新人（“大卫”）；
console.log（'mom.speak等于dad.speak吗？'，mom.speak==dad.speak）与OO相关，如果您打算采用面向DOM的代码，那么您离OO还不远

我认为类应该表示DOM上的组件/元素。它的方法是状态管理的一部分。但老实说，这里没有正确的答案。这只是使用面向DOM部分设计OO的一种方法

例如：


const basicClassName='component'；
const basicTemplate='这是我的基本组件'；
类MyComponent{
构造函数（模板=basicTemplate，类名=basicClassName）{
this.template=模板；
this.className=className；
this.element=document.createElement（'div'）；
this.element.className=className；
this.element.innerHTML=模板；
this.element.onclick=this.onclick.bind（this）；
this.element.style.cursor='pointer'；
}
onClick（）{
this.element.classList.toggle（'clicked'）；
}
}
常量组件=新的MyComponent（）；
const container=document.querySelector（'.container'）；
container.appendChild（component.element）
正文{
字体大小：14px；
}
.组成部分{
显示：块；
填充：1.3em；
盒影：1px 1px 4px浅灰色；
}
.点击{
背景色：木瓜鞭；
}
试着看一下MDN的解释：Person对象有两个参数，因此它将是
var dad=new Person（$（'dad'），'David'）然后
爸爸。说（'我是你爸爸！'）@oliv37 Oops，更正了；）顺便说一句，您正在使用jQuery与
$（“#dad”）
和
find（“.speech bubble”）
一起使用，因此我知道它不再是简单的javascript。我本可以使用document.getElementById，但由于它基本上做相同的事情，所以这并不重要。只是我不知道代码作为一个整体是否是一个好的实践。原型对我来说一直是一个难题。对不起，如果我听起来很笨，但是在你解释之后，我仍然很难理解原型的用法（主要原因是我是荷兰人）。在我看来，原型似乎是用来在类之外为类分配方法的。你是说prototype的目标是响应（自动适应各种子类/对象）吗？