自己动手写jquery

对于一个好的程序员，如果你需要大量使用一个框架，是无法忍受自己不知道这个框架的原理的，起初你可能只是调调api，慢慢你就忍不住去看看源码，看了几眼之后，你就会忍不住想自己写一个了。作为一个前端入坑不久的程序员，jquery我还只停留在调调api阶段。事实上如果没有dash，我根本不敢说自己会用jquery。
但是，我打算来个三级跳，自己写一个超简略版的jquery!

开始

var $ = (function(){
  //code
})();

首先我们的jquery是一个模块（对象），为了把它封装起来，我们需要使用IIFE.

var $ = (function(){
  return (function(selector){
    var q = {};
    q.selector = selector;
    q.nodes = document.querySelectorAll(selector);
    q.html = function(){
      return Array.prototype.map.call(this.nodes, function(){
        return node.innerHTML
      })
    }
  })
})();

上面的代码中，我们使用document.querySelectorAll函数查找所有匹配的HTMLElement并绑定到返回的对象上。我们还给返回的q对象创建了html函数，用来返回匹配对象的innerHTML，你可以这样使用：

$('p').html()   //返回所有p元素的innerHTML

each

jquery中有一个each函数,它传入一个函数作为参数，并对所有匹配的元素调用这个函数。下面这段代码应当输出所有p元素的innerHTML到控制台

$('p').each(function(item, i) {
            console.log(item.innerHTML)
        })

我们自己来写each函数

q.each = function(action){
      this.nodes.forEach(function(item, i){
        action(item,i)
      })
      return this;
    }

注意，我们在方法的最后，需要return this,这样让我们可以实现链式调用。调用也很简单

$('p').each(function(item,i){console.log(i, item.innerHTML)})

css

jquery中有一个css方法，用来修改dom元素的样式。下面这段代码可以让p元素中的字体变成20像素大小，绿色。而当css方法只接受一个参数的时候，则返回对应css属性，并不做修改。

$('p').css('font-size', "20px").css('color', 'green')
$('p').css('color')   //green

下面我们来实现这个方法。使用了CSSStyleDeclaration.prototype.setProperty来实现

function doCSS(prop,val){
  var args = argument
  if(Boolean(val)){    //setter
    this.each(function(node, i){
        CSSStyleDeclaration.prototype.setProperty.apply(node.style,args);
    });
    return this
  }else{                   //getter
    return this.nodes[0].style[prop];
  }
}

q.css = function(prop, val){
  return doCSS.call(this, prop,val);
}

这里需要注意的是我们在q.css方法中调用doCSS的时候，使用了call来手动设置this（上下文）。

doCSS.call(this, prop, val)

这里的this就能够正确指向我们的jquery对象q并传入doCSS函数，而在doCSS函数中，我们对对象q进行操作并返回。

attr

jquery中还有一个给dom对象添加属性的方法。方法和css差不多

function doATTR(prop, val){
  var args = arguments
  if(Boolean(val)){
    this.each(function(node, i){
      Element.prototype.setAttribute.apply(node, args);
    });
    return this;
  }else{
    return Array.prototype.map.call(this.nodes,
      function(node){
        return node.getAttribute(prop);
      });
  }
}

q.attr = function(prop, val){
      return doATTR.call(this, prop, val);
    }

测试一下

$('#test').attr('test', 'hello')
console.log($('#test').attr('test')) //hello

on

on也是jquery中非常常用的一个方法，用来给dom对象绑定事件，原理很简单，就是给每个HTMLElement设定属性'onxxx',比如要给某个元素添加单击事件，只需要修改node['onclick']

q.on = function(type, callback){
      this.each(function(node,i){
        node['on'+type] = callback
      })
      return this
    }

测试一下

$('p').on('click', function(event) {
                console.log(event)
            })

现在单击任何p元素，都会打印出相应的事件，event对象中包括了很多有用的属性，其中的target属性表示了被操作的dom元素。

小结

本文中我们尝试写了一些类似jquery的代码，首先使用IIFE对模块进行封装，并且实现了html,each,css,attr,on等方法。