专栏首页小康的自留地基于面向对象的工具库练习

基于面向对象的工具库练习

前期准备

全局作用域问题

解决这个问题是通过匿名函数,然后在匿名函数内创建对象,将window作为参数传入匿名函数,并将此对象赋值与window

(function (global) {
  // 判断global对象是否真的存在
  if (!global) {
    console.error("当前环境不是浏览器环境!");
    return false;
  }
  // 定义一个统一对外开放的对象
  var mytool = new Object();
  global.mytool = mytool;
})(window);

此时在全局作用域中便存在了一个对象mytool

选择器

实现一个选择器,用于替代getElementByIdgetElementsByClassNamegetElementsByTagName三种获取方式。

实现方式,将需要搜索的标签名(id,class,tagname)传入方法参数,通过内部处理返回一个数组。

  1. 对于id选择器或class选择器来说,传入形参为#id.class。那么只需要去匹配第一个字符即可。
  2. 如果不匹配以上两种情况,那么可以视为TagName
mytool.getElement = function (selector) {
    //   判断selector是否为空
    if (selector !== "" && selector !== undefined && selector !== null) {
        // 判断当前选择器
        var firstSelector = selector.slice(0, 1);
        var lastSelector = selector.slice(1);
        var result,
            arr = [];
        if (firstSelector === "#") {
            //   ID查找
            result = document.getElementById(lastSelector);
        } else if (firstSelector === ".") {
            // class查找
            result = document.getElementsByClassName(lastSelector);
        } else {
            // tagname查找
            result = document.getElementsByTagName(selector);
        }
        if (result.length) {
            for (var i = 0; i < result.length; i++) {
                arr.push(result[i]);
            }
        } else {
            arr.push(result);
        }
        return arr;
    }
};

开发历程及代码

时间

开发内容

2020-06-03

前期准备、选择器

// 用JavaScript面向对象的方式封装DOM中的操作

/**
 * 当前的作用域是全局(问题)
 */
(function (global) {
  // 判断global对象是否真的存在
  if (!global) {
    console.error("当前环境不是浏览器环境!");
    return false;
  }
  // 定义一个统一对外开放的对象
  var mytool = new Object();
  // 将统一的对象开放给window对象
  mytool.getElement = function (selector) {
    //   判断selector是否为空
    if (selector !== "" && selector !== undefined && selector !== null) {
      // 判断当前选择器
      var firstSelector = selector.slice(0, 1);
      var lastSelector = selector.slice(1);
      var result,
        arr = [];
      if (firstSelector === "#") {
        //   ID查找
        result = document.getElementById(lastSelector);
      } else if (firstSelector === ".") {
        // class查找
        result = document.getElementsByClassName(lastSelector);
      } else {
        // tagname查找
        result = document.getElementsByTagName(selector);
      }
      if (result.length) {
        for (var i = 0; i < result.length; i++) {
          arr.push(result[i]);
        }
      } else {
        arr.push(result);
      }
      return arr;
    }
  };
  global.mytool = mytool;
})(window);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 七、NodeJs数据库管理

    MySQL程序可以使用PHP study集成工具。链接、操作数据库可以使用phpstudy自带的工具也可以使用navicat工具。

    Dreamy.TZK
  • 二、fetch中的基础语法

    参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

    Dreamy.TZK
  • 七、NodeJs数据库管理

    MySQL程序可以使用PHP study集成工具。链接、操作数据库可以使用phpstudy自带的工具也可以使用navicat工具。

    Dreamy.TZK
  • AttributeError: 'list' object has no attribute 'keys'

    hankleo
  • python列表与元组的用法

    7.列表生成式   #[i*i for i in range(10)]       [i*i for i in range(10) if i>5]

    py3study
  • python学习(13)

    #coding=utf-8 result = [] for i in range(1,6): result.append(chr(97+i-1)+str(i))...

    py3study
  • 生成括号

    已知n组括号,开发一个程序,生成这n组括号所有的合法的组合可能例如:n = 3 结果为:["((())) "," (()())","()(()) "," ()...

    小飞侠xp
  • h5-worker多线程js

    在我们的印象当中,js都是单线程的,或者更多的是类似ajax这种异步加载的伪多线程(这里的伪多线程指的ajax发送请求,采用回调的方法,回调成功以后还是在主线程...

    envoke
  • [Leetcode][python]Restore IP Addresses/复原IP地址

    来自: https://shenjie1993.gitbooks.io/leetcode-python/093%20Restore%20IP%20Addre...

    后端技术漫谈
  • 口罩人脸检测与分类开源代码汇总

    最近因为疫情影响,口罩人脸检测与分类突然火了起来,首先是百度开源了相关模型,然后腾讯和阿里也分别称在云服务中提供了相关能力。

    CV君

扫码关注云+社区

领取腾讯云代金券