Modernizr.js和yepnode.js · 致力于web前端技術撰寫

上篇博客中寫到了關于number控件的內容，上篇博客主要是關于number的樣式問題，那段代碼是我從網上找的，當時用的時候并未去研究太多，因為項目較緊，今天項目基本完成，于是研究一下，關于Modernizr.js。 HTML5, CSS3以及相關技術（例如canvas和web sockets）帶來了非常有用的特性，可以讓我們的web程序提升一個新的level。這些新技術允許我們只用HTML,CSS和JavaScript就可以構建包括在平板和移動設備上能夠運行的多樣化表單頁面。HTML5雖然提供了很多新特性，但是如果我們不考慮舊版本的瀏覽器就是用這些新技術也不太現實，老版本瀏覽器已經使用了很多年，我們依然需要考慮這些版本的兼容性問題。 Modernizr幫助我們檢測瀏覽器是否實現了某個feature，如果實現了那么開發人員就可以充分利用這個feature做一些工作，反之沒有實現開發人員也好提供一個fallback。所以，我們要明白的是Modernizr只是幫我們檢測feature是否被支持，它并不能夠給瀏覽器添加那些本來不支持的feature。官方網站( [http://modernizr.com](http://modernizr.com) )下載完之后，在中引入這個類庫，由于Modernizr內置了html5shiv類庫，所以必須在加載之前引用這個類庫。關于 html5shiv： 1、html5shiv 只是個 javascript 庫，只有一個功能，就是讓 Internet Explorer 6-8 支持 HTML5 的標簽，例如 article，section，aside，video 等等…… 2、Modernizr 默認包含了這個庫 3、使用 html5shiv時，配合 conditional comment使用，避免支持的游覽器加載多余的東西（IE9+ 是支持 HTML5的）：使用了Modernizr后，運行時會渲染html元素，為Html元素添加一批CSS的class名稱，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性，支持的特性直接顯示class:特性，如：canvas,borderradius,不支持的特性會有一個no作為前綴，如：no-canvas,no-touch。 IE8的例子： ~~~ <html class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths" lang="zh"> ~~~ 可以看到IE8不支持很多CSS3 1、如果你的瀏覽器沒啟用javascript， html 中的 class=”no-js” 是沒改變的，我們可以用這個 class 來提示用戶啟用 javascript。 ~~~ .enable-js{display:none;} ~~~ //瀏覽器不支持JS就顯示用戶開啟javascript ~~~ html.no-js .enable-js{display:block;} ~~~ 2、除了檢測js以外，還惡意檢測其它的h5和c3 如： //默認使用css3漸變 ~~~ .gradient{background:linear-grandient(top, #FF0000, #c6c6c6);} ~~~ //如果不支持css3的漸變屬性，就使用圖片 ~~~ .no-cssgradients .gradient{background:url("images/xxx");} ~~~ 如： ~~~ div.border{border-radius:10px;} .no-borderradius div.border{//圖片或其它實現方式} ~~~ chrome下效果： ~~~ <html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"> ~~~ 檢測瀏覽器是否支持某項特性：Modernizr.featuretodetect 比如我們檢測瀏覽器是否支持WebGL，可以使用： ~~~ if(Modernizr.webgl){ }else{ //不支持webgl } ~~~ 檢測瀏覽器是否支持input type = number ~~~ if(Modernizr.inputtypes.number){ }else{ } ~~~ //檢測是否支持canvas ~~~ if (Modernizr.canvas) { //Add canvas code } ~~~ 基于YepNope.js，Modernizr.load()根據一些條件判斷來動態選擇加載CSS和JavaScript，可以避免不必要的資源加載。你可以在(HTML5 Cross Browser Polyfills)找到幾乎所有新特性的fallback解決方案。 ~~~ Modernizr.load( test: Modernizr.webgl, yep : 'three.js', nope: 'jebgl.js', both: 'number.js' ); ~~~ 當瀏覽器支持WebGL的時候，就引入three.js這個類庫做一些3D效果，瀏覽器如果不支持WebGL,就使用jebgl.js做一些fallback操作，不管是否支持WebGL，都加載number.js。我們在使用jQuery類庫的時候，通過是下面這種寫法： ~~~ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">\x3C/script>')</script> ~~~ 現在用Modernizr.load()可以這么寫： ~~~ Modernizr.load([ { load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js', complete: function () { if ( !window.jQuery ) { Modernizr.load('js/libs/jquery-1.7.1.min.js'); } } }, { // This will wait for the fallback to load and // execute if it needs to. load: 'needs-jQuery.js' } ]); ~~~ 翻譯一下就是：去加載ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js，下載或加載失敗，執行complete中的函數，通過window.jQuery檢測是否加載成功，如果沒有成功的話，就去加載本地的jquery文件，如果complete里的文件也加載失敗，那么就會執行load，去加載need-jQuery.js文件。 Modernizr還有一些其他的用法，比如Modernizr.mq()方法用來檢測media query，這對Responsive Design可以幫上很多忙。 **最后，補充下yepnode.js** yepnope.js是一個能夠根據輸入條件來選擇性異步加載資源文件的js腳本，可以在頁面上僅加載用戶需要的js/css。典型示例： ~~~ yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] }); ~~~ 當Modernizr.geolocation為真時，加載yep項也就是”normal.js”，否則加載nope項——可以同時加載多個文件 yepnope的全部參數 ~~~ yepnope([{ test : /* boolean(ish) - 你要檢查真偽的表達式 */, yep : /* array (of strings) | string - test為true時加載這項 */, nope : /* array (of strings) | string - test為false時加載這項 */, both : /* array (of strings) | string - 什么情況下都加載 */, load : /* array (of strings) | string - 什么情況下都加載 */, callback : /* function ( testResult, key ) | object { key : fn } 當某個url加載成功時執行相應的方法 */, complete : /* function 都加載完成了執行這個方法 */ }, ... ]); ~~~ 這里的參數都可以是array或者object，在加載多個資源文件的時候有用。 yepnope加載jquery的實例 ~~~ yepnope([{ load: 'http:/-/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', complete: function () { if (!window.jQuery) { yepnope('local/jquery.min.js'); } } }, { load: 'jquery.plugin.js', complete: function () { jQuery(function () { jQuery('div').plugin(); }); } }]); ~~~