js .has_使用has.js进行JavaScript功能检测

js .has

Dojo Toolkit Project Lead Peter Higgins has been working on an exciting new project called has.js.  Higgins describes this project best:

Dojo Toolkit项目负责人Peter Higgins一直在致力于一个令人兴奋的名为has.js的新项目。 希金斯最能描述这个项目：

Browser sniffing and feature inference are flawed techniques for detecting browser support in client side JavaScript. The goal of has.js is to provide a collection of self-contained tests and unified framework around using pure feature detection for whatever library consumes it.

浏览器嗅探和功能推断是用于检测客户端JavaScript中的浏览器支持的有缺陷的技术。 has.js的目标是提供一个独立测试和统一框架的集合，围绕使用纯功能检测的任何库进行消耗。

Simply put, has.js tests the browser environment to discover if the browser supports any given feature.  has.js includes a growing number of tests, ranging in many categories, including:

简而言之，has.js测试浏览器环境以发现浏览器是否支持任何给定功能。 has.js包含越来越多的测试，涉及许多类别，包括：

• EcmaScript 5 features (Object.freeze, Array.map, etc.)
  EcmaScript 5功能(Object.freeze，Array.map等)
• CSS features (rgba, border radius, etc.)
  CSS功能(rgba，边框半径等)
• HTML5 and advanced JavaScript APIs (classList, placeholder attribute, etc.)
  HTML5和高级JavaScript API(classList，占位符属性等)
• Script loading features (defer, async)
  脚本加载功能(延迟，异步)
• Native JSON, Audio, Video support
  本机JSON，音频，视频支持
• XHR support
  XHR支持
• ...and more!
  ...和更多！

Let's explore how to use has.js, its modular test collections, and create custom feature detection tests.

让我们探索如何使用has.js及其模块化测试集合，并创建自定义功能检测测试。

has.js的用法 (has.js Usage)

has.js uses a global has function which you pass a string to test against.  If we wanted to test the presence of a natively supported Array.forEach method, we would code:

has.js使用全局has函数，您可以传递一个字符串进行测试。 如果我们想测试本地支持的Array.forEach方法的存在，则可以编写以下代码：

// If Array.forEach is not present...
if(!has("array-foreach")) {
	// ... create it!
	Array.prototype.forEach = function() {
		// ....
	};
}

The string passed to the has function represents the test's key as defined when the test was created.  What's a real test creation look like?  Let's review one!

传递给has函数的字符串表示创建测试时定义的测试键。 真正的测试创建是什么样的？ 让我们回顾一下！

has.js测试创建 (has.js Test Creation)

The code behind the Array.forEach test is short and sweet:

Array.forEach测试背后的代码简短而有趣：

(function(has, addtest, cssprop){

	var toString = {}.toString,
		EMPTY_ARRAY = [],
		FUNCTION_CLASS = "[object Function]";

	addtest("array-foreach", function(global, document, anElement){
		return toString.call(EMPTY_ARRAY.forEach) == FUNCTION_CLASS;
	});
})(has, has.add, has.cssprop);

has.js also provides an ES5 Array check which includes other has tests:

has.js还提供了ES5阵列检查，其中包括其他测试：

(function(has, addtest, cssprop){
	
	addtest("array-es5", function(){
		return has("array-every") && has("array-filter") && has("array-foreach") &&
		has("array-indexof") && has("array-isarray") && has("array-lastindexof") &&
		has("array-map") && has("array-reduce") && has("array-reduceright") &&
		has("array-some");
	});
	
})(has, has.add, has.cssprop);

Simple enough to create tests, right?  Let's create a few of our own!

创建测试很简单，对吧？ 让我们创建一些自己的！

自定义has.js测试创建 (Custom has.js Test Creation)

As you hopefully noticed in the tests above, the test itself is actually a function that returns true if the browser supports a given feature or false if the browser does not.  Let's create a test that tells us if the browser supports RGBA.

正如您希望在上面的测试中注意到的那样，测试本身实际上是一个函数，如果浏览器支持给定的功能，则返回true；否则，返回false。 让我们创建一个测试，告诉我们浏览器是否支持RGBA。

addtest("css-rgba", function(g, d, el){
    var re = /^rgba/,
        supported = null;

    if(has("css-enabled")){
      try{
          el.style.color = "rgba(1,1,1,0.5)";
          supported = re.test(el.style.color);
          el.style.color = "";
      }catch(e){}
    }
    return supported;
});

A test may also return null if a test is not applicable to the current browser. For example, browsers other than IE will return null for ActiveX, as ActiveX is an Microsoft-only technology.

如果测试不适用于当前浏览器，则测试也可能返回null 。 例如，由于ActiveX是仅Microsoft的技术，因此IE以外的浏览器将为ActiveX返回null。

Creating has.js modules specific to your project may be the best option if your web application requires many different features. These abstractions may allow you to code your application faster.

如果您的Web应用程序需要许多不同的功能，则创建特定于项目的has.js模块可能是最佳选择。 这些抽象可以使您更快地编写应用程序代码。

has.js正在增长！ (has.js is Growing!)

has.js is still in its infancy but the utility clearly has a bright future.  The beauty of has.js is that its functionality is extremely useful but the tests themselves are very simple to create.  If you have ideas for more tests or simply improvements to has.js, feel free to fork the project and send pull requests to the main repo.

has.js仍处于起步阶段，但该实用程序显然具有光明的前景。 has.js的优点在于其功能非常有用，但是测试本身却非常易于创建。 如果您有更多测试的想法或只是对has.js的改进，请随时分叉项目并将拉取请求发送到主仓库。

翻译自: https://davidwalsh.name/hasjs

js .has