;(function(win, doc){ // 返回所有的元素节点 var findNodes = function(){ var eles = doc.body.getElementsByTagName("*"); var i = eles.length, nodes = [], found; while(i){ i -= 1; found = eles[i]; if(found.nodeType == 1){ nodes.push(found); } } return nodes; }; // 隐藏所有的 var hide = function(nodes){ var i = 0, max = nodes.length; for(; i < max; i++){ nodes[i].style.display = 'none'; } }; hide(findNodes());// 遍历两次,这种实现是低效的 })(window, document)
上面将findNodes()的返回结果作为回调,会循环两次,效率比较低。
下面进行改进:
// 重构findNodes() 以接受一个回调函数 var findNodes = function(callback){ var eles = doc.body.getElementsByTagName("*"); var i = eles.length, nodes = [], found; // 检查回调函数是否为可调用的 if(typeof callback !== "function"){ callback = false; } while(i){ i --; // 复杂逻辑 if(eles[i].nodeType == 1){ found = eles[i]; } // 现在运行回调函数 if(callback){ callback(found); } nodes.push(found); } return nodes; }; // 回调函数 var hide = function(node){ node.style.display = 'none'; }; // 找到指定节点, 并在后续执行中将其隐藏起来 findNodes(hide); // findNodes 唯一执行的是检查是否提供了回调函数。并且存在的话就执行。现在hide不需要遍历所有节点了 // 两秒以后再次显示 setTimeout(function(){ findNodes(function(node){ node.style.display = "block"; }); },2000);
1. 检查回调函数是否存在,存在则执行
2. 回调函数可以是一个已有的函数,或者也可以是一个匿名函数,可以在调用主函数时创建它。如上面的两秒后再次显示节点。