首頁 > 外鏈代發 > 網站如何做到完全不需要使用jQuery

網站如何做到完全不需要使用jQuery

2015-05-01 admin 外鏈代發 0人評論 42595

3分快3 jQuery是現在最流行的JavaScript工具庫。

3分快3 據統計,目前全世界57.3%的網站使用它。也就是說,10個網站里面,有6個使用jQuery。如果只考察使用工具庫的網站,這個比例就會上升到驚人的91.7%。

網站如何做到完全不需要使用jQuery  外鏈代發  第1張

雖然jQuery如此受歡迎,但是它臃腫的體積也讓人頭痛不已。jQuery 2.0的原始大小為235KB,優化后為81KB;如果是支持IE6、7、8的jQuery 1.8.3,原始大小為261KB,優化后為91KB。

這樣的體積,即使是寬帶環境,完全加載也需要1秒或更長,更不要說移動設備了。這意味著,如果你使用了jQuery,用戶至少延遲1秒,才能看到網頁效果。考慮到本質上,jQuery只是一個操作DOM的工具,我們不僅要問:如果只是為了幾個網頁特效,是否有必要動用這么大的庫?

網站如何做到完全不需要使用jQuery  外鏈代發  第2張

2006年,jQuery誕生的時候,主要用于消除不同瀏覽器的差異(主要是IE6),為開發者提供一個簡潔的統一接口。相比當時,如今的情況已經發生了很大的變化。IE的市場份額不斷下降,以ECMAScript為基礎的JavaScript標準語法,正得到越來越廣泛的支持。開發者直接使用JavScript標準語法,就能同時在各大瀏覽器運行,不再需要通過jQuery獲取兼容性。

3分快3 下面就探討如何用JavaScript標準語法,取代jQuery的一些主要功能,做到jQuery-free。

網站如何做到完全不需要使用jQuery  外鏈代發  第3張

一、選取DOM元素

3分快3 jQuery的核心是通過各種選擇器,選中DOM元素,可以用querySelectorAll方法模擬這個功能。

  1. var $ = document.querySelectorAll.bind(document); 

3分快3 這里需要注意的是,querySelectorAll方法返回的是NodeList對象,它很像數組(有數字索引和length屬性),但不是數組,不能使用pop、push等數組特有方法。如果有需要,可以考慮將Nodelist對象轉為數組。

  1. myList = Array.prototype.slice.call(myNodeList); 

二、DOM操作

3分快3 DOM本身就具有很豐富的操作方法,可以取代jQuery提供的操作方法。

3分快3 尾部追加DOM元素。

  1. // jQuery寫法  
  2. $(parent).append($(child));  
  3.  
  4. // DOM寫法  
  5. parent.appendChild(child) 

頭部插入DOM元素。

  1. // jQuery寫法  
  2. $(parent).prepend($(child));  
  3.  
  4. // DOM寫法  
  5. parent.insertBefore(child, parent.childNodes[0]) 

3分快3 刪除DOM元素。

  1. // jQuery寫法  
  2. $(child).remove()  
  3.  
  4. // DOM寫法  
  5. child.parentNode.removeChild(child) 

三、事件的監聽

jQuery的on方法,完全可以用addEventListener模擬。

  1. Element.prototype.on = Element.prototype.addEventListener; 

為了使用方便,可以在NodeList對象上也部署這個方法。

  1. NodeList.prototype.on = function (event, fn) {  
  2. []['forEach'].call(thisfunction (el) {  
  3. el.on(event, fn);  
  4. });  
  5. return this;  
  6. }; 
標簽:

發表評論

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

官方微信公眾號
70755559
09:00 - 22:00
QQ客服: 70755559
客服郵箱: 678128@qq.com
2分快3-推荐 1分快3-官网 好运快3-欢迎您 幸运快3-安全购彩 网投app-Welcome 分分快3app-Home 1分快三平台-3分快3 彩票代理-推荐 五福彩票-官网 彩票大赢家-欢迎您