必备函数

原文地址  http://www.lupaworld.com/article-257869-1.html

我记得数年前,只要我们编写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);    };};// Usagevar 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;    };}// Usagevar 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;    };})();// UsagegetAbsoluteUrl(‘/something‘); // http://www.webhek.com/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;}());// UsageisNative(alert); // trueisNative(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 functionSheet(".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);}// UsagematchesSelector(document.getElementById(‘myDiv‘), ‘div.someSelector[some-attribute=true]‘)
就是这7个JavaScript函数,每个Web程序员都应该知道怎么用它们。你可以在评论里写出其它你认为必备的函数,分享出来,谢谢。

时间: 2024-10-14 00:46:58

必备函数的相关文章

PHP常用必备函数

array_change_key_case - 返回字符串键名全为小写或大写的数组 array_chunk - 将一个数组分割成多个 array_combine - 创建一个数组,用一个数组的值作为其键名,另一个数组的值作为其值 array_count_values - 统计数组中所有的值出现的次数 array_diff_assoc - 带索引检查计算数组的差集 array_diff_key - 使用键名比较计算数组的差集 array_diff_uassoc - 用用户提供的回调函数做索引检查来

SCADA 必备函数之 :关于消息的函数

Message Functions BroadcastSystemMessage//是将一条系统消息广播给系统中所有的顶级窗口. BroadcastSystemMessageEx//将消息发送到指定的收件人.该接收者可以是应用程序,可安装的驱动程序,网络驱动程序,系统级的设备驱动程序,或这些系统组件的任何组合.这个功能类似于BroadcastSystemMessage除了该功能可以从接收者返回的详细信息. DispatchMessage//该函数分发一个消息给窗口程序.通常消息从GetMessa

SCADA必备函数 实际测试。

一:GetTickCount() 综述: 这是一个Window的平台的API函数, 所以啊 在 MFC中 他的前面有两个冒号,像个和尚一样. 所以它不会受限于类,可以在MFC中任意位置使用. 这个函数使用的时候没有参数, 返回值是从操作系统启动所经过(elapsed)的毫秒数,数据类型是DWORD. 使用效果见下图: 看到了 什么就这这么简单 奔放.返回的之就是操作系统开机的时候. 有的同学要问了,这个有嘛用呢? 这个吗用处很多了. 比如你写个软件,对于未激活的版本 就可以限制软件使用时间,再比

你需要知道的swift必备函数 map

map这东西在oc中并未用过,但是swift在处理数组的时候显得格外的游刃有余,这归功于map这个函数: map函数  arr.map(<#T##transform: (Int) throws -> T##(Int) throws -> T#>) 其获取一个闭包表达式作为唯一参数,集合中的每个元素调用一次该闭包函数,并返回该元素所映射的值(也可以是不同类型的值).具体的映射方式和返回值类型由闭包来指定. 关于map,swift开发者大会唐巧有一片关于Monat的演讲,对map的解释

PHP必备函数详解

腾讯地图API简介、整理

目录 腾讯地图API 1 1.API概览... 1 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 1 1.2 URL API:... 2 1.3 静态图API:... 2 1.3 JavaScript API V2:... 2 1.4 另外还有Android SDK, Android 定位SDK,和IOS SDK,主要用于手机端开发.     2 2. 下面重点讲解JavaScript API V2:... 2 2.1最简单的地图-显示一张以坐标为中心

C#实现程序单例日志输出

对于一个完整的程序系统,一个日志记录是必不可少的.可以用它来记录程序在运行过程中的运行状态和报错信息.比如,那些不想通过弹框提示的错误,程序执行过程中捕获的异常等. 首先,在你的解决方案中,适当的目录中新建一个类,比如 LogManager: 编写如下代码: 1 /// <summary> 2 /// 日志管理 3 /// </summary> 4 public class LogManager 5 { 6 private string _logDir; // 日志文件存放目录 7

IOCP三层结构

iocp三层架构服务器模型 分类: GameEngine专题之IOCP(完成端口)2010-04-06 14:44 2611人阅读 评论(0) 收藏 举报 服务器socket工作测试应用服务器性能优化 本文作者:sodme本文出处:http://blog.csdn.net/sodme声明:本文可以不经作者同意任意转载,但请保留文章开始前的作者.出处及声明信息.谢谢. 由于个人工作的关系,接触高性能服务器的研发已经有一段时间了,在没有接触这个话题之前,我也和许多人一样,认为服务器的设计无非就是用一

DD XOFT虚拟键盘鼠标

下载:http://www.ddxoft.com/ 简介:最多用户选择,最简单易用,最稳定可靠 永久免费 系统底层集成,真正的驱动级硬件模拟 一键安装,即为电脑添加一对可完全编程控制的键盘鼠标,轻松自动化操作电脑 适用VB6,DELPHI,VC,BC,VB.NET,C#,JAVA,易语言等各种编程语言 支持 WINXP 及以上 32位和64位操作系统 个人桌面应用和游戏工作室装机必备 函数说明:所有函数(除特别说明外)的参数和返回值都为传值int32类型 DD_btn(参数) 功能: 模拟鼠标点