原生JavaScript实现一个简单的jQuery API

最新推荐文章于 2021-09-08 15:40:24 发布

原创最新推荐文章于 2021-09-08 15:40:24 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端同时被 3 个专栏收录

77 篇文章

订阅专栏

JavaScript

38 篇文章

订阅专栏

学习JavaScript

32 篇文章

订阅专栏

本文介绍如何从零开始构建一个简易版的jQuery库，包括基本的选择器功能、添加类名及设置文本内容等方法。

项目源码: http://jsbin.com/cuzimuf/edit?html,js,output

绑定jQuery

jQuery函数通常使用jQuery()的方法获取元素, jQuery通常用$代替. 可以通过下面的代码解决

//将jQuery添加到window中
window.jQuery
//将$指向jQuery
window.$ = jQuery

将jQuery和$添加到window的属性当中, 再将$指向jQuery. 则$和jQuery等价. 为啥要将$指向jQuery呢? 因为书写方便, 程序员肯定喜欢写精简的呀!

设置jQuery()

我们可以给jQuery属性赋一个方法, 这样我们就可以调用jQuery(selector)方法了.

window.jQuery = function(nodeOrSelector) {
    let nodes = {}
    //some codes 
    return nodes
}

应为$指向了jQuery, 那么我们也可以使用$(selector)方法. 我们无法确定会返回单个节点还是多个节点, 则返回一个nodes伪数组模拟即可.

$()方法要么接收一个节点, 要么接收一个css选择器. 那么我们就需要判断传入的参数. 当传入的参数为css选择器时, 可以使用querySelectorAll()方法

function(nodeOrSelector) {
  var nodes = {}
  if (typeof nodeOrSelector === 'string') {
      //接收选择器参数
    nodes = document.querySelectorAll(nodeOrSelector )
  } else if (nodeOrSelector instanceof Node) {
    //接收节点参数
    nodes = {0:nodeOrSelector, length: 1}
  }
  return nodes
}

添加方法

我们还可以通过jQuery返回的对象进行其他操作, 如添加类名, 设置文本等

var $li = $('ul > li')    //通过jQuer方法获得的对象我们通常在变量前加$以示区分

$li.addClass('red')    //添加类名
$li.setText('选项')  //设置文本

若想实现上述方法, 我们只需在jQuery的函数中添加方法即可.

window.jQuery = function(nodeOrSelector) {
//前面代码省略
  nodes.addClass = function(className) {
        //some codes
  }
  nodes.setText = function(text) {
        //some codes
  }
  return nodes
}

因为nodes是一个伪数组(对象), 那么我们需要遍历nodes才能设置每一个节点.

window.jQuery = function(nodeOrSelector) {
  nodes.addClass = function(className) {
    for(let i = 0; i < nodes.length; i++) {
    //为每一个节点添加类名
      nodes[i].classList.add(className)
    }
  }
  nodes.setText = function(text) {
    for(let i = 0; i < nodes.length; i++) {
    //为每一个节点设置文本
      nodes[i].textContent = text
    }
  }
}