使用原生JS实现一个jQuery的API

发表于

原生JS操作

1
2
3
<ul style='border: 1px solid #666'>
  <li id='li'>Hi</li>
</ul>

代码结果：


  • Hi

现在，我想为 <li> 标签添加一个样式，

1
.red { color: red; }

并改变文本内容为“Thank you~”。用原生JS的写法就是：

1
2
li.classList.add('red')
li.textContent = 'Thank you~'

代码结果：


  • Thank you~

模仿jQuery实现一个API

如果要模仿jQuery，实现一个jQuery的API，那么实现方法如下：

  1. 封装函数。将每个功能封装成一个函数，需要使用到时调用这个函数即可。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* 封装添加样式的函数addClass */
    function addClass(node, className) {
      node.classList.add(className)
    }

    /* 封装设置内容的函数setText */
    function setText(node, text) {
      node.textContent = text
    }

    addClass(li, 'red')
    setText(li, 'Thank you~')

  1. 将第一个参数（节点）提取出来变成 node.functionName() 的形式。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function jQuery(node){
      return {
        addClass: function(className){
          node.classList.add(className)
        },
        setText: function(text){
          node.textContent = text
        }
      }
    }

    var node = jQuery(li)
    node.addClass('red')
    node.setText('Thank you~')

  2. 处理多个节点的情况。

    1
    2
    3
    4
    <ul style='border: 1px solid #666'>
      <li>Hi</li>
      <li>Welcome</li>
    </ul>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    function jQuery(nodeOrSelector){
      var elements = (typeof nodeOrSelector === 'string') ? document.querySelectorAll(nodeOrSelector) : { 0: nodeOrSelector, length: 1 }
      return {
        addClass: function(className){
          for(let i=0; i<elements.length; i++){
            elements[i].classList.add(className)
          }
        },
        setText: function(text){
          for(let i=0; i<elements.length; i++){
            elements[i].textContent = text
          }
        }
      }
    }

    var node = jQuery('li')
    node.addClass('red')
    node.setText('Thank you~')

  3. 简化jQuery函数名

    1
    2
    3
    window.$ = jQuery;
    $('li').addClass('red')
    $('li').setText('Thank you~')

最终运行结果：


  • Thank you~

  • Thank you~

总结

说白了，jQuery就是一个函数，它返回一个对象，里面包含节点的属性和方法。节点可以调用这些方法来操作DOM。

PS：完整代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.jQuery = function(nodeOrSelector){
  var elements = (typeof nodeOrSelector === 'string') ? document.querySelectorAll(nodeOrSelector) : {
    0: nodeOrSelector,
    length: 1
  }
  return {
    addClass: function(className){
      for(let i=0; i<elements.length; i++){
        elements[i].classList.add(className)
      }
    },
    setText: function(text){
      for(let i=0; i<elements.length; i++){
        elements[i].textContent = text
      }
    }
  }
}
window.$ = jQuery