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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
javascript cookies操作集合
Apr 12 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
javascript中的事件代理初探
Mar 08 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
使用preload预加载页面资源时注意事项
Feb 03 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
PHP+javascript模拟Matrix画面
2006/10/09 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
Python字符串匹配算法KMP实例
2015/07/18 Python
python如何使用unittest测试接口
2018/04/04 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
2014年消防工作实施方案
2014/02/20 职场文书
人事专员职责
2014/02/22 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
信息技术课后反思
2014/04/27 职场文书
求职意向书
2014/07/29 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书