Question

我正在编写一个自定义JS + CSS库，以便能够编写如下内容：

var myObj = myLibrary( '.my-div' );
console.log( myObj ); //HTML nodeList
myObj.someFunction(); //perform some action with the node

这有可能吗？

我尝试过的事情：

var myLibrary = function( el ){
  return document.querySelectorAll( el );
}
var myObj = myLibrary( '.my-div' );
console.log( myObj ); //HTML nodeList, ok!
myObj.someFunction(); //undefined, nope :(

Answer 1

document.querySelectorAll( el )给出了匹配节点的列表。因此，您将不会获得单个节点。因此，您必须遍历所有这些节点才能向其添加功能。

大多数功能都在节点上。而且您将无法在返回的节点列表上使用它们。因为它是一个数组..用简单的话来说。简而言之，从返回的array获取元素/节点并在其上使用属性

示例

var myLibrary = function( el ){
  return document.querySelectorAll( el );
}
var nodes = myLibrary( '.test' );
var colors = ['red', 'green', 'blue'];
for(var i=0; i<nodes.length; i++){
    nodes[i].style.color =  colors[colors.length % i];
}

<div class="test">1</div>
<div class="test">2</div>
<div class="test">2</div>

Answer 2

只需将所需的功能添加到对象（在本例中为节点列表）：

function myLibrary(el) {
  var list = document.querySelectorAll(el) // save the node list in a variable
  list.someFunction = function() { // add the function(s)  you want to that object
    console.dir(this)
  }
  return list // return the object
}
var myObj = myLibrary('.my-div')
console.log(myObj)
myObj.someFunction()

还可以扩展prototype中的NodeList，但您实际上不应该这样做，因为这可能导致命名冲突并难以跟踪问题。

如何创建带有可选功能的对象？

2 个答案: