自己实现一个类似 jQuery 的函数库

假如我们有一个需求，需要给元素添加样式类，使用原生的JS很容易搞定。

1 抽取函数

function addClass(node, className){
    node.classList.add(className)
}
// 使用
var element = document.querySelector('#div1')
addClass(element, 'active')

2 引入命名空间

function addClass(node, className){
    node.classList.add(className)
}

var dom = {}
dom.addClass = addClass

// 使用
var element = document.querySelector('#div1')
dom.addClass(element, 'active')

在线预览

3 把 Node 放在前面

1. 使用原型, 侵入式

Node.prototype.addClass = function(className){
    this.classList.add(className)
}

// 使用
var element = document.querySelector('#div1')
element.addClass('active')

在线预览

2.使用构造函数，非侵入式

function Node2(node) {
  return {
    element: node,    
    addClass: function(className) {
      node.classList.add(className)
    }
  }
}

var element = document.querySelector('#div1')
var node2 = Node2(element)
node2.addClass('active')

4 完成简化版的 jQuery

将构造函数Node2的名称替换成 jQuery，

function jQuery(node) {
  return {
    element: node,    
    addClass: function(className) {
      node.classList.add(className)
    }
  }
}

var element = document.querySelector('#div1')
var node2 = jQuery(element)
node2.addClass('active')
// 给一个别名 $
window.$ = jQuery;

// 将上面的代码合并成一行后，是不是已经很像了
$(document.querySelector('#div1')).addClass('active')

5 继续优化，支持多个元素

window.jQuery = function(nodeOrSelector) {
  var nodes = {}
  // 检测传递的是元素还是一个选择器
  if (typeof nodeOrSelector === 'string') {
    var temps = document.querySelectorAll(nodeOrSelector); //伪数组
    for (let i = 0; i < temps.length; i++) {
      nodes[i] = temps[i]
    }
    nodes.length = temps.length
  } else if(nodeOrSelector instanceof Node){
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }

  nodes.addClass = function(className) {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].classList.add(className)
    }
  }
  
  nodes.getText = function(){
    var texts = []
    for (let i = 0; i < nodes.length; i++) {
      texts.push(nodes[i].textContent)
    }
    return texts.join('')
  }
  
  nodes.setText = function(text){
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].textContent = text
    }
  }  
  return nodes;
  
}
window.$ = jQuery

在线预览