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 相关文章推荐
javascript 写类方式之八
Jul 05 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
使用zrender.js绘制体温单效果
Oct 31 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
第十一节--重载
2006/11/16 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
PHP获取文件行数的方法
2015/06/10 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
javascript里的条件判断
2007/02/27 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
公司部门司机岗位职责
2014/01/03 职场文书
教育科研先进个人材料
2014/01/26 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
《西门豹》教学反思
2016/02/23 职场文书