模拟jQuery的工厂函数

最新推荐文章于 2024-08-04 16:33:59 发布

aachu

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量124

点赞数

文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_50538977/article/details/109483023

版权

模拟jQuery的工厂函数

在工作中一些不能使用jQuery库的场景下，我们又想使用其中的一些方法来高效率编程，我们可以自己手动实现jQuery工厂函数，这里实现基本选择器举例。

基本思路如下

定义一个函数接收一个字符串参数
定义一个存储元素的数组
截取字符串中的第一个字符，根据此字符来判断是哪个选择器
根据截取的字符串内容，来判断是哪一个选择器，并调用DOM中相应的方法
将数组返回
定义一个自调函数，并将此函数放入自调函数，然后开放给全局作用域

示例代码

(function(global){
  //定义一个工厂函数 - 接收字符串类型的选择器
  var woQuery = function (selector) {
    //定义一个数组 - 存储定位页面元素
    var arr = [];
    //判断参数selector必须是字符串类型
    if (typeof selector === 'string') {
      var strIndex = selector.substring(0, 1);
      if (strIndex === '#') {
        //实现ID选择器的功能 - #id
        var strId = selector.substring(1, selector.length);
        //返回一个DOM对象
        // return document.getElementById(strId);
        //将定位页面的元素添加到数组中
        arr.push(document.getElementById(strId));
      } else if (strIndex === '.') {
        //实现class选择器的功能 - .className
        var strClass = selector.substring(1, selector.length);
        // 返回一个DOM集合对象
        // return document.getElementsByClassName(strClass);
        // 将定位页面的元素添加到数组中
        var classNames = document.getElementsByClassName(strClass);
        for (var i = 0; i < classNames.length; i++) {
          arr.push(classNames[i]);
        }
      } else if (strIndex === '*') {
        //实现通配符选择器 - *

      } else {
        var tagNames = document.getElementsByTagName(selector);
        for (var i = 0; i < tagNames.length; i++) {
          arr.push(tagNames[i]);
        }
      }
    }
    //将构建的数组进行返回
    return arr;
  }
  //将一个局部变量开放给全局作用域
  global.$ = global.woQuery = woQuery;
})(typeof window !== 'undefined' ? window : this);

使用HTML来验证代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模拟jQuery选择器用法</title>
  <script src="./woQuery.js"></script>
</head>
<body>
  <button id="btn">按钮</button>
  <button class="cls">按钮</button>
  <script>
    var result = $('#btn');
    console.log(result);

    var results = $('.cls');
    console.log(results);
    console.log($('button'));
  </script>
</body>
</html>

验证结果如下：

在这里插入图片描述

aachu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟jQuery的工厂函数

模拟jQuery的工厂函数在工作中一些不能使用jQuery库的场景下，我们又想使用其中的一些方法来高效率编程，我们可以自己手动实现jQuery工厂函数，这里实现基本选择器举例。基本思路如下定义一个函数接收一个字符串参数定义一个存储元素的数组截取字符串中的第一个字符，根据此字符来判断是哪个选择器根据截取的字符串内容，来判断是哪一个选择器，并调用DOM中相应的方法将数组返回定义一个自调函数，并将此函数放入自调函数，然后开放给全局作用域示例代码(function(global){ /
复制链接

扫一扫