处理代理处理程序

Question

简介：

请记住，我知道为什么我的解决方案不起作用，我的问题是如何使用当前代码或以完全不同的方式使其工作。

另请注意，不是In the Proxy handler, how to distiguish getting a property (var) vs calling a method?或How to get function arguments in a Proxy handler的副本，尽管听起来可能相似。

经过所有这些预防措施后：

我正在尝试创建一个“选择器”，类似于jquery中已知的那个，但是使用了es6'querySelectorAll和Proxy对象。

我想使用Proxy，因为我想调用mySelector（'div'）。style ='color：red' - 这样一来，我不想添加'style'属性 - 我不想甚至想提前知道这样的事情存在 - 我想使用现有的样式属性（在HTMLElement中）

我也想捕获方法调用，比如mySelector（'div'）。setAttribute（...）;

当前几乎工作解决方案：

此处，函数yes返回一个Proxied Yes对象。在那里我陷阱'得'和'设置'。这适用于：

yes('.allDivs').setAttribute('style','color:red');

yes('.allDivs').style = 'color:blue';

但这不起作用：

yes('.allDivs').style.color = 'green';

代码：

示例HTML：

<div class = 'allDivs'>
 blah1 
</div>

<div class = 'allDivs'>
 blah2
</div>

使用Javascript：

(function(window) {

  class Yes {

      constructor(selector){
        this.length = 0;
        this.nodes  = [];
        if(typeof selector === 'string' && selector !== '') {
          this.nodes = Array.from(document.querySelectorAll(selector));
        }

        //This is we can access the object with [index]:
        if (this.nodes.length) {
          this.length = this.nodes.length;
          for (var i = 0; i < this.nodes.length; i++) {
            this[i] = this.nodes[i];
          }
        }
      }

      //methods:
      forEach (elem) {this.nodes.forEach (elem);return this;}

      //traps:  

      //target here is *we* - the Yes instance (this), and prop is (string) property being called, a property or method
      get (target, prop) {
        console.log('::get called, for prop: ', prop);
        return function(...args) {
            target.forEach((elem) => {
                if(typeof elem[prop] === 'function'){
                    elem[prop](...args);
                }
            });        

        }        
     }

    set (target, prop, value) {
        console.log('::set called, for prop, val:: ', prop, value);
        target.forEach((elem) => {
            if(typeof elem[prop] !== 'function'){
                elem[prop] = value;
            }
        });            

     }
  }

  /////////
  //End of class Yes definition

  function yes (selector){
    let yInstance = new Yes(selector);
    return new Proxy(yInstance, yInstance);
  }

  //
  Yes.fn = Yes.prototype;
  window.yes = yes;

  //E.fn.forEach = function (elem) {this.nodes.forEach (elem);return this;}



})(window);

//tests:

//These work fine:

//yes('.allDivs').setAttribute('style','color:red');//OK
//yes('.allDivs').style = 'color:blue';//OK

//This does not:
yes('.allDivs').style.color = 'green';//NOT OK

工作代码：https://jsfiddle.net/kpion/5wy9uaqL/

现在，我知道为什么它不起作用，JS调用'get'因为它想要读取 .style属性。我很想知道如何做我想要完成的事情。

注意，我不能只返回一个'div'HTMLElement，因为我想在整个元素数组中进行更改（因此get / set处理程序中的循环）。