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

数年前,只要我们编写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程序员都应该知道怎么用它们。

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

时间: 2016-06-12

js 字符串操作函数

concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf() – 返回字符串中一个子串第一处出现的索引.如果没有匹配项,返回 -1 . charAt() – 返回指定位置的字符. lastIndexOf() – 返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回 -1 . match() – 检查一个字符串是否匹配一个正则表达式. substring() – 返回字符串的一个子串.传入参数是起始位置和结束位置. replace() – 用来查找匹配一个

js正则函数match、exec、test、search、replace、split使用介绍集合

match 方法 使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回. stringObj.match(rgExp) 参数 stringObj 必选项.对其进行查找的 String 对象或字符串文字. rgExp 必选项.为包含正则表达式模式和可用标志的正则表达式对象.也可以是包含正则表达式模式和可用标志的变量名或字符串文字. 其余说明与exec一样,不同的是如果match的表达式匹配了全局标记g将出现所有匹配项,而不用循环,但所有匹配中不会包含子匹配项. 例子1: functi

js中通过split函数分割字符串成数组小例子

复制代码 代码如下: <script language="javascript"> str="2,2,3,5,6,6"; //这是一字符串 var strs= new Array(); //定义一数组 strs=str.split(","); //字符分割 for (i=0;i<strs.length ;i++ ) { document.write(strs[i]+"<br/>"); //分割后的

js中字符替换函数String.replace()使用技巧

定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp/substr,replacement)参数 描述 regexp/substr 必需.规定子字符串或要替换的模式的 RegExp 对象. 请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象.   replacement 必需.一个字符串值.规定了替换文本或生成替换文本的函数.

js 格式化时间日期函数小结

复制代码 代码如下: Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.g

javascript 手机号码正则表达式验证函数 原创

复制代码 代码如下: function checkMobile(){     var sMobile = document.mobileform.mobile.value     if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(sMobile))){         alert("不是完整的11位手机号或者正确的手机号前七位");         document.mobileform.mobile.focus();         return false;

js function定义函数使用心得

1.最基本的作为一个本本分分的函数声明使用. 复制代码 代码如下: function func(){} 或 var func=function(){}; 2.作为一个类构造器使用: 复制代码 代码如下: function class(){} class.prototype={}; var item=new class(); 3.作为闭包使用: 复制代码 代码如下: (function(){ //独立作用域 })(); 4.可以作为选择器使用: 复制代码 代码如下: var addEvent=ne

js中匿名函数的N种写法

匿名函数没有实际名字,也没有指针,怎么执行滴? 其实大家可以看看小括号的意义就应该可以理解.小括号有返回值,也就是小括号内的函数或者表达式的返回值,所以说小括号内的function返回值等于小括号的返回值,不难理解 (function(){})()可以将没有名字的函数执行了把- 关于匿名函数写法,很发散~ 最常见的用法: 复制代码 代码如下: (function() { alert('water'); })(); 当然也可以带参数: 复制代码 代码如下: (function(o) { alert

js 小数取整的函数

1.丢弃小数部分,保留整数部分 js:parseInt(7/2) 2.向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 3,四舍五入. js: Math.round(7/2) 4,向下取整 js: Math.floor(7/2)

Javascript Math ceil()、floor()、round()三个函数的区别

下面来介绍将小数值舍入为整数的几个方法:Math.ceil().Math.floor()和Math.round(). 这三个方法分别遵循下列舍入规则: ◎Math.ceil()执行向上舍入,即它总是将数值向上舍入为最接近的整数: ◎Math.floor()执行向下舍入,即它总是将数值向下舍入为最接近的整数: ◎Math.round()执行标准舍入,即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则). 下面是使用这些方法的示例: alert(Math.ceil(25.9))

JavaScript Math.ceil() 函数使用介绍

Math.ceil(x) -- 返回大于等于数字参数的最小整数(取整函数),对数字进行上舍入 ceil是ceiling的缩写,中文"上限"的意思 引用网址:http://www.dreamdu.com/javascript/Math.ceil/ ceil函数语法 Math.ceil(x); ceil函数参数 x -- 为number类型的数字 ceil函数返回值 返回大于等于x的最小整数 ceil函数示例 document.write(Math.ceil(5.99)); documen

JavaScript Math.ceil 方法(对数值向上取整)

JavaScript Math.ceil 方法 Math.ceil 方法用于对数值向上取整,即得到大于或等于该数值的最小整数.语法如下: Math.ceil(x) 参数说明: 参数 说明 x 必需.必须是一个数值. 提示:该方法与 Math.floor 方法正好相反. Math.ceil 方法实例 <script language="JavaScript"> document.write( Math.ceil(0.35) + "<br />"

JavaScript常用截取字符串的三种方式用法区别实例解析

stringObject.substring(start,stop) 用于提取字符串中介于两个指定下标之间的字符. start必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置. stop可选.一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1.如果省略该参数,那么返回的子串会一直到字符串的结尾. start从0开始 到stop(不包含stop)结束 不接受负的参数. stringObject.substr(start,

JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解

首先还是看看JavaScript: The Definitive Guide, 4th Edition中对三个函数的定义. Math.ceil(): round a number up Arguments: Any numeric value or expression Returns: The closest integer greater than or equal to x. ---------------------------------------------------------

解析php中var_dump,var_export,print_r三个函数的区别

下面的示例看看这三个函数的具体的区别,其中var_dump和var_export比较少用,但他们两者又很相似.所以可以看看: 复制代码 代码如下: <?php$a = array(1,1,32,322,3433,array(32,232,23232));$b = 1234;$c = "alsdfl;asdf";$d = 'a';$e = fopen("slsl.txt", "r");var_dump($a);echo "<b

PHP取整函数:ceil,floor,round,intval的区别详细解析

我们经常用到的PHP取整函数,主要是:ceil,floor,round,intval. ceil -- 进一法取整说明float ceil ( float value ) 返回不小于 value 的下一个整数,value 如果有小数部分则进一位.ceil() 返回的类型仍然是 float,因为 float 值的范围通常比 integer 要大. PHP取整函数例子 1. ceil() 例子 复制代码 代码如下: < ?php echo ceil(4.3); // 5 echo ceil(9.99

js中Math之random,round,ceil,floor的用法总结

<SPAN style="FONT-SIZE: 18px">1.Math.random(); 结果为0-1间的一个随机数(包括0,不包括1) </SPAN>  Math.random(); 结果为0-1间的一个随机数(包括0,不包括1) [html] view plaincopyprint?<SPAN style="FONT-SIZE: 18px"> 2.Math.floor(num); 参数num为一个数值,函数结果为num的整

Java Math.round(),Math.ceil(),Math.floor()的区别详解

Math.round() "四舍五入", 小数点后第一位<5 正数:Math.round(11.46)=11 负数:Math.round(-11.46)=-11 小数点后第一位>5 正数:Math.round(11.68)=12 负数:Math.round(-11.68)=-12 小数点后第一位=5 正数:Math.round(11.5)=12 负数:Math.round(-11.5)=-11 double d = 3.1415926; double d2 = 18.58;

oracle中函数 trunc(),round(),ceil(),floor的使用详解

1.round函数(四舍五入) 描述 : 传回一个数值,该数值是按照指定的小数位元数进行四舍五入运算的结果 参数: number : 欲处理之数值 decimal_places : 四舍五入 , 小数取几位 ( 预设为 0 ) select round(123.456, 0) from dual: 返回123 select round(123.456, 1) from dual; 返回123.5 select round(-123.456, 2) from dual; 返回-123.46 2.c