使用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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • #2006 – MySQL server has gone away 问题解决方法

    #2006 – MySQL server has gone away 问题解决方法

    2021年11月23日
    40
  • 群、环、域的概念,定义和理解.

    群、环、域的概念,定义和理解.群、环、域的概念,定义和理解.以下链接很好的解释了群环域的概念.http://sparkandshine.net/algebraic-structure-primer-group-ring-field-vector-space/群的定义:(Group)群是一个特殊的集合,这个集合需要满足4条性质.1,2,3,4blablabla,就叫1个群.也叫群公理定义.我这里要说的是,并不是每个集合都能够同时满足这4条性质的.例如第一条:totality,整体性或封闭性.集合中的两个

    2022年6月19日
    31
  • Linux下Centos7对外开放端口

    Linux下Centos7对外开放端口概要最近在docker下搭建MySQL和Redis环境,远程linux主机内部网络都走通了,但是就是外网无法连接远程服务器的MySQL和Redis。经过一番查找和学习,终于找到了问题,不仅远程服务器上docker要做好内部和外部端口的映射,关键还要对对外开放的端口添加到防火墙中。内容介绍的逻辑是:本篇文章先记录Centos7下查看防火墙状态和网络状态命令;下一篇将介绍通过docker…

    2022年9月7日
    0
  • PPT 中插入域代码公式的方法

    PPT 中插入域代码公式的方法PPT中插入域代码公式的方法插入对象,选择Word*Document,或OpenDocument都可以; 在新打开的页面中,选择插入文档部件,再选择域代码; 在域代码选项中,选择Eq,具体语法如下。域代码:Eq(公式)域注意:我们希望能够尽快以你的语言为你提供最新的帮助内容。本页面是自动翻译的,可能包含语法错误或不准确之处。我们的目的是使此内容能对你有所帮助。可以在本页面底部告诉我们此信息是否对你有帮助吗?请在此处查看本文的英文版本以…

    2022年6月1日
    230
  • kafka删除topic消息的四种方式[通俗易懂]

    kafka删除topic消息的四种方式[通俗易懂]方法一:快速配置删除法(简单粗暴,如果这个主题有程序还在消费都,此时KAFKA就gameover)1.kafka启动之前,在server.properties配置delete.topic.enable=true2.执行命令bin/kafka-topics.sh–delete–topictest–zookeeperzk:2181或者使用kafka-manager集群管理工具删除注意:如果kafka启动之前没有配置delete.topic.enable=true,topic只会标记

    2022年10月16日
    1
  • 一个线程有几个threadlocal_thread线程

    一个线程有几个threadlocal_thread线程基本概念程序是指令的有序集合,其本身没有任何运行的含义,是一个静态的概念。而进程是程序在处理机上的一次执行过程,它是一个动态的概念。进程是由程序、数据和进程控制块三部分组成的。进程是操作系统资源分配的基本单位,而线程是任务调度和执行的基本单位。每个进程都有独立的代码和数据空间(程序上下文),程序之间的切换会有较大的开销;线程可以看做轻量级的进程,同一类线程共享代码和数据空间,每个线程都有自己…

    2022年10月23日
    0

发表回复

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

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