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


相关推荐

  • 2021年7月整理–简单方法 暴力激活成功教程WIFI密码

    2021年7月整理–简单方法 暴力激活成功教程WIFI密码2021年7月整理–简单方法暴力激活成功教程WIFI密码很多人都面临过短期租房、短期出差、住院而没有WIFI可用等境遇,有的是宽带太多办不起、有的是临时一阵子不值得折腾、有的是运营商不给扯线等等原因。然后就用手机下载了WIFI智能钥匙等APP,然后发现卵用么有,根本没有人共享自家WIFI密码给你用。以下是按步骤整理的软件和详细教程笔记本电脑+软件暴力激活成功教程出的密码我亲身用这个软件解开N多个密码此软件是家用路由器安全审计工具,切勿用作非法用途!!!….

    2022年10月13日
    4
  • cobbler配置「建议收藏」

    cobbler配置「建议收藏」cobbler配置1.配置163网络yum源,安装cobbler相关软件[root@localhost~]#cd/etc/yum.repos.d/[root@localhostyum.repos.d]#lsCentOS-Base.repoCentOS-Debuginfo.repoCentOS-Media.repoCentOS-Vault.repoCentOS-C…

    2025年8月5日
    3
  • k2p openwrt路由部署阿里云aliyun-ddns[通俗易懂]

    k2p openwrt路由部署阿里云aliyun-ddns[通俗易懂]之前一直有想法入手一个NAS,用于存储项目文件、照片及电影。本来想买个群晖218的,可喜的是赶上了星际蜗牛矿难(被骗的人好可怜,感同身受……),闪电下了一个D款的小蜗牛。星际蜗牛矿机安装群晖NAS的过程我就不说了,很简单,有需要的可以参照下面的文章。https://post.smzdm.com/p/adwl92zk/?send_by=8903307869家里的路由器是K2P同学帮刷的open…

    2022年5月23日
    86
  • 什么是递归,通过这篇文章,让你彻底搞懂递归

    什么是递归,通过这篇文章,让你彻底搞懂递归想了解更多数据结构以及算法题 可以关注微信公众号 数据结构和算法 每天一题为你精彩解答 也可以扫描下面的二维码关注啥叫递归聊递归之前先看一下什么叫递归 递归 就是在运行的过程中调用自己 构成递归需具备的条件 1 子问题须与原始问题为同样的事 且更为简单 2 不能无限制地调用本身 须有个出口 化简为非递归状况处理 递归语言例子我们用 2 个故事来阐述一下什么叫递归 1 从前有座山 山里有座庙 庙里有个老和尚 正在给小和尚讲故事呢 故事是什么呢 从前有座山 山里有座庙 庙里有个老和尚 正

    2025年6月22日
    4
  • 20140430-STVD中报can’t open file crtsi0.sm8的问题

    20140430-STVD中报can’t open file crtsi0.sm8的问题上述问题在

    2025年11月19日
    9
  • 我终于搞懂了TCP的三次握手和四次挥手(图片案例超详解)

    我终于搞懂了TCP的三次握手和四次挥手(图片案例超详解)本篇超级详细的讲解了TCP三次握手和四次挥手!欢迎阅读学习交流!

    2022年6月2日
    38

发表回复

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

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