日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
您的WebApp真的需要jQuery嗎？

首先要承認(rèn)jQuery的強(qiáng)大魅力，是jQuery陪伴著我們度過桌面瀏覽器開發(fā)的每一天，它的使用輕巧人人皆知，這是桌面瀏覽器項(xiàng)目常用的主流框架之一。但是在移動(dòng)瀏覽器項(xiàng)目中，比如WebApp，你真的愿意引用這樣一個(gè)龐大且腫脹的前端框架么？你真的需要它么？其實(shí)你不需要，因?yàn)楝F(xiàn)在的高端移動(dòng)設(shè)備中的API已經(jīng)足夠了。

接下來我們談?wù)勀銘?yīng)該在移動(dòng)設(shè)備上放棄jQuery的理由。

為什么前端工程師需要在乎移動(dòng)設(shè)備上的前端框架？

眾所周知，移動(dòng)設(shè)備與固定裝置最明顯的一點(diǎn)不同是：帶寬的問題。在移動(dòng)設(shè)備上加載外部資源肯定要比固定裝置設(shè)備加載外部資源要緩慢的多。我們將問題引向前端框架，jQuery***版本的min版本為77KB，僅這一點(diǎn)就需要前端工程師折衷。

jQuery中占了很大一個(gè)比重的則是Sizzle選擇器，這是一個(gè)兼容多平臺(tái)的javascript selector開源框架，但是在移動(dòng)設(shè)備中我們真的不需要這個(gè)Sizzle選擇器，另外一部分則是jQuery的動(dòng)畫類庫，這個(gè)也是兼容多平臺(tái)的動(dòng)畫類庫，但是在WebApp中，我們同樣不需要，我們需要CSS 3的translate和animation即可完成需求，***一個(gè)算是jQuery的OOP了，這個(gè)完全不需要，開發(fā)者完全可以根據(jù)自己的專業(yè)技能封裝一套OOP的方法。

首先來看javascript selector

我們做DHTML網(wǎng)站通常情況也都是對(duì)DOM做操作，jQuery可以說是一個(gè)非常輕巧且功能強(qiáng)大的靈活操作DOM的JavaScript框架，你在使用jQuery操作DOM時(shí)，就像是在玩魔術(shù)一樣的神奇，這也正是jQuery的設(shè)計(jì)初衷。

但是當(dāng)前你的用戶群是Iphone、Android、Ipad、Blackberry等等一些高端用戶時(shí)，你不應(yīng)該為了使用選擇器而再引入這樣一個(gè)龐大的JavaScript框架，你應(yīng)該這樣做：

 
 
 
    
  
  
  
  1. document.querySelector(DOM);  
    2.

querySelector是一個(gè)更容易、更快、更可靠的本地選擇器引擎。你也可以利用3行代碼封裝一個(gè)像jQuery那樣的函數(shù)來使用選擇器

 
 
 
    
  
  
  
  1. function $(query) {    
    2. 
  
  
  
  2.      return document.querySelectorAll(query);    
    3. 
  
  
  
  3. }  
    4.

這里就有你喜歡的$，僅僅3行代碼就搞定了！你也許可能會(huì)問利用getElementById獲取DOM會(huì)更加的快，這很不錯(cuò)。getElementById方法獲取DOM確實(shí)快些，但是這個(gè)方法適用于頁面中元素較多的情況下，你才能夠感覺到它的快感，但是WebApp是不可能在同一張頁面中有很多元素的，它不會(huì)像Web產(chǎn)品一樣。所以在這里我不建議前端工程師為了這個(gè)感覺不到的快，而放棄使用querySelectorAll/querySelector而使用getElementById重新封裝。而且在實(shí)際的項(xiàng)目開發(fā)中，你也可以將獲取到的DOM保存在變量中，這樣也同樣減少了對(duì)DOM的訪問。

DOMReady Function

當(dāng)然，有些時(shí)候我們可能需要等待DOM加載完畢后才去執(zhí)行我們的function。jQuery有ready方法，我們同樣可以擁有自己我的ready方法。

 
 
 
    
  
  
  
  1. function ready (fn) {    
    2. 
  
  
  
  2.     document.addEventListener('DOMContentLoaded', fn, false);    
    3. 
  
  
  
  3. }  
    4.

所以的函數(shù)的都將在DOM元素加載完畢后，立刻執(zhí)行，這里不包括image|audio|video。

 
 
 
    
  
  
  
  1. ready(function (){    
    2. 
  
  
  
  2.     alert($('#demo')[0].innerHTML);    
    3. 
  
  
  
  3. });  
    4.

可能你已經(jīng)發(fā)現(xiàn)了，這樣的ready方法并不是很靈活。首先你不能夠卸載DOMContentLoaded事件，每調(diào)用ready方法，都會(huì)為document注冊(cè)DOMContentLoaded事件；其次當(dāng)DOM加載完畢后，僅僅執(zhí)行了一個(gè)函數(shù)的一次調(diào)用。這不是我們想要的，我們需要改進(jìn)它。

 
 
 
    
  
  
  
  1. var readyFuns = [];    
    2. 
  
  
  
  2. function DOMReady(){    
    3. 
  
  
  
  3.     for(var i=0,l=readyFuns.length;i
  
  
  
  4.       readyFun[i]();    
    5. 
  
  
  
  5.     }    
    6. 
  
  
  
  6.     readyFuns = null;    
    7. 
  
  
  
  7.     document.removeEventListener('DOMContentLoaded',DOMReady,false);    
    8. 
  
  
  
  8. }    
    9. 
  
  
  
  9. function readyFun(fn){    
    10. 
  
  
  
  10.     if(readyFuns.length == 0){    
    11. 
  
  
  
  11.        document.addEventListener('DOMContentLoaded',DOMReady,false);    
    12. 
  
  
  
  12.     }    
    13. 
  
  
  
  13.     readyFuns.push(fn);    
    14. 
  
  
  
  14. }  
    15.

這樣貌似解決了我們以上的兩個(gè)問題?，F(xiàn)在的DOMReady方法可以保證在DOM加載完畢后，一次執(zhí)行多個(gè)函數(shù)，且支持卸載DOMContentLoaded事件。在WebApp中封裝一個(gè)domready方法，你無需考慮IE瀏覽器或其它的濟(jì)覽器，僅僅考慮WebKit內(nèi)核的瀏覽器即可，所以你可以使用一對(duì)removeEventListener和addEventListener。這兩個(gè)方法同樣也是W3C的標(biāo)準(zhǔn)方法，所以我們已經(jīng)覆蓋了jQuery的DOMReady50％的代碼。

【編輯推薦】

  1. Django創(chuàng)始人：從技術(shù)工藝上考量jQuery
  2. MooTools團(tuán)隊(duì)成員：我們?yōu)楹螐?qiáng)于jQuery
  3. jQuery作為“JavaScript庫MVP”的12大理由
  4. jQuery讓開發(fā)者戀戀不舍的秘密
  5. 不只是口號(hào) jQuery的設(shè)計(jì)藝術(shù)

文章名稱：您的WebApp真的需要jQuery嗎？
分享網(wǎng)址：http://m.5511xx.com/article/cdidchs.html