Reka bentuk rangka kerja JavaScript - menghidu penyemak imbas dan kemahiran pengesanan_javascript ciri

Menghidu penyemak imbas tidak lagi disyorkan, tetapi ia masih diperlukan dalam beberapa situasi. Sebagai contoh, beberapa skrip statistik. Dalam pelayar standard, document.implementation.hasfeature disediakan, tetapi ia adalah buggy dan tidak tepat Pada masa ini, w3c telah melancarkan kaedah CSS.supports, yang menunjukkan perhatian semua orang kepada aspek ini.

1. Tentukan penyemak imbas.

Pelayar arus perdana termasuk iaitu firefox opera chorme safari Pada masa awal, rangka kerja ini dinilai melalui navigator.userAgent Pada masa ini, hampir semua pelayar asing boleh menilai.

Mengenai skrip pertimbangan penyemak imbas, jQuery telah dialihkan keluar daripada ontologi dan dibentuk menjadi pemalam. Terdapat lebih banyak cara untuk memperkenalkan,

Untuk penentuan peranti mudah alih yang berkaitan, adalah disyorkan untuk melihat kod sumber mudah alih jQuery dan zepto.

Salin kod Kod adalah seperti berikut:

isIPone = /isIPone/i.test(navigator.userAgent);
isIPone4 = window.devicePixelRatio >= 2 //Dalam halaman web, nisbah piksel ke titik dipanggil peranti-pixel-nisbah Peranti biasa ialah 1, iPhone4 ialah 2 dan beberapa model Android ialah 1.5
. isIpad = /ipad/i.test(navigator.userAgent)
isAndroid = /android/i.test(navigator.userAgent)
isIOS = isIPone ||. isIpad

Untuk penyemak imbas domestik, anda boleh melihat Tangrame atau qwrap, yang pada asasnya ialah IE, webkit dan kernel blink.

2. Pengesanan sokongan acara

Kangax, ahli teras prototaip, menulis artikel untuk menentukan sokongan penyemak imbas untuk acara tertentu. Pelaksanaan yang diberikan di sana adalah seperti berikut:

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

Kini jQuery dan rangka kerja lain menggunakan versi skrip yang dipermudahkan

Tetapi mana-mana yang lebih baik, pengesanan ini hanya berfungsi untuk DOM0. Contohnya, DOMMouseScroll DOMContentLoaded DOMFocusIn DOMFocusOut DOMSubtreeModified DOMNodeInserted DOMNodeRemoved DOMNodeRemovedFromDocument DOMNodeInserted DOMNodeInsertedItrDoMCOutDoM, DOMAModModModified DOMNodeRemoved. tak guna.

Sesetengah acara ini sangat berguna, seperti DOMMouseScroll Firefox tidak menyokong tetikus dan hanya boleh menggunakannya sebagai pengganti.
DOMContentLoaded ialah peristiwa penting dalam melaksanakan domReady; DOMNodeRemoved digunakan untuk menentukan sama ada elemen dialih keluar daripada nod induknya, yang mungkin merupakan nod elemen lain atau serpihan dokumen dialihkan daripada pepohon DOM dan DOMAttrModified sering digunakan untuk mensimulasikan; onpropertyChange IE

CSS3 menambah dua animasi, satu animasi peralihan dan satu lagi animasi tweening bingkai utama. Mereka semua menggunakan panggilan balik acara pada akhir acara. Tetapi semasa proses penyeragaman, nama yang diberikan pelayar kepada mereka hampir rawak. Ini juga perlu dikesan lebih awal.

Berikut ialah pelaksanaan bootstrap. Saya dengar ia datang dari modernizr, yang agak kasar. Contohnya, Oprera yang anda gunakan sudah pun menyokong nama acara standard tanpa acara. Ia masih mengembalikan 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
    }
  })();

animasi tween bingkai utama berasal daripada modul fx_neo massa

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

3. Detektif sokongan gaya

css3 membawa banyak gaya yang berguna, tetapi masalahnya ialah setiap penyemak imbas mempunyai awalan peribadinya sendiri menyediakan kaedah cssName untuk mengendalikannya, ia akan mengembalikan nama gaya kes unta yang tersedia, jika tidak, ia akan jadi batal

  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 = 'f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08'
    alert(div.innerHTML) //=>ie678返回f5d188ed2c074f8b944552db028f98a192cee25da80fac49f6fb6eec5fd2c22aca745a59da05f784b8811374296574e1f16b1740fad44fb09bfe928bcc527e08,其它返回f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08

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: Tentukan sama ada atribut disable elemen pilih mempengaruhi nilai disabled elemen child Dalam Safari, sebaik sahaja elemen pilih dilumpuhkan, elemen anaknya juga dilumpuhkan, mengakibatkan nilai yang tidak boleh diperolehi

checkClone: ​​​​merujuk kepada elemen kotak semak Jika checked=true ditetapkan, dan selepas berbilang klon, bolehkah salinannya kekal benar. Kaedah ini hanya mengembalikan palsu dalam safari4, yang lain adalah benar

inlineBlockNeedsLayout: Tentukan sama ada hendak menggunakan kaedah hasLayout untuk menjadikan display:inline-block berkesan. Kaedah ini hanya benar untuk ie678

getSetAttribute: Tentukan sama ada untuk membezakan atribut ciri, hanya ie678 adalah palsu

noCloneEvent: Menentukan sama ada hendak mengklon acara pengikatan attachEvent semasa mengklon elemen. Hanya versi lama IE dan mod keserasiannya yang mengembalikan palsu

enctype: Tentukan sama ada penyemak imbas menyokong atribut pengekodan IE67 sebaliknya menggunakan atribut pengekodan

boxModel: Tentukan sama ada penyemak imbas berada dalam mod pemaparan kotak kandungan

submitBubbles, changeBubbles, focusinBubble: Tentukan sama ada penyemak imbas menyokong acara ini dan menggelembungkan ke dokumen

shrinkWrapBlocks: Tentukan sama ada elemen akan diregangkan oleh elemen kanak-kanak. Dalam IE678, elemen yang tidak diganti akan mengembangkan elemen induknya apabila saiz dan hasLayout ditetapkan.

html5Clone: ​​​​Tentukan sama ada cloneNode boleh digunakan untuk mengklonkan teg baharu HTML5 versi lama IE tidak menyokongnya. Perlu menggunakan outerHTML

deleteExpando: Menentukan sama ada elemen tersuai pada nod elemen boleh dipadamkan Ini digunakan dalam sistem caching jQuery. Versi lama IE tidak menyokongnya dan langsung tidak ditentukan

PixelPosition: Tentukan sama ada getComputedStyle boleh menukar nilai peratusan unsur kiri atas sebelah kanan bawah. Ini akan menyebabkan masalah dalam sistem webkit, dan anda perlu menggunakan hack Dean Edwards

reliableMarginRight: Tentukan sama ada getComputedStyle boleh mendapatkan marginRiht elemen dengan betul.

clearCloneStyle: Pepijat pelik akan muncul dalam ie9 10. Apabila elemen gaya latar-* elemen disalin dan elemen yang disalin dikosongkan, gaya asal akan dikosongkan.

Dengan kemas kini gila pelayar, pelbagai pepijat yang disebabkan oleh penyemak imbas standard telah mengatasi IE, dan pengesanan ciri menjadi semakin penting.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.