Question

我想在没有jQuery的情况下重写这个jQuery函数。

jQuery.fn.inputError = function(text) {

    $(this).parent('label').addClass('error').find('.title').after("<span class='text'>" + text + "</span>");

};

所以

$('.foo').inputError('message');

变为

document.querySelector('.foo').inputError('message');

问题是我不完全确定如何编写函数，以便可以链接到querySelector()。

对于个人偏好我不想做：

inputError(document.querySelector('foo'));

如何编写自定义函数以便将其链接到querySelector？

-

EDIT。工作解决方案：

HTMLElement.prototype.inputError = function(text) {

  var label = this.parentNode,
      error = document.createElement("span");

  error.innerHTML = text;

  label.classList.add('test');
  label.insertBefore(error, label.firstChild);

};

Answer 1

在现代浏览器（和IE8）上，您可以通过添加函数来扩展HTMLElement的原型：

HTMLElement.prototype.inputError = function(msg) {
    // `this` is the element, so perhaps:
    this.innerHTML = msg;
};

示例：

HTMLElement.prototype.inputError = function(msg) {
  // `this` is the element, so perhaps:
  this.innerHTML = msg;
};

document.querySelector(".foo").inputError("Hi there");

<div class="foo"></div>

这样做的问题是，如果每个人都这样做，你会遇到与不同脚本的冲突，试图在元素上重新定义相同的方法。和/或当添加新标准方法时，它们可能恰好具有相同的名称等。

这就是PrototypeJS当天所做的事情（它还允许更新IE7及更早版本等不支持HTMLElement.prototype的浏览器的个别元素。）

另一种方法是执行jQuery所做的事情并创建自己的包装器对象。 jQuery做到了这一点，同时采用了基于集合的方法而不是基于元素的方法，这种方法非常成功。

创建一个链接到querySelector的函数

1 个答案: