文档章节

WEB开发者必备的7个JavaScript函数

大音希声
 大音希声
发布于 2017/03/23 14:48
字数 1292
阅读 2
收藏 0

我记得数年前,只要我们编写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'); // 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;
}());

// 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程序员都应该知道怎么用它们。你可以在评论里写出其它你认为必备的函数,分享出来,谢谢。

© 著作权归作者所有

共有 人打赏支持
大音希声
粉丝 1
博文 34
码字总数 12496
作品 0
北京
私信 提问
JavaScript 开发者必备的7个资源

JavaScript 最近几年已经由一个二流选手变成使用最广的函数式编程语言。越来越多的资源投入到这个语言的开发中。 我最近做了很多JS开发,有前台的,也有在后台使用 Node.js 的。我想在这里分...

虫虫
2012/03/17
8.2K
5
开发者必备的 12 个 JavaScript 库

现在 web 设计是最有趣的了,做好 web 设计不仅要熟练使用 Javascript,css 和 html 等,还要有自己的创意设计。为了方便大家发挥自己的创意,就产生了很多 JS 框架,Node.js 扩展等等。有了...

oschina
2014/01/31
7.4K
10
JavaScript 开发者的 10 款必备工具

JavaScript,一种所有主流浏览器都支持的语言,是开发基于浏览器的 Web 应用程序的主力,几乎每年都会受到来自众多开发人员的关注。自然地,框架和库的生态系统自然而然地围绕着 JavaScript...

oschina
2017/10/19
1K
0
Web 开发者不能错过的 10 个 JavaScript 工具

当涉及到web开发时,JavaScript工具仍然是最麻烦的问题之一。许多app和工具能使你的开发生活极其迅速与现代。就在几年前,人们还只是使用JavaScript来增强一些特效,诸如闪烁的文字之类。但也...

oschina
2013/09/05
7.5K
15
Web、移动开发资源、开源工具整理

整理了一些Web、移动开发资料,开源工具,供需要的朋友们查阅: Web移动开发各类网站学习资源: 成为优秀的Web移动开发者:编程资源大全 成为优秀的Web移动开发者:前端开发学习资源集合 成为...

咲晚杍
2014/03/13
0
1

没有更多内容

加载失败,请刷新页面

加载更多

glide 下载golang.org包问题

今天编译Uber的Aresgo。依赖管理用 glide,下载golang.org 包的时候遇到问题。 方法一: 设置 glide mirror glide mirror set https://golang.org/x/mobile https://github.com/golang/mobi...

shengjuntu
9分钟前
0
0
4.线程

线程是操作系统中最小的执行单元。 它本身不是一个程序,而是在程序中运行。 换句话说,线程并不相互独立,并与其他线程共享代码段,数据段等。 这些线程也被称为轻量级进程。 线程状态 新线...

Eappo_Geng
15分钟前
0
0
在Linux上编译LLVM/Clang 8.0.0等全部源代码

本教程使用的操作系统是Ubuntu Linux 18.04.2 LTS版本,要编译的LLVM源代码是8.0.0。 1、安装必要的软件。它们是:build-essential/cmake/swig/python-swigpk/libxml2/libxml2-dev/libncurs...

ryanliue
23分钟前
2
0
毕业季,我的Linux求职之路

秋招终于告一段落了,本硕的七年求学之路也快画上了句号。回首求职的这一段日子,痛苦并快乐着。感谢所有陪伴着我走过这一段路程的同学,所有的辛酸都值得铭记。求职的过程中在网上看了很多的...

linux-tao
53分钟前
3
0
Mybatis动态语句,if test字符串不用进行null判断

描述:根据creator列进行过滤获取image表的数据。 代码如下: @Select("<script>" + " select * from image " + " <where>" + " <if test='isAllCreator != 1'> ......

Coder顾
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部