其实任何语言的操作也就是4个字:增 删 改 查。整个网页中,我们都一直强调HTML CSS JS分离,也就是行为,样式,结构互相独立。通过修改CSS样式达到美观的效果。在实际开发中,我们不得不用JS的动态形式去修改样式都操作。通过之前我们对JS的基础学习,我们也学习过很多获得元素的方式 。比如:document.getElementById(),获得单个元素。document.getElementsByTagName();获得一组元素。document.children,获得所有的子元素。等等方式.
当然我们也有了另一个选择器,document.querySelector(),获得单个元素,document.querySelectorAll()获得一组元素。不过这个方法,有兼容问题。一些低版本的浏览器不支持这个方法。那么我们有没有更好的方式来整合到一起呢?如果浏览器直持,那就用querySelector这个选择器,如果不支持就用传统的选择器来获得元素。我自己也总结了一下,就用querySelector这个选择器写了一个小工具,后续我再把改进版的工具分享给大家。
还是用闭包的方式来实现,方便调用,变量也不会污染,也符合耦合思想和组件化和模块化的主题。闭包的使用在这就不做过多的解释了。关于闭包,主流的写法大概就两种,其实都不难理解,我就先给大家看一下。(function(){})()和(function(){}())。前者见的比较多,后者可能大家偶尔会看到,我自己习惯性的喜欢用第二种。写这个小工具,我会用到到数组的的一些方式。以及面向对象的一些小技巧,上下调用(call与apply),还用了回调函数的技巧。
话不多说,上代码,注释我也就写在一起了。
(function(window, undefined) {}(window))
//拆分FOR
function each(arr, callback) {
//for循环
for(var i = 0; i < arr.length; i++) {
//如果满足条件跳出,用call连接
if(callback.call(arr[i], i, arr[i]) === false) {
//跳出
break;
}
}
//返回数组
return arr;
};
//选择器
function select(selector, results) {
//申明数组
results = results || [];
//用数组接收,,利秀apply,数组放前面
Array.prototype.push.apply(results, document.querySelectorAll(selector));
//返回数组
return results;
}
//定义工具
window.ddTools=window.dd={
each:each,
select:select
}
}(window))