jQuery 源码分析笔记(5) jQuery.support

下面开始讲解“jQuery 源码分析笔记(5) jQuery.support”的完整攻略。

1. 简介

jQuery.support 是 jQuery 库中一个提供特性检测的方法。它用来检测是否支持一些新特性，以便在代码中做一些相应处理或者兼容性处理。

该方法会在 jQuery 库加载时自动执行，它会将检测结果保存在全局变量 jQuery.support 中，供程序使用。

2. 算法

jQuery.support 的算法比较简单，它主要通过创建一个 div 元素并给它应用样式来检测某个特性是否被浏览器支持。具体步骤如下：

1. 创建一个 div 元素，并给它应用样式 position: absolute; left: -1000px; top: -1000px;，将其隐藏于屏幕之外。

2. 给该 div 元素应用一些特殊的样式，并通过判断其样式来检测某个特性是否被浏览器支持。

例如，要检测 css3 的 box-shadow 特性是否被浏览器支持，可以先创建一个带有这个特性的 div 元素，然后通过判断其样式是否生效来检测支持情况。

var div = document.createElement("div");
document.body.appendChild(div);
div.style.boxShadow = "0 0 5px #888";
var supported = div.style.boxShadow === "0 0 5px #888";
document.body.removeChild(div);

可以看到，该方法并不会对 DOM 树造成任何影响，也不需要添加任何额外的标记或属性来判断特性是否被支持。这一点比较巧妙，既能够检测特性是否被支持，又不会对页面结构产生影响。

3. 支持类型

jQuery.support 主要支持以下几种类型的检测：

1. 原生属性

jQuery.support 可以用来检测原生属性是否被支持。例如，要检测浏览器是否支持 opacity 属性，可以使用以下代码：

jQuery.support.opacity = div.style.opacity != null;

1. CSS 样式

jQuery.support 可以用来检测 CSS 样式是否被支持。例如，要检测浏览器是否支持 box-shadow 样式，可以使用以下代码：

var div = document.createElement("div");
div.style.boxShadow = "0 0 5px #888";
var supported = div.style.boxShadow === "0 0 5px #888";

1. DOM 特性

jQuery.support 可以用来检测 DOM 特性是否被支持。例如，要检测浏览器是否支持 XMLHttpRequest 对象，可以使用以下代码：

jQuery.support.ajax = !!window.XMLHttpRequest;

4. 示例说明

以下是两个使用 jQuery.support 的示例：

示例一：检测浏览器是否支持 placeholder 属性

function isPlaceholderSupported() {
  var input = document.createElement('input');
  return 'placeholder' in input;
}

if (!isPlaceholderSupported()) {
  var inputs = document.getElementsByTagName('input');
  for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    if (input.type === 'text' && input.hasAttribute('placeholder')) {
      (function (input) {
        var placeholder = input.getAttribute('placeholder');
        input.value = placeholder;

        input.onfocus = function () {
          if (input.value === placeholder) {
            input.value = '';
          }
        };

        input.onblur = function () {
          if (input.value === '') {
            input.value = placeholder;
          }
        };
      })(input);
    }
  }
}

该示例中通过 jQuery.support 来检测浏览器是否支持 placeholder 属性。如果浏览器不支持该属性，则在所有具有 placeholder 属性的文本框元素上增加类似占位符的效果。

示例二：检测浏览器是否支持 localStorage

function isLocalStorageSupported() {
  try {
    localStorage.setItem('test', 'test');
    localStorage.removeItem('test');
    return true;
  } catch (e) {
    return false;
  }
}

if (!isLocalStorageSupported()) {
  alert('浏览器不支持localStorage！');
}

该示例中通过 jQuery.support 来检测浏览器是否支持 localStorage，如果不支持，则弹出提示框。

5. 总结

jQuery.support 提供了一种简单且可靠的方式来检测浏览器是否支持某些特性，它通过隐式创建元素并检测元素的样式来实现特性检测。在实际开发中，我们可以利用 jQuery.support 来做兼容性处理，以确保我们的代码在各种浏览器和设备上能够正常运行。