阅读 1435

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作

jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档对象模型(DOM)元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使jQuery函数库能够创建功能强大的动态网页以及网络应用程序

实际上jQuery可以看做将原生JavaScript库组合优化,通过调用不同的原生API进行二次开发,以实现比原生JavaScript的API更为简单、强大的功能。如果jQuery的功能没攘括你的需求,那么你可以自己写个jQuery的函数来满足自己的需求哦,下面来学习下如何封装一个“jQuery”函数

1 怎样封装函数才好

当我们需要自己封装一个函数时,可以直接将函数写进Node.prototype里面,也可以重新创建一个新的接口,那么这两者有什么区别呢?

  • 方法一:拓展Node接口 可以直接在Node.prototype上加我们所需要的函数,但是这种方法有个缺点,如果我们的函数名已经在Node库里面存在了,那么新函数就会覆盖已经存在的函数,会导致已有函数失效,这显然不是我们乐意看到的

  • 方法二:写个新的接口 重新创建一个接口,在新的接口里面写函数,这种方法既不会覆盖已有函数,又可以满足我们的需求,所以我们采取这种方式来封装函数

2 来写一个jQuery

2.1 选择器

当我们传入一个筛选条件时,我们希望能获取满足筛选条件的所有节点,这里要分情况来讨论了

如果筛选条件是一个节点,那么直接返回这个节点即可
如果筛选条件是一个字符串,那么就调用JavaScript的选择器,筛选所有符合字符串的节点

这里有小细节要处理一下,通过JavaScript选择器获取的是一个由符合条件的节点组成的伪数组,里面不仅包含了节点信息,还有一些其他内容
且筛选条件是一个节点的话,那么返回的就不是个伪数组了
为了保证结果的统一性,需要将伪数组里面的其他信息清除,如果结果不是伪数组,就将它变成一个伪数组

代码实现如下

  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
    };
  }
复制代码

2.2 写一个addClass()函数

addClass()函数的用途是将所选择的元素的class属性增加新内容

那么遍历所选择的元素,通过原生JavaScript里面的classList.add()函数即可是实现 代码实现如下

  nodes.addClass = function(classes){
      for(let i = 0; i < nodes.length; i++){
        nodes[i].classList.add(classes);
      }
  };
复制代码

2.3 再写一个setText()函数

我们通过setText()函数需要实现将元素的textContent内容改写成指定内容

同样的思路,遍历元素,逐个将textContent改写

代码实现如下

  nodes.setText = function(texts){
      for(let i = 0; i < nodes.length; i++){
        nodes[i].textContent = texts;
      }
  };  
复制代码

2.4 组合一下吧

各个部分完成之后,就可以将其组合封装成jQuery函数了

代码如下

window.jQuery = function(nodeOrSelector){
  //筛选元素
  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
    };
  }
  //增加class属性函数
  nodes.addClass = function(classes){
      for(let i = 0; i < nodes.length; i++){
        nodes[i].classList.add(classes);
      }
  };
  //改写textContent内容函数
  nodes.setText = function(texts){
      for(let i = 0; i < nodes.length; i++){
        nodes[i].textContent = texts;
      }
  };  
  //返回操作之后的内容
  return nodes;
}
复制代码

3 总结

jQuery没想象中的那么遥不可及,通过封装函数,我们也可以写一个自己的“jQuery”来实现我们自己需求

关注下面的标签,发现更多相似文章
评论