前期准备
全局作用域问题
解决这个问题是通过匿名函数,然后在匿名函数内创建对象,将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);