使用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)
上一篇 2022年4月21日 上午9:00
下一篇 2022年4月21日 上午9:20


相关推荐

  • oracle错误代码大全(超详细)

    oracle错误代码大全(超详细)本篇文章是对oracle错误代码进行了详细的总结与分析,需要的朋友参考下ORA-00001:违反唯一约束条件(.)ORA-00017:请求会话以设置跟踪事件ORA-00018:超出最大会话数ORA-00019:超出最大会话许可数ORA-00020:超出最大进程数()ORA-00021:会话附属于其它某些进程;无法转换会话ORA-00022:无效的会话ID;访问被拒绝ORA-00023:会话引用进程私用内存;无法分离会话ORA-00024:单一进程模式下不允许从多个

    2022年7月17日
    13
  • 又一个新的开始「建议收藏」

    又有一段时间没有进行整理和总结输出了,其实最近也没有闲着,也是一直在看书学习状态,看Java并发编程相关的知识,之前买了《Java并发编程的艺术》,去年看了一遍。最近又买了《Java并发编程实战》,两本书都挺好的,《Java并发编程的艺术》这本看了一遍,最近在看其中的一些章节,又有新的一些体会,新的认识。很多时候看了一遍的书,就不会在读第二遍,但是有些书适合读两遍以上,要不然根本无法理解书中的精…

    2022年2月27日
    43
  • Android文字转语音引擎(TTS)简单比较及下载

    Android文字转语音引擎(TTS)简单比较及下载目前国内Android系统自带语音引擎包括华为小米等居然都是不支持中文语音功能,以下是在网上找到的谷歌、科大讯飞和百度的纯语音引擎apk,没有启动界面,安装后在设置中能找到。不知为什么这些引擎在官网上都是找不到的。百度网盘下载地址密码:3si0简单比较com.svox.pico系统自带不支持中文语音com.svox.classic搜svox搜到的,和上面类似不支…

    2022年6月27日
    334
  • 理解通配符掩码

    理解通配符掩码一、什么是通配符掩码通配符掩码是一个32位比特数,以点分十进制表示,告诉路由器数据包IP地址的哪些比特需要和access-list命令中给定的IP地址相匹配。二、通配符掩码的作用一条典型的ACL仅能指定一个要允许或拒绝IP的规则,如果要阻止多个地址或一段范围的地址,那么如使用典型的ACL规则,则需要添加多条才能满足。这样导致工作量增多,易出错且ACL执行效率…

    2022年7月24日
    17
  • 如何成为大数据架构师_业务架构师和数据架构师

    如何成为大数据架构师_业务架构师和数据架构师要想成为架构师这几点你必须关注!架构不是一个职业而是一种能力,每一种架构师只不过是在不同的领域里面使用不同的技术,没有什么可对比,就好比如你问一个篮球明星和一个足球明星有什么区别一样!01架构师需要考虑四个问题1.确定系统干什么不干什么,也就是说系统的边界在哪里?2.确定架构内部的模块与模块之间的关系,以及模块与外部之间的关系是什么?3.架构确定以后,有能力去指导…

    2025年5月28日
    9
  • Java代码求水仙花数

    Java代码求水仙花数这里写自定义目录标题Java代码求水仙花数Java代码求水仙花数//求水仙花数.//1.什么是水仙花数//2.水仙花数是一个三位数,且水仙花的个位,十位,百位的数字立法和等于原数。publicclassdemo_18{publicstaticvoidmain(String[]args){intnumber=0,x=0,y=0,z=0;//x表示3位数的百位上的数字,y表示三位百位上的数字,z表示三位数上个位的数字intcount

    2022年7月9日
    20

发表回复

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

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