手写一个简单的JQuery

测试样本

<!--测试样本-->
<body>
  <div id="jq">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
</body>

为什么jq 使用$（selector）就能够获取DOM呢

原生的js该怎么实现

//事实证明通过如下方式不管传入的是id选择器还是class选择器都是可行的 
document.querySelectorAll(selector)

获取DOM中的第几个元素

// 因为我们获取到的是一个NodeList数组，那么当然可以通过下标获取（注意不要越界）
document.querySelectorAll(selector)[0]

给元素添加class

// 添加完毕以后查看DOM结构的class中就多了一个class属性world
document.querySelectorAll(".hello").forEach(d=>{
    d.classList.add("world")
})

添加css属性

// 我们希望给每一个元素添加上宽、高、颜色几个属性
let css = {
    "width": "2rem",
    "height": "1rem",
    "color": "red"
  }
document.querySelectorAll(".hello").forEach(d=>{
      Object.keys(css).map(k =>{
        d.style[k] = css[k];
      });
    })

上面的方式看起来比较麻烦，每次都要调用，如何做到只调用一次即可实现并且像jq那样做到链式调用。

改良

// 获取DOM元素
  function $(selector) {
    return Array.from(document.querySelectorAll(selector));
  }
  // 添加class
  Array.prototype.addClassName = function(className){
    this.forEach(d =>{
      d.classList.add(className);
    })
    return this;
  }

  // 添加css
  Array.prototype.css = function(options){
    this.forEach(d=>{
      Object.keys(options).map(k =>{
        d.style[k] = options[k];
      });
     return this;
    })

    return this;
  }
  // 查找元素
  Array.prototype.eq = function(idx){
    return this[idx];
  }

jQuery初体验

console.log($(".hello").addClassName("nihao").css({
    "width": "2rem",
    "height": "1rem",
    "color": "red"
  }).eq(2)); //测试一下

通过上述的一顿操作可以实现链式调用，越来越像那么回事了。

我们希望将更多的细节封装在对象的内部

class JQuery{
    constructor(selector) {
      this.elements = Array.from(document.querySelectorAll(selector));
    }

    eq(index){
      return this.elements[index];
    }
    css(options){
      this.elements.forEach(d=>{
        Object.keys(options).map(k =>{
          d.style[k] = options[k];
        });
      })
      return this;
    }
    addClass(className){
      this.elements.forEach(d=>{
        d.classList.add(className);
      })
      return this;
    }
  }

越来越jQuery

console.log(new JQuery("#jq").addClass("hha").css({
  "width": "2rem",
  "height": "1rem",
  "color": "red"
}).eq(1)); // 测试一下

换成es6语法进行简单的封装以后，发现依然可以实现，而且结构越来越清晰了呢，另外对于attr、html、text等方法没有实现。

来源：oschina

链接：https://my.oschina.net/u/2486137/blog/3234207

标签

jquery

Prototype

RED