jQuery like structure - ES6 JS Chaining

问题描述：

这是我在StackOverflow上的第一篇文章，所以在开始的时候我很抱歉我的英文不够流利;）但是我试着解释我有什么问题。jQuery like structure - ES6 JS Chaining

这里是活生生的例子

http://codepen.io/anon/pen/JKGbdE

class S { 
 
     constructor(selectors) { 
 
      let self = this; 
 

 
      
 
      this.elements(selectors); 
 
     } 
 

 
     elements(selectors) { 
 
      this.selectors = selectors; 
 

 
       
 
      let result = document.querySelectorAll(this.selectors); 
 

 
      if(result.length == 1) { 
 
       result = result[0]; 
 

 
       this.element = result; 
 
      } else { 
 
       this.elements = [].slice.call(result); 
 
      } 
 

 
      this.nodes = result; 
 

 
      return this.nodes; 
 
     } 
 

 
     parent() { 
 
      let self = this; 
 

 

 
      if(!!this.element) { 
 
       
 
       this.nodes = this.element.parentNode; 
 

 
      } else { 
 

 
       this.elements.forEach = (item, key) => { 
 
        self.elements[key] = item.parentNode; 
 
       }; 
 

 
       this.nodes = this.elements; 
 
      } 
 

 
      return this.nodes; 
 
     } 
 

 

 
     result(a) { 
 
      return this.nodes; 
 
     } 
 
    } 
 

 
    window.$ = (selectors) => { 
 
     let el = new S(selectors); 
 

 

 
     return el; 
 
    }; 
 
    
 

 
    console.log('first ex: ', $('#el')) 
 
    console.log('second ex: ', $('#el').parent())

<html> 
 
    <body> 
 
    <div id="el">test</div> 
 
    
 
    </body> 
 
</html>

如果你打开浏览器控制台，你会看到这样的事情：

[日志]第一前： -

S {selectors: "#el", element: <div id="el">, nodes: <div id="el">, …}

[日志]第二前： -

<body>…</body>

第二个例子是确定。我只想返回一个HTML节点。在第一个例子中，它应该只返回<div id="el />。

有什么建议吗？

这两个日志都包含jQuery对象。如果要检索底层DOME元素，请使用'$（'＃el'）。get（0）'或'$（'＃el'）[0]' –

不要改变您的实例。返回一个新的。 – Bergi

答

first ex:您正在返回new S(...)和second ex: - this.nodes（DOM对象）。

除非你延长JS DOM操作，你不能指望得到DOMObject为响应与工作的所有子功能 - jQuery的也不能给你这种可能性。

尝试console.log(jQuery('.anything')) - 它也返回具有DOM对象作为项的对象（具有索引0是精确的）。

你应该改变你的代码，以便它总是返回S对象。

谢谢你的回答。我知道什么是jQuery的回报，但... 如果我改变这个代码废料 ' 构造（选择）{ 让自我=这一点; return this.elements（selectors）; } ' 比第一个例子中的工作，但第二次没有。如何将代码更改为更通用？ – Sabre

jQuery like structure - ES6 JS Chaining

相关推荐