实现jquery的addClass和text方法

Posted on |

jquery的简介

又开始写博客啦。
jquery是最常用的js库。因为dom api过于难用，而jquery很好的完善了这一点，所以现有网站的有超过一半的页面引入了jquery。

jquery的原理

jquery是一个构造函数，构造函数返回了和查询参数匹配的节点，并在原型上实现很多好用的方法。
jquery的这种实现方式，另起炉灶，没有直接修改dom节点的原型，避免了潜在的冲突。

仿照jquery实现addClass和text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
window.jQuery = function(nodeOrSelector) {
  // 根据nodeOrSelector的类型构造伪数组，伪数组由匹配的dom元素组成
  let nodes = {};
  if(typeof nodeOrSelector == 'string'){
    let temp = document.querySelectorAll(nodeOrSelector);
    for(let i = 0; i < temp.length; i++){
      nodes[i] = temp[i];
    }
    nodes.length = temp.length;
  } else if(nodeOrSelector instanceof Node){
    nodes = {
      0: nodeOrSelector,
      length: 1
    };
  }
  
  // 实现addClass方法，jquery是利用原型实现的，这里直接绑定在对象上
  nodes.addClass = function(classes) {
    for(let i=0; i < nodes.length; i++){
       classes.forEach(function(someClass) {
         nodes[i].classList.add(someClass);
       });
    }    
  };
  // 实现text方法，参数存在就设置节点的内容,参数不存在就显示节点内容
  nodes.text = function(text){
    if(text === undefined){
      var texts = [];
      for(let i=0; i<nodes.length; i++){
        texts.push(nodes[i].textContent);
      }
      return texts.concat();
    } else if(typeof text === 'string'){
      for(let i=0; i<nodes.length; i++){
        nodes[i].textContent = text;
      }
    }
  };
  return nodes;
};
// 给jQuery一个好用的别名
window.$ = window.jQuery