jquery的微小实现

Question

1)我有一个在Javascript上实现jQuery的任务.但由于某些原因,我的方法都不起作用.例如,当我写

$('.a').each(function (index) {$(this).append('<b>' + index + '</b>')})

它返回

DOMException:无法在'Document'上执行'querySelectorAll':'[object Object]'不是有效的选择器.

我也不能this.each在其他功能中使用.例如,如果我会使用每个而不是forEach内部追加它将无法工作.

---

<script type="text/javascript">
(function() {
  function $(selector) {
    if (this instanceof $) return this.search(selector)
      return new $(selector);
  }
  $.prototype = {
    constructor: $,
    length: 0,

    search: function(selector) {
      var that=this;
      var elems=Array.prototype.slice
          .call(document.querySelectorAll(selector));
      elems.forEach(function(x,i){that[i]=x;});
      this.length = elems.length;
      return this;
    },

    append: function(text) {
      if (text instanceof $) {
        this[0].appendChild(text[0]);
        for(var i = 1; i < this.length-1; i++) {
          var p = text[0].cloneNode(true);
          this[i].appendChild(p);
        }
      } else Array.prototype.slice
          .call(this).forEach(function(x){
              x.innerHTML  =  x.innerHTML  +  text;
          });

      return this;
    },  

    each: function(callback){
      for (var i=0;i<this.length;i++){
        this[i]=callback.call(this,this[i])
      };
      return this;
    },

  }
  window.$ = $;
}());

Answer 1

例如,当我写

$('#id').each(function (index) {$(this).html('<b>' + index + '</b>')})

它返回

DOMException:无法在'Document'上执行'querySelectorAll':'[object Object]'不是有效的选择器.

你做$(this)你的内each回调.所以调用$与this设置为DOM元素,这是不是instanceof $,所以你调用new $(selector)传递的DOM元素.这结束调用this.search(selector),其中,再次,selector是的DOM元素.然后你打电话querySelectorAll(selector).QSA接受字符串,而不是DOM元素,因此元素被转换为字符串"[object Object]"(或者它将在某些引擎上"[object HTMLElement]"),并且失败.

您可以使用浏览器中内置的调试器遍历代码语句来诊断这些错误.如果你出于某些原因要重新实现jQuery,你需要养成这样做的习惯:大量使用调试器,找出错误并修复它.

在这种情况下,例如,您将要检测selector不是字符串并处理它,例如模糊地像这样的东西:

search: function(selector) {
  var that=this, elems;
  if (typeof selector === "string") {
    elems = Array.prototype.slice.call(document.querySelectorAll(selector));
    elems.forEach(function(x,i){that[i]=x;});
    this.length = elems.length;
  } else {
    this[0] = selector;
    this.length = 1;
  }
  return this;
},

但是除此之外还会有很多其他的东西,你需要调试器.