Created
June 6, 2015 02:31
-
-
Save semlinker/ec8e21b97a609e76d164 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Reference http://davidwalsh.name/essential-javascript-functions?utm_source=javascriptweekly&utm_medium=email | |
//1.getAbsoluteUrl | |
var getAbsoluteUrl = (function() { | |
var a; | |
return function(url) { | |
if(!a) a = document.createElement('a'); | |
a.href = url; | |
return a.href; | |
}; | |
})(); | |
// Usage | |
getAbsoluteUrl('/something'); // http://davidwalsh.name/something | |
//2.once | |
function once(fn, context) { | |
var result; | |
return function() { | |
if(fn) { | |
result = fn.apply(context || this, arguments); | |
fn = null; | |
} | |
return result; | |
}; | |
} | |
// Usage | |
var canOnlyFireOnce = once(function() { | |
console.log('Fired!'); | |
}); | |
canOnlyFireOnce(); // "Fired!" | |
canOnlyFireOnce(); // nada | |
//3.debounce,it is useful for scroll,resize,key* event | |
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); | |
//4.poll | |
function poll(fn, callback, errback, timeout, interval) { | |
var endTime = Number(new Date()) + (timeout || 2000); | |
interval = interval || 100; | |
(function p() { | |
// If the condition is met, we're done! | |
if(fn()) { | |
callback(); | |
} | |
// If the condition isn't met but the timeout hasn't elapsed, go again | |
else if (Number(new Date()) < endTime) { | |
setTimeout(p, interval); | |
} | |
// Didn't match and too much time, reject! | |
else { | |
errback(new Error('timed out for ' + fn + ': ' + arguments)); | |
} | |
})(); | |
} | |
// Usage: ensure element is visible | |
poll( | |
function() { | |
return document.getElementById('lightbox').offsetWidth > 0; | |
}, | |
function() { | |
// Done, success callback | |
}, | |
function() { | |
// Error, failure callback | |
} | |
); | |
//5.isNative | |
;(function() { | |
// Used to resolve the internal `[[Class]]` of values | |
var toString = Object.prototype.toString; | |
// Used to resolve the decompiled source of functions | |
var fnToString = Function.prototype.toString; | |
// Used to detect host constructors (Safari > 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 | |
//6.insertRule | |
var sheet = (function() { | |
// Create the <style> tag | |
var style = document.createElement('style'); | |
// Add a media (and/or media query) here if you'd like! | |
// style.setAttribute('media', 'screen') | |
// style.setAttribute('media', 'only screen and (max-width : 1024px)') | |
// WebKit hack :( | |
style.appendChild(document.createTextNode('')); | |
// Add the <style> element to the page | |
document.head.appendChild(style); | |
return style.sheet; | |
})(); | |
// Usage | |
sheet.insertRule("header { float: left; opacity: 0.8; }", 1); | |
//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]'); | |
//rand | |
function rand(min, max, integer) { | |
var r = Math.random() * (max - min) + min; | |
return integer ? r|0 : r; | |
} | |
console.log(rand(2,5)); // float random between 2 and 5 inclusive | |
console.log(rand(1,100,true)); // integer random between 1 and 100 | |
//stripTags | |
function stripTags(htmlstr) { | |
var div = document.createElement('div'); | |
div.innerHTML = htmlstr; | |
return div.textContent; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment