Web程序员必备的7个JavaScript函数


Posted in Javascript onJune 14, 2016

数年前,只要我们编写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) <= timeout) {
   if (fn()) {
    callback();
   }
  } else {
   window.clearInterval(pi);
   err();
  }
 }, interval)
}

禁止重复调用、只允许执行一次的once 函数

很多时候,我们只希望某种动作只能执行一次,就像是我们使用 onload 来限定只在加载完成时执行一次。下面这个函数就能让你的操作执行一次后就不会再重复执行。

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

这个 once 函数能够保证你提供的函数只执行唯一的一次,防止重复执行。

获取一个链接的绝对地址 getAbsoluteUrl

获取链接的绝对地址并不像你想象的那么简单。下面就是一个非常实用的函数,能根据你输入的相对地址,获取绝对地址:

var getAbsoluteUrl = (function() {
 var a;

 return function(url) {
 if(!a) a = document.createElement('a');
 a.href = url;

 return a.href;
 };
})();

// Usage
getAbsoluteUrl('/something');

这里使用了 a 标签 href 来生成完整的绝对URL,十分的可靠。

判断一个JavaScript函数是否是系统原生函数 isNative

很多第三方js脚本都会在全局变量里引入新的函数,有些甚至会覆盖掉系统的原生函数,下面这个方法就是来检查是不是原生函数的:

;(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

这个方法虽然不是那么的简洁,但还是可以完成任务的!

用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程序员都应该知道怎么用它们。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
Javascript中的迭代、归并方法详解
Jun 14 #Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 #Javascript
jQuery处理XML文件的几种方法
Jun 14 #Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 #Javascript
深入理解jQuery 事件处理
Jun 14 #Javascript
使用jquery获取url及url参数的简单实例
Jun 14 #Javascript
JS操作JSON方法总结(推荐)
Jun 14 #Javascript
You might like
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
表单复选框向PHP传输数据的代码
2007/11/13 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
php遍历CSV类实例
2015/04/14 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
封装html的select标签的js操作实例
2013/07/02 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
详解Angular5 服务端渲染实战
2018/01/04 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
JavaScript闭包相关知识解析
2019/10/19 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
Python2实现的图片文本识别功能详解
2018/07/11 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
应届毕业生个人求职信范文
2014/01/29 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
小学运动会加油稿
2015/07/22 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang