jQuery-类似 vanillaJS 的库

Question

我正在构建一个类似于 jQuery 的库，但是这里有一个错误，其中行 $('#hello').addClass('blue'); 没有按预期工作。

class DOM {
    constructor(element) {
        this.element = document.querySelectorAll(element);
        Object.assign(this, this.element);
    }

    addClass(className) {
        return this.each(function(el){
            console.log(el);
            this.classList.add(className);
        });
    }

    removeClass(className){
        return this.each(function(el) {
            this.classList.remove(className);
        });
    }

    each(callback) {
        // convert this to Array to use for...of
        for ( let el of Array.from(this) ) {
            console.log(el);
            callback.call( el );
        }

    // return this for chaining
    return this;
    }
}

let $ = (selector) => new DOM(selector);
$('#hello').addClass('blue');

.blue {
  background: blue;
}
.green {
  background:green;
}

<div id="hello">
  Hello!
</div>

Answer 1

我很确定您使用 assign 将元素分配给此元素的方式行不通。我不确定它是否真的可取，只需保留对该元素的引用，这样就不会那么混乱。

除此之外，您还需要为 NodeList 集合使用 forEach 而不是 each，将 fiddle 中的 addClass 更改为以下内容即可：

  addClass(className) {
    return this.element.forEach((el) => {
        el.classList.add(className);
    });
  }

编辑：仔细检查我能不能说你真的没有使用 each，那是你的 class 的内部方法。

您的代码的完整版本如下所示：

class DOM {
  constructor(element){
    this.element = document.querySelectorAll(element);
  }

  addClass(className) {
    return this.element.forEach((el) => {
        el.classList.add(className);
    });
  }

  removeClass(className){
    return this.element.forEach((el) => {
        el.classList.remove(className);
    });
  }
}

或者，如果您真的想保留 each 方法，类似的方法也可以：

class DOM {
    constructor(element){
    this.element = document.querySelectorAll(element);
  }

  addClass(className) {
    return this.each((el) => {
        el.classList.add(className);
    });
  }

    removeClass(className){
    return this.each((el) => {
        el.classList.remove(className);
    });
  }

  each(callback){
    // convert this to Array to use for...of
    for (let el of Array.from(this.element)) {
      callback(el);
    }

    // return this for chaining
    return this;
  }
}

jQuery-类似 vanillaJS 的库

jQuery-like library with vanillaJS

javascript

es6-class