javascript - 编写函数来循环jquery样式库中的元素

Question

我正在编写一个非常简单的 jquery 模仿库，以允许进行一些简单的 DOM 操作。

我正在编写方法来允许我更改文本的颜色等。当我希望更改类元素颜色时，我必须在每个方法中使用循环。理想情况下，我希望有一个函数可以为我执行该循环，然后我可以在每个方法中使用它。不幸的是，我的尝试没有成功。

请参阅下面的代码:

function _(elem) {
  this.classOrId(elem);
}

_.prototype = {
  add: function(text) {
    if (this.e.length >= 1) {
      for (var i = 0; i < this.e.length; i++) {
        this.e[i].innerHTML = this.e[i].innerHTML + text;
      }
    } else {
      this.e.innerHTML = this.e.innerHTML + text;
    }
    return this;
  },
  replace: function(text) {
    if (this.e.length >= 1) {
      for (var i = 0; i < this.e.length; i++) {
        this.e[i].textContent = text;
      }
    } else {
      this.e.textContent = text;
      document.body.appendChild(elem);
    }
    return this;
  }
}

_.prototype.classOrId = function(elem) {
  var classOrId = elem.charAt(0);
  if (classOrId === "#") {
    elem = this.sliceElement(elem);
    this.e = document.getElementById(elem);
    return this;
  } else if (classOrId === ".") {
    elem = this.sliceElement(elem)
    this.e = document.getElementsByClassName(elem);
    return this;
  }
};

_.prototype.sliceElement = function(elem) {
  var elem = elem.slice(1);
  return elem;
};

正如您所看到的，这段代码中有大量重复。我尝试编写以下内容来减少重复，但没有成功。 如有任何建议，我们将不胜感激。

_.prototype.loopOverElements = function(effect) {
  for (var i = 0; i < this.e.length; i++) {
    return this.e[i][effect];
  }
}

使用下面的代码，当它们传递到函数中时，它无法识别 javascript DOM 方法，例如 innerHTML、style。

使用上面的代码，如果我将效果传递到loopOverElements函数中，它会显示console.log(this.e[i][effect])在传递到方法中时未定义。

Answer 1

您应该将其发布到 codereview但我会尝试一下。首先困扰我的是所有的 if (this.e.length >= 1) { } else { }。即使只有一个元素，也使 e 成为一个数组，只有变量的值应该“变化”而不是其类型。

关于classOrId()，由于document.querySelectorAll，它可以减少到一行。 (返回所需的数组)。所以代码就变成了:

function _(elem) {
    var about = {
        Name: "pQuery",
        Version: 0.1,
        Author: "Paul Fitzgerald"
    }

    if (elem) {
        if (window === this) {
            return new _(elem);
        }
        this.e = document.querySelectorAll(elem); // no need for classOrId() anymore
    } else {
        return about;
    }
}

_.prototype = {
    add: function (text) {
        // no if else anymore
        for (var i = 0; i < this.e.length; i++) {
            this.e[i].innerHTML = this.e[i].innerHTML + text;
        }
        return this;
    }
}

关于重复，将函数分成相似的用途，例如可以为所有与样式相关的操作编写一个函数:

_.prototype = {
    _eachStyle: function (prop, value) {
        for (var i = 0; i < this.e.length; i++) {
          this.e[i].style[prop] = value;
        }

        return this;
    },
    hide: function () {
        return _eachStyle('display', 'none');
    },
    color: function (color) {
        return _eachStyle('color', color);
    }
}

对于基本属性:

_.prototype = {
    _each: function (prop, value, append) {
        append = append || false; // by default, replace the value
        for (var i = 0; i < this.e.length; i++) {
          this.e[i][prop] = append ? element[prop] + value : value;
        }
        return this;
    },
    add: function (text) {
        return _each('innerHTML', text, true);
    },
    replace: function (text) {
        return _each('textContent', text);
    }
}

类似地，对于要在所有元素上调用的函数:

_.prototype = {
    _eachFn: function (fn, args) {
        for (var i = 0; i < this.e.length; i++) {
          this.e[i][fn](args);
        }
        return this;
    },
    remove: function () {
        return _eachFn('remove');
    },
}