JS基础之手动实现简易jQuery api

喜欢ヅ旅行 2022-01-21 08:23 217阅读 0赞

今天主要实现以下两个api：

1.  addClass：给指定标签增加class
2.  setText:给指定标签设置文本内容(textContent)

## 第一版 ##

第一版用到命名空间，命名空间相当于给自己的库一个名字，当函数名称冲突，不会会覆盖掉之前的函数。

var ffyjq = { };
    // 作用：获取传入的节点的兄弟节点
    ffyjq.getSiblings = function (node){ 
      // 取得传入的节点的父节点底下的所有子节点，包括传入的节点
      let itemList = node.parentNode.children;
      // array用于存放结果
      var array = { length:0};
      // 遍历所有子节点
      for(var i = 0;i<itemList.length;i++){ 
         // 判断子遍历的节点是否就是传入的节点，需求要求的是获取兄弟节点，所以要把传入的节点排除，其他节点放入array
         if(itemList[i] !== node){ 
           array[array.length] = itemList[i];
           array.length ++ ;
         }
      }    
      // 返回array
      return array;
    }
    ffyjq.addClass = 
    function (node,classes){ 
      for(var k in classes){ 
         var methodName = classes[k]?"add":"remove";
         node.classList[methodName](k);
      }  
    }
    ffyjq.setText = function(node,text){ 
        node.textContent = text;
    };
    var classes = { class1:true,class2:false,class3:true};
    ffyjq.addClass(item3,classes);
    ffyjq.setText(item3,"aaa");
    console.log(ffyjq.getSiblings(item3));

## 第二版 ##

第一版的缺点是只能去调用ffyjq.addClass(item3,classes)，而jq的调用方式是item3.addClass(classes)。想要实现jq的调用方式，有以下两种方法：

1.  扩展 Node 接口，直接在 Node.prototype 上加函数：

//核心代码不变，只是给Node.prototype增加方法
    Node.prototype.getSiblings = function (){ 
      let itemList = this.parentNode.children;
      var array = { length:0};
      for(var i = 0;i<itemList.length;i++){ 
         if(itemList[i] !== this){ 
           array[array.length] = itemList[i];
           array.length ++ ;
         }
      }    
      return array;
    }
    
    Node.prototype.addClass = function (classes){ 
      for(var k in classes){ 
         var methodName = classes[k]?"add":"remove";
         this.classList[methodName](k);
      }  
    }
    Node.prototype.setText= function(node,text){ 
        node.textContent = text;
    };
    console.log(item3.getSiblings.call(item3));
    item3.addClass.call(item3,{ class1:true,class2:false,class3:true});

这种方法的缺点是容易命名重复，并且修改原型本身就不合适。

1.  给节点加上接口，并且返回接口：

window.jQuery  = function(nodeOrSelector){ 
      var nodes;
      //传入的是字符串，就根据传入字符串查询节点
      if(typeof nodeOrSelector === 'string'){ 
        nodes = document.querySelectorAll(nodeOrSelector);
        //传入的是节点，就把节点放入伪数组
      }else if(nodeOrSelector instanceof Node){ 
        nodes = { 
          0:nodeOrSelector,
          length:1
        };
      }
      
      //给节点加上getSiblings 接口
      nodes.getSiblings = function(){ 
        
      };
      //给节点加上addClass 接口
      nodes.addClass = function(classes){ 
        for(var i = 0;i<nodes.length;i++){ 
          for(var k in classes){ 
            var methodName = classes[k]?"add":"remove";
            nodes[i].classList[methodName](k);      
          }  
        }
      };
      //给节点加上setText 接口
      nodes.setText = function(text){ 
        for(var i = 0;i<nodes.length;i++){ 
          nodes[i].textContent = text;
        }
      };
      return nodes;
    };
    //给个jQuery加缩写
    window.$ = jQuery;
    var node = $("ul>li");
    node.addClass({ blue:true});
    node.setText("hi");

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery基础之jQuery和原生js实现tab选项卡和电影排行榜

相关知识点 $("li").mouseenter()和 $("li").mouseleave()与("li").hover() $(this).addClas...

小鱼儿/ 2024年04月17日 23:14/ 0 赞/ 52 阅读

相关 jQuery基础练习 —— 简易版2048

效果图 ![在这里插入图片描述][20190930211208133.gif] 写在前面遇到的问题 ① 当布局完成后，给某一个模块添加了文字后，布局发生改

ゝ一纸荒年。/ 2023年08月17日 17:16/ 0 赞/ 59 阅读

相关 Node.js 实现简易爬虫

为什么选择利用node来写爬虫呢？就是因为cheerio这个库，全兼容jQuery语法，熟悉的话用起来真真是爽依赖选择 [cheerio][]： Node.js

￡神魔★判官ぃ/ 2022年09月30日 12:52/ 0 赞/ 182 阅读

相关 jquery dataTables.min.js API

demo: <table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W

今天药忘吃喽~/ 2022年06月16日 13:47/ 0 赞/ 212 阅读

相关 jQuery实现简易购物车

上上篇用JS写了个简单的购物车，学习了jQuery之后想要看看JavaScript和jQuery的区别到底有多大，于是又在原来的模板上用JQuery将购物车再次实现了一下。

忘是亡心i/ 2022年05月17日 11:47/ 0 赞/ 231 阅读

相关 JS实现简易网页计算器

js实现简易计算器。计算器的布局不像表格那么公正对称，所以布局这块相对比较繁琐，但是也可以通过这来练习一下CSS。一、实现功能 1. 完成计算器的加减乘除的基本计算功能

女爷i/ 2022年05月17日 10:52/ 0 赞/ 345 阅读

相关 JS基础之手动实现简易jQuery api

今天主要实现以下两个api： 1. addClass：给指定标签增加class 2. setText:给指定标签设置文本内容(textContent) 第一版第

喜欢ヅ旅行/ 2022年01月21日 08:23/ 0 赞/ 218 阅读

相关 JS === 实现简易调色板

<!DOCTYPE html> <html> <head> <title></title> <style type="t

淡淡的烟草味﹌/ 2021年12月03日 11:43/ 0 赞/ 261 阅读

相关如何实现简易版jQuery

window.jQuery=x=>{ //声明一个空对象 let jQuery = {};

妖狐艹你老母/ 2021年10月19日 00:44/ 0 赞/ 372 阅读

相关基础平台项目之集成Jquery.pagination.js实现分页

本博客介绍基于Spring Data这款orm框架加上 Jquery.pagination插件实现的分页功能。本博客是基于一款正在开发中的github开源项目的，项目代

一时失言乱红尘/ 2021年09月14日 03:14/ 0 赞/ 394 阅读