使用ES6+工厂模式模拟jquery代码「建议收藏」

使用ES6+工厂模式模拟jquery代码「建议收藏」使用ES6+工厂模式模拟jquery代码

大家好,又见面了,我是你们的朋友全栈君。

class jQuery {
  constructor(selector) {
    let splitSelector = selector.match(/([$#])(.*)/);
    if (splitSelector) {
      if (Object.is(splitSelector[1], '$')) {
        this.dom = document.querySelectorAll(splitSelector[2]);
      } else if (Object.is(splitSelector[1], '#')) {
        this.dom = document.getElementById(splitSelector[2]);
      } else {
        this.dom = document.querySelectorAll(selector);
      }
    } else {
      this.dom = document.querySelectorAll(selector);
    }
  }

  _isObject(obj) {
    const _toString = Object.prototype.toString;
    return Object.is(_toString.call(obj), '[object Object]');
  }

  addClass(className) {
    if (className) {
      if (this.dom.className) {
        let classList = this.dom.className.split(' ');
        let classNameList = className.split(' ');
        let concatClassList = classList.concat(classNameList);
        concatClassList = [...new Set(concatClassList)];
        this.dom.className = concatClassList.join(' ');
      } else {
        this.dom.className = `${className}`;
      }
    } else {
      throw new Error('必须传递参数');
    }
    return this;
  }

  removeClass(className) {
    if (className) {
      let classList = this.dom.className.split(' ');
      classList.splice(classList.findIndex(item => Object.is(item, className)), 1);
      this.dom.className = classList.join(' ');
    } else {
      throw new Error('必须传递参数');
    }
    return this;
  }

  html(data) {
    this.dom.innerHTML = data;
    return this;
  }

  css(params) {
    if (params) {
      if (this._isObject(params)) {
        for (let key in params) {
          this.dom.style[key] += params[key];
        }
      } else {
        if (arguments.length != 2) {
          throw new Error();
        } else {
          this.dom.style[arguments[0]] = arguments[1];
        }
      }
    } else {
      throw new Error('必须传递参数');
    }
    return this;
  }
}

window.$ = function (selector) {
  return new jQuery(selector);
};

// 测试代码
$('#div1').html('你好').addClass('cc dd bb').removeClass('bb').css({
   
   'color': '#f00', 'font-size': '20px'});
复制代码
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/107113.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • gmapping matlab实现_gmapping学习

    gmapping matlab实现_gmapping学习一、机器人地图机器人地图一般分为三种类型:栅格地图,拓扑地图,特征地图1、栅格地图栅格地图栅格地图,在物流信息技术中有所涉猎,其就是构建一个个“小方块”,利用颜色信息来区分的地图的位置信息。在机器人建图中,栅格地图容易构建,表示且保存位置的唯一,对于短路径的规划方便;但栅格地图的路径规划效率不高,空间浪费(栅格的分辨率不依赖于环境的复杂度)并且也需要精确的机器人位置估计,其对于物体识别的人机交互问…

    2022年6月16日
    35
  • SQL SELECT TOP 子句详解

    SQL SELECT TOP 子句详解SQLSELECTTOP子句SELECTTOP子句用于规定要返回的记录的数目。语法如下SELECTTOPnumber|percentcolumn_name(s)FROMtable_name;实例:从MyTables表里选取前两行数据实例2从MyTables表里取前百分之十的数据需要注意的是如下图那是我整张MyTables表的数据,可以看出根本没有十条数据,那那…

    2022年7月13日
    23
  • MATLAB绘图总结

    MATLAB绘图总结目录一些常用的MATLAB绘图方法二维图像绘制三维作图提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档一些常用的MATLAB绘图方法总结一下一些常用的MATLAB的绘图函数和参数设置,增强结果的可视化程度。二维图像绘制二维图像是在不同的平面坐标上将数据点连接起来的平面图像。常用的平面坐标有,直角坐标、极坐标、对数坐标等,MATLAB有很多常用的指令来绘制不同的二维图像。plot和fplotMATLAB中最常用的两个二维函数绘制函数plot()和fplot()pl

    2022年6月29日
    23
  • 使用vue-cli创建项目_vuecli3项目打包并运行

    使用vue-cli创建项目_vuecli3项目打包并运行vue-cli创建项目上一篇我们安装了vue-cli,接下来我们就使用该脚手架进行创建项目1.进入一个目录,创建项目创建项目命令如下:vuecreate<ProjectName&g

    2022年7月30日
    6
  • C++中double转string函数

    C++中double转string函数使用 stringStream 类 stringDouble doubled nbsp nbsp nbsp Need include nbsp nbsp nbsp usingnamespa nbsp nbsp nbsp stringstr nbsp nbsp nbsp stringstream nbsp nbsp nbsp ssd nbsp nbsp nbsp ssstr nbsp nbsp nbsp returnstr 返回的

    2025年8月8日
    3
  • FPGA中的流水线设计(Pipeline Design)[通俗易懂]

    FPGA中的流水线设计(Pipeline Design)[通俗易懂]流水线设计前言:本文从四部分对流水线设计进行分析,具体如下:第一部分什么是流水线第二部分什么时候用流水线设计第三部分使用流水线的优缺点第四部分流水线加法器举例第一什么是流水线流水线设计就是将组合逻辑系统地分割,并在各个部分(分级)之间插入寄存器,并暂存中间数据的方法。目的是将一个大操作分解成若干的小操作,每一步小操作的时间较小,所以能提高频率,各小操作能并行执行,所以能…

    2022年8月14日
    27

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号