框架封装

Posted 2020-08-14 程序猿1990

如果不使用框架,给页面的标签设置样式
document.getElementsByTagName("div");或者
var dvs = document.querySelectorAll("div"),
for(var i = 0; i < dvs.length; i++) {
dvs[i].style.border = "1px dotted blue";
}
这样写有很多缺点1.一个页面会有很多变量,造成全局变量污染
2.代码冗余 3.无法复用 4.编码繁琐,容易写错

所以需要函数来封装,从而优化代码,封装函数的注意点
1.函数名一般用动词作为开头 2.函数名字要与功能相匹配 3.封装函数要写必要的注释
在javascript中函数是一等公民（有很多特权，以及特殊的使用方式）
函数能够当作参数来传递，此时把函数称为：回调函数

封装一个each函数来执行循环的功能
var each = function(arr, callback) {
var i, length = arr.length;
for(i = 0; i < length; i++) {
// 此处，想让this指向：arr[i] 也就是 数组中的每一个元素
// if( callback(i, arr[i]) === false) {
// 第一个arr[i]表示：callback中this的指向
// 第二个arr[i]表示：表示数组中的当前值
if( callback.call(arr[i], i, arr[i]) === false) {
break;
}
}
};
each(arr, function() { //由于each使用了call方法,所有调用函数的时候回调函数的参数可以视情况不写
// console.log(this);
});

严谨的判断 document.getElementsByClassName兼容性的方法
// 1 首先，检验对象中是否具有这个方法
// 2 再检验这个方法的能力是否符合要求

var support = {};
support.getElementsByClassName = function() {
// 用来记录返回值，如果支持就返回true，否则返回false
var isExist = false;
// 判断 getElementsByClassName 是否是一个方法
if(typeof document.getElementsByClassName !== "function") {
return isExist;
}

// 如果是，就执行下面的逻辑
// 这些逻辑就是用来判断这个方法，是否符合我们的要求
// 验证：就是看些通过这个方法获取到的结果，是否是我们需要的DOM对象

// 动态创建一个div元素
var tempDiv = document.createElement("div");
// 生成一个随机的类名，并且保证了这个类名不会跟页面中的类名冲突
// （new Date - 0 ）是将日期格式转化为 数值类型
// 也可以使用 +new Date
var clsName = "itcast_" + ( new Date - 0 );
tempDiv.className = clsName;
// 将创建好的元素放到页面中去
document.body.appendChild(tempDiv);

// 判断 通过getElementsByClassName获取到的元素是否跟刚刚创建出来的元素
// 相同
// 如果相同，就说明符合要求，
// 如果不同，就说明不符合要求
var tempRet = document.getElementsByClassName(clsName);
if(tempRet) {
isExist = tempRet[0] === tempDiv;
}

// 把这个元素从页面中移除
document.body.removeChild(tempDiv);

return isExist;
}();

if(support.getElementsByClassName) {
console.log("存在");
} else {
console.log("不存在");
}

 

jquery中用正则表达式判断getElementsByClassName的兼容性
var support = {};
support.getElementsByClassName = function() {
//get方法的内置的方法，在转化为字符串格式的时候，是一个固定的格式！如果是用户声明的这种格式，会造成语法错误！ function getElementsByClassName() { [native code] }
var rnative = /^[^{]+\{\s*\[native \w/;
return rnative.test(document.getElementsByClassName);
}();