撩一下一些必要的js工具函数
不管是什么项目，总有一些基本的功能函数默默的躺在你的工具库中，为你遮挡bug，提升性能，一起来复习下！
debounce
当监听一些scroll，resize事件时，如果我们什么都不限制，srcoll事件在滚动过程中会一直触发，极大的影响性能，这个时候，就需要节流函数debounce。debounce函数返回一个函数，在给定的时间间隔下，连续被调用将不会触发。
/* 事件停止被触发N秒后才会再次触发回调
* @param {Function} func - 回调执行函数
* @param {String} wait - 触发间隔
* @param {Boolean} immediate - 是否延时执行
*/
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() {
// todo
}, 250);
window.addEventListener('resize', myEfficientFn);poll
很多时候，我们需要了解某个函数的执行状态，并根据状态执行相应的处理。在没有事件通知时，需要以一定的时间间隔轮询执行状态。
/* 轮询条件函数，根据状态执行相应回调
* @param {Function} fn- 条件函数
* @param {Function} callback - 成功回调
* @param {Function} errback - 失败回调
* @param {int} timeout - 超时间隔
* @param {int} interval - 轮询间隔
*/
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
}
);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!');
});getAbsoluteUrl
从字符串变量中获取绝对url路径并没有那么容易，URL构造函数必须提供必要的参数，getAbsoluteUrl函数可以单纯的从字符串输入中得到绝对路径。
var getAbsoluteUrl = (function() {
var a;
return function(url) {
if(!a) a = document.createElement('a');
a.href = url;
return a.href;
};
})();
// Usage
getAbsoluteUrl('/shirlyzhang'); // "http://imweb.io/shirlyzhang"isNative
当需要重写某个函数时，必须先确定其是否是原生函数。
(function() {
var toString = Object.prototype.toString;
var fnToString = Function.prototype.toString;
// 构造函数，数组
var reHostCtor = /^\[object .+?Constructor\]$/;
var reNative = RegExp('^' +
// 强制转换（Object-toString）为字符串
String(toString)
// 转移特殊字符
.replace(/[.*+?^${}()|[\]\/\\]/g, '\\$&')
// 替换 `toString` 为 `.*?`， 保持模板通用
// 替换 `for ...` 等字符来支持添加了额外信息的环境
.replace(/toString|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
);
function isNative(value) {
var type = typeof value;
return type == 'function'
// 使用 `Function#toString` 来绕过value原生的 `toString` 方法，避免误判
? reNative.test(fnToString.call(value))
// 回退到宿主对象检查。因为某些环境中，会将类型数组当做DOM方法。
: (value && type == 'object' && reHostCtor.test(toString.call(value))) || false;
}
module.exports = isNative;
}());
// Usage
isNative(alert); // true
isNative(myCustomFunction); // falseinsertRule
使用css选择器来选取节点修改样式不太高效，可以选择用js新建一段css样式规则插入。
var sheet = (function() {
var style = document.createElement('style');
// WebKit 兼容
style.appendChild(document.createTextNode(''));
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]')本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录