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

Dreamy.TZK

发布于 2020-06-04 16:39:24

3210

发布于 2020-06-04 16:39:24

文章被收录于专栏：小康的自留地小康的自留地

前期准备

全局作用域问题

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

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

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

选择器

实现一个选择器，用于替代getElementById、getElementsByClassName、getElementsByTagName三种获取方式。

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

对于id选择器或class选择器来说，传入形参为#id或.class。那么只需要去匹配第一个字符即可。
如果不匹配以上两种情况，那么可以视为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);

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-06-03，如有侵权请联系 cloudcommunity@tencent.com 删除

class