javascript最基本的函数汇总


Posted in Javascript onJune 25, 2015

我记得早期的 JavaScript ,要完成任何事情几乎都绕不开一些简单的函数,因为浏览器提供商实现功能有所差异,而且不只是边缘功能,基础功能也一样,如 addEventListener 和 attachEvent。虽然时代变了,但仍有一些函数是每个开发者都应该掌握的,以便于完成某些功能和提高性能。

debounce

对于高耗能事件,debounce 函数是一种不错解决方案。如果你不对 scroll、resize、和 key* 事件使用 debounce  函数,那么你几乎等同于犯了错误。下面的 debounce 函数能让你的代码保持高效:

// 返回一个函数,如果它被不间断地调用,它将不会得到执行。该函数在停止调用 N 毫秒后,再次调用它才会得到执行。如果有传递 ‘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);
  };
};
 
// 用法
var myEfficientFn = debounce(function() {
    
// 所有繁重的操作
}, 250);
window.addEventListener('resize', myEfficientFn);

debounce 函数不允许回调函数在指定时间内执行多于一次。当为一个会频繁触发的事件分配一个回调函数时,该函数显得尤为重要。

poll

尽管上面我提及了 debounce 函数,但如果事件不存在时,你就不能插入一个事件以判断所需的状态,那么就需要每隔一段时间去检查状态是否达到你的要求。

function poll(fn, callback, errback, timeout, interval) {
  var endTime = Number(new Date()) + (timeout || 2000);
  interval = interval || 100;
 
  (function p() {
      
// 如果条件满足,则执行!
      if(fn()) {
        callback();
      }
      
// 如果条件不满足,但并未超时,再来一次
      else if (Number(new Date()) < endTime) {
        setTimeout(p, interval);
      }
      
// 不匹配且时间消耗过长,则拒绝!
      else {
        errback(new Error('timed out for ' + fn + ': ' + arguments));
      }
  })();
}
 
// 用法:确保元素可见
poll(
  function() {
    return document.getElementById('lightbox').offsetWidth > 0;
  },
  function() {
    
// 执行,成功的回调函数
  },
  function() {
    
// 错误,失败的回调函数
  }
);

Polling 在 web 中已被应用很长时间了,并在将来仍会被使用。

once

有时候,你想让一个给定的功能只发生一次,类似于 onload 事件。下面的代码提供了你所说的功能:

function once(fn, context) { 
  var result;
 
  return function() { 
    if(fn) {
      result = fn.apply(context || this, arguments);
      fn = null;
    }
 
    return result;
  };
}
 
// 用法
var canOnlyFireOnce = once(function() {
  console.log('Fired!');
});
 
canOnlyFireOnce(); 
// "Fired!"
canOnlyFireOnce(); 
// nada 
          
// 没有执行指定函数

once 函数确保给定函数只能被调用一次,从而防止重复初始化!

getAbsoluteUrl

从一个字符串变量得到一个绝对 URL,并不是你想象中这么简单。对于某些 URL 构造器,如果你不提供必要的参数就会出问题(而有时候你真的不知道提供什么参数)。下面有一个优雅的技巧,只需要你传递一个字符串就能得到相应的绝对 URL。

var getAbsoluteUrl = (function() {
  var a;
 
  return function(url) {
    if(!a) a = document.createElement('a');
    a.href = url;
 
    return a.href;
  };
})();
 
// 用法
getAbsoluteUrl('/something'); 
// http://davidwalsh.name/something

a 元素的 href 处理和 url 处理看似无意义,而 return 语句返回了一个可靠的绝对 URL。

isNative

如果你想知道一个指定函数是否是原生的,或者能不能通过声明来覆盖它。下面这段便于使用的代码能给你答案:

;(function() {
 
 
// 用于处理传入参数 value 的内部 `[[Class]]` 
 var toString = Object.prototype.toString;
 
 
// 用于解析函数的反编译代码
 var fnToString = Function.prototype.toString;
 
 
// 用于检测宿主构造器 (Safari > 4 ;真的输出特定的数组)
 var reHostCtor = /^[object .+?Constructor]$/;
 
 
// 用一个标准的原生方法作为模板,编译一个正则表达式。
 
// 我们选择 'Object#toString' 因为它一般不会被污染。
 var reNative = RegExp('^' +
  
// 将 'Object#toString' 强制转为字符串 
  String(toString)
  
// 转义所有指定的正则表达式字符
  .replace(/[.*+?^${}()|[]/]/g, '$&')
  
// 用 '.*?' 替换提及的 'toString' ,以保持模板的通用性。
  
// 将 'for ...' 之类的字符替换掉,以兼容 Rhino 等环境,因为这些环境添加了额外的信息,如方法参数数量。
  .replace(/toString|(function).*?(?=()| for .+?(?=])/g, '$1.*?') + '$'
 );
 
 function isNative(value) {
  var type = typeof value;
  return type == 'function'
   
// 用 'Function#toString' (fnToString)绕过了值(value)本身的 'toString' 方法,以免被伪造所欺骗。
   ? reNative.test(fnToString.call(value))
   
// 回退到宿主对象的检查,因为某些环境(浏览器)将类型数组(typed arrays)之类的东西当作 DOM 方法,此时可能不遵循标准的原生正则表达式。
   : (value && type == 'object' && reHostCtor.test(toString.call(value))) || false;
 }
 
 
// 导出函数
 module.exports = isNative;
}());
 
// 用法
isNative(alert); 
// true
isNative(myCustomFunction); 
// false

这个函数虽不完美,但它能完成任务!

insertRule

我们都知道能通过选择器(通过 document.querySelectorAll )获取一个 NodeList ,并可为每个元素设置样式,但有什么更高效的方法为选择器设置样式呢(例如你可以在样式表里完成):

var sheet = (function() {
    
// 创建 <style> 标签
  var style = document.createElement('style');
 
    
// 如果你需要指定媒介类型,则可以在此添加一个 media (和/或 media query) 
  
// style.setAttribute('media', 'screen')
  
// style.setAttribute('media', 'only screen and (max-width : 1024px)')
 
  
// WebKit hack :(
  style.appendChild(document.createTextNode(''));
 
    
// 将 <style> 元素添加到页面
  document.head.appendChild(style);
 
  return style.sheet;
})();
 
// 用法
sheet.insertRule("header { float: left; opacity: 0.8; }", 1);

这对于一个动态且重度依赖 AJAX 的网站来说是特别有用的。如果你为一个选择器设置样式,那么你就不需要为每个匹配到的元素都设置样式(现在或将来)。

matchesSelector
我们经常会在进行下一步操作前进行输入校验,以确保是一个可靠值,或确保表单数据是有效的,等等。但我们平时是怎么确保一个元素是否有资格进行进一步操作呢?如果一个元素有给定匹配的选择器,那么你可以使用 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);
}
 
// 用法
matchesSelector(document.getElementById('myDiv'), 'div.someSelector[some-attribute=true]')

就这样啦,上述 7 个 JavaScript 函数是每个开发者都应该时刻记着的。有哪个函数我错过了呢?请把它分享出来!

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
JavaScript File分段上传
Mar 10 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 #Javascript
javascript中的Function.prototye.bind
Jun 25 #Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 #Javascript
jquery实现的缩略图预览滑块实例
Jun 25 #Javascript
使用javascript提交form表单方法汇总
Jun 25 #Javascript
Jquery结合HTML5实现文件上传
Jun 25 #Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 #Javascript
You might like
jQuery 源码分析笔记
2011/05/25 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
smarty中post用法实例
2014/11/28 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
Python管理Windows服务小脚本
2018/03/12 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
校长师德师风自我剖析材料
2014/09/29 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
学籍证明模板
2015/06/18 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书