[译] 7 个基础 JavaScript 函数

原文连接：7 Essential JavaScript Functions，by David Walsh

译者：翻译过程当中，对于原文的叙述作了部分修改。

debounce

防抖函数英文名叫“debounce function”，它一般是做为频发事件的回调使用的。对于 scroll、resize、key* 这类事件，若是不使用防抖函数处理，那么因为事件的频繁发生，触发回调逻辑的不断调用，极可能会发生性能问题。

下面提供了防抖函数一个参考实现 debounce：

// 返回一个函数，若是该函数被连续调用，那么这个过程当中不会触发 func 的调用。
// func 只会在连续调用暂停 N ms 后才被调用
// 若是参数 immediate 的值为 true，则回调 func 是在连续调用开始时就被调用（leading edge），
// 而不是等到连续调用暂停后的 N ms（trailing edge）
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 函数包装后，就能保证在指定的等待时间内（对应这里的 250ms），只会触发一次。这就能有效缓解程序的性能问题了。

poll

下面实现了一个轮训函数。这里的实现逻辑是：除非 fn 的调用返回真，不然每隔 interval ms 就再调用一次 fn，直到结果为真为止，而后返回结果；若是调用时间过长，或调用出错，就报错返回。

// 轮训函数
function poll(fn, timeout, interval) {
    var endTime = Number(new Date()) + (timeout || 2000);
    interval = interval || 100;

    var checkCondition = function(resolve, reject) {
        // 若是条件知足，就返回结果
        var result = fn();
        if(result) {
            resolve(result);
        }
      	// 若是条件不知足，且没有超时，就等待 interval ms 后再继续检查一遍
        else if (Number(new Date()) < endTime) {
            setTimeout(checkCondition, interval, resolve, reject);
        }
        // 调用时间过长，或调用出错，就报错返回
        else {
            reject(new Error('timed out for ' + fn + ': ' + arguments));
        }
    };

    return new Promise(checkCondition);
}

// 使用：轮训，确保元素为可见时，再进行后续逻辑处理
poll(function() {
	return document.getElementById('lightbox').offsetWidth > 0;
}, 2000, 150).then(function(data) {
    // 完成轮训，处理返回的数据
}).catch(function(err) {
    // 超时出错，处理错误
});
复制代码

轮训在 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() {
	return 'Fired!';
});

canOnlyFireOnce(); // "Fired!"
canOnlyFireOnce(); // "Fired!"
复制代码

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'); // https://davidwalsh.name/something
复制代码

函数内部保持一个连接元素，把输入的数据直接赋值给 href 属性，读取 href 属性时就拿到绝对地址了。

译注：这里用到了一个知识点，就是读取连接元素的 href 属性时，获得老是绝对路径。

isNative

下面的函数 isNative 用来检查一个函数是由浏览器原生提供的，还有由第三方建立的。

;(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;
}());

// 使用
isNative(alert); // true
isNative(myCustomFunction); // false
复制代码

这个函数写得并不漂亮，但它确实能完成任务！

insertRule

咱们能够经过一个选择器得到一个 NodeList（好比经过 document.querySelectorAll），并给每一个元素赋予样式，但更有效率的方式是直接设置选择器样式（像咱们在样式表中的作的那样）：

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)
复制代码

matchesSelector

咱们常常有验证输入数据的需求。要保证输入的是个真值，或者保证表单里的输入数据是有效的等一些状况。只有在这些数据验证经过了，才能进一步进行下一步的操做。可是，咱们又是怎样验证一个 DOM 元素是不是有效的呢？

下面提供的 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]')
复制代码

在我看来，这七个 JavaScript 函数是每一个开发者都应该保存在本身的工具箱里的。若是有什么遗漏，欢迎你们在评论区留言分享！

（正文完）

---

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。如今猫舍里养的都是布偶猫。若是你也是个爱猫人士而且有须要的话，不妨扫一扫她的【闲鱼】二维码。不买也没关系，看看也行。

（完）