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

2020-06-04 16:39:24 浏览数 (2)

前期准备

全局作用域问题

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

代码语言:javascript复制
(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
代码语言:javascript复制
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复制
// 用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);

1 人点赞