Question

所以我被困了几天试图找出在我的项目中实现以下功能的最佳实践：

{{1}}

此函数基本上与jQuerys $。addClass 原型/函数具有相同的行为，但（目前）不支持内联调用（如内置函数）： .trim（）， .toLowerCase（） 等等。

我已经读过，将原型扩展/添加到对象中并不是真正的好习惯，如果你关心性能（我这样做），就必须避免这种做法。但正如你所注意到的......我对原型的了解并不是那么好，所以任何建议/答案都会受到欢迎！

简而言之： 基本上我想实现这个函数，并且可以这样调用： document.body.addClass（“classToBeAdded”）;

Answer 1

我已经读过将原型扩展/添加到对象中，并不是真正的好习惯

这是一个意见问题，但确实会增加冲突的可能性（例如，两个不同的脚本都将相同的方法添加到原型中）。

如果你关心表现（我这样做），必须避免使用。

不，向原型对象添加内容并没有任何显着的性能影响;创建对象后，替换对象的原型，但您不需要这样做。

基本上我想要实现这个函数，并且可以这样调用：document.body.addClass（＆＃34; classToBeAdded＆＃34;）;

您可以将其添加到HTMLElement.prototype：

Object.defineProperty(HTMLElement.prototype, "addClass", {
    value: function() {
        // ...your code here...
    }
});

适用于所有现代浏览器，也适用于IE8。

示例：

＆＃13;

// The extension
Object.defineProperty(HTMLElement.prototype, "addClass", {
  value: function(cls) {
    // Not using classList on the assumption that addClass would be unnecessary
    // if the browser supported classList :-)
    this.className += " " + cls;
  }
});

// Using it
document.body.addClass("foo");
document.getElementById("test").addClass("bar");

＆＃13;

.foo {
  color: green;
  font-weight: bold;
}
.bar {
  border: 1px solid blue;
}

＆＃13;

<p id="test">This is a test</p>

＆＃13;

JavaScript - 将原型添加到特定对象

1 个答案: