Question

我正在尝试为项目创建一个辅助函数的小型库。

目前，我已在全局范围内设置了许多功能，如下所示：

function addClass(el, className) {
   el.classList.add(className);
}

var target = document.querySelector('.target);
addClass(target, "added-class");

通过添加一个类作为示例，我想跟随类似jQuery的函数，以便像这样调用它：

var target = document.querySelector('.target);
target.addClass("added-class");

如何设置一个函数以便以这种方式调用它？

Answer 1

您可以延长HTMLElement

正如@charlietfl所提到的，扩展本机API在理论上运行良好，但也应该关注HTMLElement中的未来规范可能会添加类似的方法来打开应用程序以防止潜在的冲突。

就像这个例子：

function addClass(className) {
  this.classList.add(className);
}

// here you extends HTMLElement prototype
HTMLElement.prototype.addClass = addClass;


var target = document.getElementById('mydiv');
target.addClass('red');

var target2 = document.getElementById('mydiv2');
target2.addClass('blue');

.red {
  background: red;  
}

.blue {
  background: blue;  
}

<div id="mydiv">HELLO</div>
<div id="mydiv2">WORLD</div>

或者可以使用包装

就像这个另一个例子：

function Element(id) {
  
  this.target = document.getElementById(id);  
  
  this.addClass = function (className) {
     this.target.classList.add(className);
  }

  return this;
}


var target =new Element('mydiv');
target.addClass('red');

var target2 =new Element('mydiv2');
target2.addClass('blue');

.red {
  background: red;  
}

.blue {
  background: blue;  
}

<div id="mydiv">HELLO</div>
<div id="mydiv2">WORLD</div>

如何使用JavaScript创建类似对象函数的jQuery

1 个答案: