JavaScript 프레임워크 디자인 - 브라우저 스니핑 및 기능 감지_javascript 기술

브라우저 스니핑은 더 이상 권장되지 않지만 일부 상황에서는 여전히 필요합니다. 예를 들어 일부 통계 스크립트가 있습니다. 표준 브라우저에서는 document.implementation.hasfeature가 제공되지만 버그가 있고 부정확합니다. 현재 w3c는 이 측면에 모든 사람의 관심을 보여주는 CSS.supports 메서드를 출시했습니다.

1. 브라우저를 결정합니다.

주요 브라우저에는 Firefox Opera Chorme Safari가 포함됩니다. 초기에는 이러한 프레임워크가 navigator.userAgent를 통해 판단되었습니다. 현재는 거의 모든 외국 브라우저에서 판단할 수 있습니다.

브라우저의 판단 스크립트와 관련하여 jQuery는 온톨로지에서 벗어나 플러그인으로 구성되었습니다. 더 많은 소개 방법이 있으니,

관련 모바일 기기 판단을 위해서는 jQuery mobile과 zepto의 소스코드를 살펴보는 것을 권장합니다.

코드 복사 코드는 다음과 같습니다.

isIPone = /isIPone/i.test(navigator.userAgent);
isIPone4 = window.devicePixelRatio >= 2 //웹페이지에서는 픽셀 대 포인트의 비율을 device-pixel-ratio라고 합니다. 일반 기기는 1, iPhone4는 2, 일부 Android 모델은 1.5입니다.
isIpad = /ipad/i.test(navigator.userAgent)
isAndroid = /android/i.test(navigator.userAgent)
isIOS = isIPone || isIpad

국내 브라우저의 경우 기본적으로 IE, 웹킷, 블링크 커널인 Tangrame이나 qwrap을 보면 됩니다.

2. 이벤트 지원 감지

프로토타입의 핵심 구성원인 Kangax는 특정 이벤트에 대한 브라우저의 지원을 확인하기 위해 기사를 작성했습니다. 제공된 구현은 다음과 같습니다.

  var isEventSupported = (function() {
    var TAGNAMES = {
      'select':'input','change':'input',
      'submit':'form','reset':'form',
      'error':'img','load':'img','abort':'img'
    }
    function isEventSupported(eventName){
      var el = document.createElement(TAGNAMES[eventName] || 'div');
      eventName = 'on' + eventName;
      var isSupported = (eventName in el);
      if (!isSupported) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
      }
      el = null;
      return isSupported;
    }
    return isEventSupported;
  })();

이제 jQuery 및 기타 프레임워크에서는 단순화된 버전의 스크립트를 사용합니다

DOMMouseScroll과 같은 일부 이벤트는 매우 유용합니다. Firefox는 mousesheel을 지원하지 않으며 대체용으로만 사용할 수 있습니다.

DOMContentLoaded는 domReady 구현에서 중요한 이벤트입니다. DOMNodeRemoved는 다른 요소 노드 또는 문서 조각일 수 있는 상위 노드에서 요소가 제거되는지 여부를 결정하는 데 사용되며 DOMAttrModified는 종종 시뮬레이션에 사용됩니다. IE의 onpropertyChange

CSS3는 두 개의 애니메이션을 추가합니다. 하나는 전환 애니메이션이고 다른 하나는 키프레임 트위닝 애니메이션입니다. 그들은 모두 이벤트가 끝날 때 이벤트 콜백을 사용합니다. 그러나 표준화 과정에서 브라우저가 부여한 이름은 거의 무작위였습니다. 이 역시 사전에 감지해야 합니다.

부트스트랩 구현은 다음과 같습니다. 상대적으로 거친 Modernizr에서 나온 거라고 들었습니다. 예를 들어, 귀하가 사용하고 있는 Oprera는 이미 이벤트가 없는 표준 이벤트 이름을 지원합니다. 여전히 oTransitionEnd를 반환합니다.

  $.supports.transition = (function(){
    var transitionEnd = (function(){
      var el = document.createElement('bootstarp'),
          transEndEventNames = {
            'WebkitTransition':'webkitTransitionEnd',
            'MozTransition':'transitionend',
            'OTransition':'OTransitionEnd otransitionend',
            'transition':'transitionend'
          };
        for (var name in transEndEventNames){
          if (el.style[name] !== undefined){
            return transEndEventNames[name]
          }
        }
    }());
    return transitionEnd && {
      end: transitionEnd
    }
  })();

키프레임 트윈 애니메이션은 Mass의 fx_neo 모듈에서 가져옵니다

  var eventName = {
    AnimationEvent:'animationend',
    WebKirAnimationEvent: 'WebKirAnimationEnd'
  },animationend;
  for(var name in eventName) {
    if (/object|function/.test(typeof window[name])){
      animationend = eventName[name]
      break
    }
  }

3. 스타일지원형사

css3은 많은 유용한 스타일을 제공하지만 문제는 각 브라우저에 고유한 전용 접두사가 있다는 것입니다. MassFramework는 이를 처리하기 위해 cssName 메소드를 제공하고, 그렇지 않은 경우에는 사용 가능한 카멜 케이스 스타일 이름을 반환합니다. null

  var prefixes = ['','-webkit-','-o-','-moz-','-ms-'];
  var cssMap = {
    "float" : $.support.cssFloat ? 'cssFloat' : 'styleFloat',background:'backgroundColor'
  };
  function cssName(name, host, camelCase){
    if(cssMap[name]) {
      return cssMap[name];
    }
    host = host || document.documentElement
    for (var i = 0 || n = prefixes.length; i < n; i++) {
      camelCase = $.String.camelize(prefixes[i] + name);
      if (camelCase in host) {
        return (cssMap[name] = camelCase)
      }
    }
    return null
  }

一个样式对于N种样式值，比如display有n种取值，如果要侦测浏览器是否支持某一种，会很麻烦。为此，浏览器做了一个善举，给出一个css.supports的API，如果不支持，则尝试下一个开源项目。显然，不是很完美。

https://github.com/termi/CSS.supports

4.jQuery的一些常用的特征的含义

jQuery在support模块例举了一些常用的DOM特征支持情况，不过名字起的很怪，不同版本差别也很大，本章以jQuery1.8为准。

leadingWhitespace:判定浏览器在进行innerHTML赋值时，是否存在trimLeft操作，这个功能原本是IE发明的，结果其他浏览器认为要忠于以后的原始值，最前面的空白不能神略掉，要变成一个文本节点，最终IE678返回false,其他浏览器返回true

tobody:指在用innerHTML动态创建元素时，浏览器是否会在table内自动补上tobody,jQuery希望浏览器别处理，让jQuery来补全。判断浏览器是否只能插入tobody。在表格布局的年代，这个特性十分受用。如果没有tbody,table会在浏览器解析到闭合标签时才显示出来。如果起始标签和闭合标签相隔很远，换言之，这个表格很长，用户会什么都看不到，但有了tbody分段显示和识别，避免了长时间空白后一下子显示出来的情况。

复制代码 代码如下:

    var div = document.createElement("div");
    div.innerHTML = ''
    alert(div.innerHTML) //=>ie678返回,其它返回

html.Serialize:判断浏览器是否完好支持用innerHTML转换一个符合html标签规则的字符串为一个元素节点，此过程jQuery称为序列化，但IE支持不够完好。包括scirpt link style mata在内的no-scope元素都转换失败。

style：这个命名很难看懂，不看代码不知道什么意思，真像是判定getAttribute是否返回style的用户预设值。IE678没有返回区分特性的特征，返回一个CSSStyleDeclaration对象。

hrefNormalized:判定getAttribute能否返回href的用户预设值。IE会补充给你完整的路径给你

opacity：判定浏览器是否支持opacity属性，ie678要使用滤镜

cssFloat: 判定float的样式在DOM的名字是那个，W3c为cssFloat,IE678为styleFloat

CheckOn: 在大多数浏览器中checkBox的value为on，chorme返回空字符串

optSelected: 判定是否正确取得动态添加option元素的seleted,ie6-10与老版的safari对动态添加option没有设置为true。解决办法，在访问selected属性前，先访问父节点的selectedIndex属性，再强制计算option的seleted.

<select id='optSelected'></select>
<script type="text/javascript">
  var select = document.getElementById('optSelected');
  var option = document.createElement('option');
  select.appendChild(option);
  alert(option.selected);
  select.selectedIndex;
  alert(option.selected)
</script>

optDisabled: 선택 요소의 비활성화 속성이 하위 요소의 비활성화된 값에 영향을 미치는지 여부를 결정합니다. Safari에서는 선택 요소가 비활성화되면 해당 하위 요소도 비활성화되어 값을 얻을 수 없게 됩니다.

checkClone: ​​​​checkbox 요소를 나타냅니다. selected=true로 설정되어 있고 여러 번 복제한 후에도 복사본이 true로 유지될 수 있습니까? 이 메서드는 safari4에서만 false를 반환하고 다른 메서드는 true를 반환합니다

inlineBlockNeedsLayout: 디스플레이:인라인 블록을 활성화하기 위해 hasLayout 메소드를 사용할지 여부를 결정합니다. 이 방법은 ie678에만 적용됩니다

getSetAttribute: 특성 속성을 구별할지 여부를 결정합니다. ie678만 false입니다

noCloneEvent: 요소 복제 시 attachmentEvent 바인딩 이벤트를 복제할지 여부를 결정합니다. 이전 버전의 IE와 해당 호환 모드만 false를 반환합니다.

enctype: 브라우저가 인코딩 속성을 지원하는지 확인합니다. IE67은 대신 인코딩 속성을 사용합니다.

boxModel: 브라우저가 콘텐츠 상자 상자 렌더링 모드에 있는지 확인

submitBubbles,changeBubbles, focusinBubble: 브라우저가 이러한 이벤트를 지원하는지 확인하고 문서에 버블링합니다

shrinkWrapBlocks: 요소가 하위 요소에 의해 늘어날지 여부를 결정합니다. IE678에서 대체되지 않은 요소는 size 및 hasLayout이 설정된 경우 상위 요소를 확장합니다.

html5Clone: ​​​​cloneNode를 사용하여 HTML5 새 태그를 복제할 수 있는지 확인합니다. 이전 버전의 IE는 이를 지원하지 않습니다. 외부 HTML을 사용해야 합니다

deleteExpando: 요소 노드의 사용자 정의 요소를 삭제할 수 있는지 여부를 결정합니다. 이는 jQuery 캐싱 시스템에서 사용됩니다. 이전 버전의 IE는 이를 지원하지 않으며 직접적으로 정의되지 않습니다

pixelPosition: getCompulatedStyle이 요소의 왼쪽 위 오른쪽 아래 요소의 백분율 값을 변환할 수 있는지 여부를 결정합니다. 이로 인해 웹킷 시스템에 문제가 발생하므로 Dean Edwards의 해킹을 사용해야 합니다

reliableMarginRight: getCompulatedStyle이 요소의 marginRiht를 올바르게 얻을 수 있는지 확인합니다.

clearCloneStyle: ie9 10에서 이상한 버그가 나타납니다. 요소의 background-* 스타일 요소를 복사하고 복사된 요소를 지우면 원래 스타일도 지워집니다.

브라우저의 미친 업데이트로 인해 표준 브라우저에서 발생하는 다양한 버그가 IE를 능가했으며 기능 감지가 점점 더 중요해지고 있습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.