① HTML5中Modernizr類庫是做什麼用的具體怎麼使用
Modernizr 是一個用來檢測瀏覽器功能支持情況的 JavaScript 庫。通過這個庫我們可以檢測不同的瀏覽器對於HTML5特性的支持情況。使用Modernizr類庫和使用其他第三方類庫的方法是一樣的它分為一下幾個步驟「
1、在官網上下載Modernizr類庫。modernizr官網:https://modernizr.com/
2、通過JavaSctipt標簽引入Modernizr類庫
3、通過具體的代碼實現對HTML特性的檢測。
這里我們寫了一個非常簡單的例子來檢測瀏覽器是否支持HTML5中的Canvas API,示例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>通過Modernizr檢測HTML5特性</title>
</head>
<body>
<article>
<h1>通過Modernizr檢測HTML5特性</h1>
</article>
<div id="result-stub">
<span id="msg" style="color:red;"></span>
</div>
<script >
window.onload = function() {
//通過Modernizr.對瀏覽器canvas功能進行檢測
if (Modernizr.canvas) {
$('#msg').text('本瀏覽器支持Canvas API');
}else{
$('#msg').text('本瀏覽器不支持Canvas API');
}
}
</script>
//引入modernizr庫和jquery庫
<script src="../js/jquery.js"></script>
<script src="../js/modernizr.js"></script>
</body>
</html>
這些內容關乎到HTML5中第三方類庫的使用,關於HTML5的相關知識我們建議你可以去一個叫做秒秒學的教程網站上看看。
② 如何使用js-polyfills
Polyfills是一種保證使用現代代碼的絕佳辦法,同時還能支持舊版瀏覽器。但是目前polyfills使用起來很困難,因此我們開發了一種全新的服務以便簡化其使用方法。在此,邀請讀者使用並改進它。
挑戰
下面是我們正在嘗試解決的一些問題:
開發者對哪些特性需要使用polyfill不是很清楚。例如你在某個舊版本的IE瀏覽器(因為你有很大數量的用戶還在使用它)中載入網站,發現網站不工作,你不得不慢慢調試來搞清楚到底是哪個特性導致了這個問題。有時候問題很清楚,但大多時候並非如此,尤其是舊版瀏覽器往往缺少好的開發者工具的時候。
針對每個特性都有很多polyfill可供選擇。很難確定哪一個能最忠實地模擬缺少的特性。
有一些大的polyfill捆綁著很多你不需要的polyfill,例如ES6,它全面覆蓋了一系列的特性集。為了解決一個簡單的問題而向瀏覽器植入所有的這些代碼其實是不必要的。
較新版本的瀏覽器不需要polyfill,但一般來說polyfill可用於所有種類的瀏覽器。雖然這是為了提高與舊版瀏覽器的兼容性,但這也降低了新版瀏覽器的性能。我們不願意做出這種妥協。我們更願意在原本不具備某個特性的瀏覽器上使用polyfill。
我們的解決辦法:以polyfill為服務
為了解決這些問題,我們開發了polyfill服務。這有點像是驗光師先對你的眼睛驗光檢查,然後針對你的視力問題配置眼鏡。我們將對瀏覽器做同樣的事情。下面解釋它是如何工作的:
開發人員在他們的頁面中插入一個腳本標記作為導入polyfill服務的端點。
該服務分析瀏覽器的user-agent標頭和必需特性列表(或是使用一個默認的可使用polyfill服務的列表),然後搭建瀏覽器所需的polyfill列表。
按照正確的依賴順序表定製polyfill。
通過CDN 壓縮服務包並提供服務(對此我們衷心感謝Fastly的支持)。
我們真的需要這個解決辦法嗎?你可以這樣思考:Modernizris是一個大型的特性檢測包,所有對它的合理使用都得益於自定義的安裝配置,但是很大數量的Modernizris用戶僅僅使用了它的默認安裝,這常常是來自於 cdnjs.com 或是html5boilerplate 的某個部件。但是,如果不使用Modernizris的特性檢測功能,那你為什麼安裝這個工具呢?可能你誤解了庫文件的功能,單純地以為Modernizris會「修補東西」?不得不承認,第一次聽到這個名字的時候筆者正是這樣想的,以至於後來發現Modernizris不但沒有起到作用,反而拖了現代瀏覽器的後腿,筆者感到有些失望。
然而,Polyfill服務卻是真正起到了作用。不想花時間去深入了解舊版本瀏覽器缺點的你一點兒錯也沒有。讓別人先弄明白問題所在,然後我們在不需要了解細節的情況下就能直接受益。
如何使用
最簡單的使用情況是:
這包含了我們默認的 polyfill設置。這個默認設置是我們人工挑選的一個特性列表,我們認為這個列表中所包含的特性對於現代網路開發來說不可或缺,而且相對應的polyfill相當小且十分精確。如果你想指定添加某個polyfill特性,只需要這么做:
如果有必要在解析自己的代碼之前載入polyfill的話,你可以移除async和defer屬性,或是使用一個腳本載入器(不需要任何polyfill的載入器!)
測試與文檔特性支持
我們所支持特性的完整表格在特性矩陣中。為了搭建這個網格,我們使用了Sauce Lab的自動測試平台,它截獲了polyfill在每個瀏覽器中的測試,然後記錄結果。
User-Agent 分析? 你確定?
是的,我們確定。下面是為什麼UA分析要比特性檢測好的原因:
在一些情形中,針對同一特性我們有多個polyfill可供選擇,這是因為一些瀏覽器提供非順從實施方式,因此只需要你敲打成型即可,而其他瀏覽器則沒有提供任何的實施。但若是有UA檢測,你能夠選擇相應的polyfill。
有了UA檢測,第一個HTTP請求就能直接由polyfill代碼應答。如果我們使用了特性檢測,第一個請求將會為特性檢測代碼服務,而第二個請求則需要用於獲取特定的polyfill。
幾乎所有的大型網站都使用UA檢測。這並不是說與之相關的特徵就是不好的。顯然,好的UA規則要比差勁的UA規則更難編寫。而且我們並沒有排除藉助特性檢測使用該服務的可能。
③ 有沒有能兼容各瀏覽器的前端開發框架
想完全兼容各種瀏覽器,尤其是各個版本的前端開發框架,目前幾乎沒有。
跨瀏覽器開發應該使用的技巧:
modernizr.js 特性檢測器,有就使用原生,沒有就載入polyfill;
polyfill/shim 向後兼容的瀏覽器的js補丁,一般和modernizr一起用;
jshint.js js語法檢測器;
Boilerplate 開發的最佳實踐的初始模板;
閱讀第三方庫關於最低版本支持;
使用js單元測試,測試目標瀏覽器;
Responsive Design (針對屏幕大小);
normalize.css 統一瀏覽器基本元素的風格;
跨瀏覽器兼容問題,過去現在都有,以後會更麻煩,所以這個問題在項目開始前,就必須確定下來最低支持的版本是什麼,然後設計一個對應兼容方案。不要等開發完畢了,才告知要必須兼容其他的,那整體的修改量就很大了。
④ modernizr.custom.js 插件是干什麼用的
Modernizr是一個開源的JS庫,它使得那些基於訪客瀏覽器的不同(指對新標准支持性的差專異)而開發不同級別體驗的設屬計師的工作變得更為簡單。它使得設計師可以在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進行開發,同時又不會犧牲其他不支持這些新技術的瀏覽器的控制。
當你在網頁中嵌入Modernizr的腳本時,它會檢測當前瀏覽器是否支持CSS3的特性,比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等,同時也會檢測是否支持HTML5的
特性——比如audio、video、本地儲存、和新的
<input>標簽的類型和屬性等。在獲取到這些信息的基礎上,你可以在那些支持這些功能的瀏覽器上使用它們,來決定是否創建一個基於JS的
fallback,或者對那些不支持的瀏覽器進行簡單的優雅降級。另外,Modernizr還可以令IE支持對HTML5的元素應用CSS樣式,這樣開發者就可以立即使用這些更富有語義化的標簽了。
⑤ 2020JS-3D是測量什麼的
Modernizr?是用於檢測瀏覽器對?HTML5?和?CSS3?支持的?JavaScript?庫這句的意思是檢測瀏覽器是否支持專?CSS3?的?3D?transform(例如屬?matrix3d,?translate3d?等等).transform { -webkit-transform: translate3d(60,0,0); -moz-transform: translate3d(60,0,0); -o-transform: translate3d(60,0,0); -ms-transform: translate3d(60,0,0); transform: translate3d(60,0,0);}// 如果瀏覽器支持 CSS3 3D transformif(Modernizr.csstransforms3d) { // 添加 transform class $(;my_div;).addClass(;transform;);}
⑥ 怎麼讓aos.js低版本不執行
是報這樣的錯吧: undefined is not a function;
因為1.9之後移除了toggle。
以下來自網路:
jQuery 1.9較之前版本的變化,主要介紹移除方法的替代方法:.browser、.live、.die、.sub、.toggle
簡介:
本文檔是一次調研總結,直接貼過來的,沒有作背景鋪墊修改。這是一個關於jQuery1.9較之前版本變化的調研,完了之後,總結了這么一個對於「jQuery 1.9移除方法的替代總結」的文檔,不一定是最優的解決方案,但我所提到的方法絕對可行。
本文檔總結了一些jQuery 1.9較之前版本的變化(原文:http://jquery.com/upgrade-guide/1.9/),看官方Blog,JQuery2.0已經出到了Beta2 Released版本,並且不再支持IE 6/7/8.
以下為涉及到Gaia 1.0的幾個變化:
jQuery.browser()
jQuery.browser() removed
The jQuery.browser() method has been deprecated since
jQuery 1.3 and is removed in 1.9. If needed, it is available as part of
the jQuery Migrate plugin. We recommend using feature detection with a
library such as Modernizr.
這里給出的是用Modernizr(一個利用JS和CSS來檢測瀏覽器所支持功能的小工具)來檢測瀏覽器所支持功能,其實官網還給出了另一種解決方案:
Because $.browser uses navigator.userAgent
to determine the platform, it is vulnerable to spoofing by the user or
misrepresentation by the browser itself. It is always best to avoid
browser-specific code entirely where possible. The$.support property is available for detection of support for particular features rather than relying on $.browser.
Gaia1.0中用到JQuery.browser()方法的為:
$.browser.msie && $.browser.version <= 8
作為常用的兩種方法,
JQuery.browser.mise(如果是IE則返回true)可以用JQuery.support.boxModel(如果IE瀏覽器是QuirksMode方式運行,則返回false)代替;
jQuery.browser.version <= 8可以用jQuery. support.leadingWhitespace(判斷瀏覽器是否為IE 6~8版本)代替;
這樣上述語句可以改為:
$.support.boxModel && $.support.leadingWhitespace
另外,jQuery.support.objectAll可判斷瀏覽器是否為IE 7~8版本。由於jQuer2.0不再支持IE9之前的版本,日後升級還需根據官方推薦判斷瀏覽器類型及版本載入不同的jQuery。如官方推薦方式;
<!--[if lt IE 9]>
<script src='jquery-1.9.0.js'></script>
<![endif]-->
<!--[if gte IE 9]>
<script src='jquery-2.0.0.js'></script>
<![endif]-->
如果必須要繼續使用jQuery.browser()可以添加「jquery-browser」插件,但我沒有測試該插件。
.live()
link .live() removed
The .live() method has been deprecated since jQuery 1.7 and has been
removed in 1.9. We recommend upgrading code to use the .on() method
instead. To exactly match $("a.foo").live("click", fn), for example, you
can write $(document).on("click", "a.foo", fn). For more information,
see the .on() documentation. In the meantime, the jQuery Migrate plugin can be used to restore the .live() functionality.
.live()方法在1.9中移除,@ZPS在郵件中已經告知過大家。對於.live()方法的移除,升級比較簡單,僅僅是將「.live()」替換為「.on()」。
.die()
.die() removed
The .die() method has been deprecated since jQuery 1.7 and has been
removed in 1.9. We recommend upgrading code to use the .off() method
instead. To exactly match $("a.foo").die("click"), for example, you can
write $(document).off("click", "a.foo"). For more information, see the .off() documentation. In the meantime, the jQuery Migrate plugin can be used to restore the .die() functionality.
相對於「.live()」方法的移除,「.die()」方法也從1.9中移除,取而代之的是「.off()」方法。正如在1.9之前,很多人只關注
過「.live()」方法,卻不知道還有個「.die()」方法,或許還會有Coder不知道如何去掉.on()添加的事件,其實就是用「.off()」
進行刪除添加的事件。
jQuery.sub()
jQuery.sub() removed
The jQuery.sub() method has been moved to the jQuery Migrate plugin.
The number of use cases where it proved valuable were not enough to
justify keeping it in core. The jQuery Migrate plugin adds back this
functionality.
.sub()方法可以創建一個新的jQuery副本而不影響原有的jQuery對象,我對該方法的理解是:其實.sub()方法就是增加或重寫jQuery的方法或創建新plugin,有待討論。
從上面升級指南上來看,.sub()方法並沒有被removed,而是被moved到其他plugin,所以應該是還可以用的,只要引用相應的plugin。
官方給出的使用.sub()的兩個特定情況:一是在不改變原有方法的前提下提供一種簡單的重寫jQuery方法的途徑,二是幫助用戶解決jQuery plugin封裝和基本命名空間。翻譯晦澀,大家請看原文:
There are two specific use cases for which jQuery.sub() was created.
The first was for providing a painless way of overriding jQuery methods
without completely destroying the original methods and another was for
helping to do encapsulation and basic namespacing for jQuery plugins.
.toggle(function, function, … )
link .toggle(function, function, ... ) removed
This is the "click an element to run the specified functions"
signature of .toggle(). It should not be confused with the "change the
visibility of an element" of .toggle() which is not deprecated. The
former is being removed to rece confusion and improve the potential
for molarity in the library. The jQuery Migrate plugin can be used to
restore the functionality.
需要注意的是該.toggle()是「綁定兩個或多個處理程序,在點擊時循環執行」;另一個.toggle()仍然存在,它是「控制相應組件的顯示和隱藏」;中文晦澀,官方對此二方法的說明如下:
Categories: Deprecated > Deprecated 1.8 | Events > Mouse Events
.toggle(handler(eventObject), handler(eventObject) [,handler(eventObject)])
Returns:jQuery
version deprecated: 1.8, removed: 1.9
Description:Bind two or more handlers to the matched elements, to be executed on alternate clicks.
Categories: Effects > Basics
.toggle( [ration ] [, complete ] )
Returns:jQuery
Description:Display or hide the matched elements.
這個變化值得注意。對於刪除的這個「.toggle()」方法,官方沒有給出升級措施,但我發現一個方法名和描述都比較相似的方法「.trigger()」,不知道可不可以替代,還請大家賜教。
另外,國外有論壇提到「jQuery Migrate Plugin」插件,可以使用該插件檢測在jQuery 1.9 或2.0中哪些功能已經啟用或移除。我還沒有學習到,大家參看項目README吧。(谷歌這個插件,全是E文;網路這個插件,過半是E文)