神刀安全网

撩一下一些必要的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); // false 

insertRule

使用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]') 

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 撩一下一些必要的js工具函数

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮