首页 > 开发 > HTML > 正文

WEB开发者必备的7个JavaScript函数

2016-04-07 16:05:02  来源:极客头条

    我记得数年前,只要我们编写JavaScript,都必须用到几个常用的函数,比如,addEventListener 和 attachEvent,并不是为了很超前的技术和功能,只是一些基本的任务,原因是各种浏览器之间的差异造成的。时间过去了这么久,技术在不断的进步,仍然有一些JavaScript函数是几乎所有Web程序员必备的,或为了性能,或为了功能。
  
 防止高频调用的debounce函数    这个 debounce 函数对于那些执行事件驱动的任务来说是必不可少的提高性能的函数。如果你在使用scroll, resize, key*等事件触发执行任务时不使用降频函数,也行你就犯了重大的错误。下面这个降频函数 debounce 能让你的代码变的高效:

// 返回一个函数,that, as long as it continues to be invoked, will not 
// be triggered. The function will be called after it stops being called for 
// N milliseconds. If `immediate` is passed, trigger the function on the 
// leading edge, instead of the trailing. 
function debounce(func, wait, immediate) { 
var timeout; 
return function() { 
var context = this, 
args = arguments; 
var later = function() { 
timeout = null; 
if (!immediate) 
func.apply(context, args); 
}; 
var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); 
if (callNow) func.apply(context, args); 
}; 
}; 
// Usage 
var myEfficientFn = debounce(function() { 
// All the taxing stuff you do
 }, 250);
  window.addEventListener('resize', myEfficientFn);

    这个 debounce 函数在给定的时间间隔内只允许你提供的回调函数执行一次,以此降低它的执行频率。当遇到高频触发的事件时,这样的限制显得尤为重要。
 设定时间/频率循环检测函数    上面提到的 debounce 函数是借助于某个事件的触发。但有时候并没有这样的事件可用,那我们只能自己写一个函数来每隔一段时间检查一次。

function poll (fn, callback, err, timeout, interval) {    
var startTime = (new Date()).getTime();    
var pi = window.setInterval(function(){        
if (Math.floor(((new Date).getTime() - startTime) / 1000)  4; really typed array specific)  
var reHostCtor = /^\[object .+?Constructor\]$/;  
// Compile a regexp using a common native method as a template.  
// We chose `Object#toString` because there's a good chance it is not being mucked with.  var reNative = RegExp('^' +    
// Coerce `Object#toString` to a string    
String(toString)    
// Escape any special regexp characters    
.replace(/[.*+?^${}()|[\]\/\\]/g, '\\$&')    
// Replace mentions of `toString` with `.*?` to keep the template generic.    
// Replace thing like `for ...` to support environments like Rhino which add extra info    
// such as method arity.    
.replace(/toString|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'  );    
function isNative(value) {    
var type = typeof value;    
return type == 'function'      
// Use `Function#toString` to bypass the value's own `toString` method      
// and avoid being faked out.      
? reNative.test(fnToString.call(value))      
// Fallback to a host object check because some environments will represent     
 // things like typed arrays as DOM methods which may not conform to the      
// normal native pattern.      
: (value && type == 'object' && reHostCtor.test(toString.call(value))) || false;  }    
// export however you want  
module.exports = isNative; }()); 
// Usage 
isNative(alert); 
// true 
isNative(myCustomFunction); 
// false

    这个方法虽然不是那么的简洁,但还是可以完成任务的!
 用JavaScript创建新的CSS规则 insertRule     有时候我们会使用一个CSS选择器(比如 document.querySelectorAll)来获取一个 NodeList ,然后给它们每个依次修改样式。其实这并不是一种高效的做法,高效的做法是用JavaScript新建一段CSS样式规则:

// Build a better Sheet object 
Sheet = (function() { 
// Build style 
var style = document.createElement('style'); style.setAttribute('media', 'screen');
 style.appendChild(document.createTextNode('')); document.head.appendChild(style); 
 // Build and return a single function 
 return function(rule){ 
 style.sheet.insertRule( rule, style.sheet.cssRules.length ); 
 } ; 
 })(); 
 // Then call as a function 
 Sheet(".stats { position: relative ; 
 top: 0px }") ;

    这些做法的效率非常高,在一些场景中,比如使用ajax新加载一段html时,使用上面这个方法,你不需要操作新加载的html内容。
 判断网页元素是否具有某种属性和样式 matchesSelector

function matchesSelector(el, selector) { 
var p = Element.prototype; 
var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) { return [].indexOf.call(document.querySelectorAll(s), this) !== -1; }; return f.call(el, selector); } 
// Usage 
matchesSelector(document.getElementById('myDiv'), 'div.someSelector[some-attribute=true]')

    就是这7个JavaScript函数,每个Web程序员都应该知道怎么用它们。你可以在评论里写出其它你认为必备的函数,分享出来,谢谢。