jquery與prototype框架的詳細(xì)對(duì)比
以前做界面是用jquery的,現(xiàn)在因?yàn)橐迷S多ajax效果,改用了rails自帶的prototype
因?yàn)閖query用多了,換個(gè)框架也大同小異,不過細(xì)節(jié)上有很多不同。。。
1.dom加載方面:
jquery有dom ready方法,推遲js函數(shù)的綁定知道dom樹完成(如果沒有這個(gè)功能,一些element的事件函數(shù)之類的綁定可能會(huì)出錯(cuò)):
$(document).ready(function(){});
但是prototype是沒有的。。。得自己找非官方的擴(kuò)展,不方便,這個(gè)基本的功能,這么重要的功能,不知道為啥遲遲不加到核心庫
2.path查找,dom定位方面
jquery的dom查找和css定位一致,用過就感覺非常方便,這是他的一大亮點(diǎn)和優(yōu)點(diǎn)
$('.func #select_all').click(function()
$(this).parent('div').parent('div').find('li .checkbox input:checkbox')
prototype只有查找單個(gè)dom對(duì)象方便--$(id)
比較麻煩的是把單個(gè)和數(shù)組分開了,如果找一個(gè)路徑下的許多對(duì)象
得$$('div .right_contact'),這種風(fēng)格仍然是定位某一類型的對(duì)象
而不是用路徑查找,這方面不如jquery方便和概念一致
3.函數(shù),事件綁定
舉個(gè)例子,把class為right_contact的div綁定click高亮事件,prototype寫法是:
$$('div .right_contact').each(function(item){
item.observe('click', function(event){
new Effect.Highlight(item,{ duration: 2.0,startcolor: '#ffff99',endcolor: '#fffffff',restorecolor: '#fffffff' });
});
});
如果是jquery,簡(jiǎn)潔很多:
$('.right_contact').click(function(){
$(this).toggleClass('hilight');
})
我用過很多框架,印象最深刻的是一個(gè)叫hge game engine的框架,封裝了大量的底層細(xì)節(jié)和實(shí)現(xiàn)方法,然后他說:you could create everything from a simple puzzle to advanced multilayered platformer or strategy without even thinking of any non game logic code
優(yōu)秀的框架應(yīng)該是讓人集中注意到業(yè)務(wù)邏輯上而不是技術(shù)特性,設(shè)計(jì)模式上這方面,jquery比prototype優(yōu)秀,最典型的例子就是如果要鼠標(biāo)點(diǎn)擊觸發(fā)函數(shù),prototype搞個(gè)大而全的observe方法,然后去注冊(cè)click事件
而jquery就有item.click函數(shù)。。。observe是能包容萬象,不過jquery這種為最常用的事件特地創(chuàng)建專有函數(shù)的做法,更能讓人集中注意力到業(yè)務(wù)邏輯上。。。
相關(guān)文章
JQuery 使用attr方法實(shí)現(xiàn)下拉列表選中
實(shí)現(xiàn)下拉列表選中的方法有很多,這篇文章主要介紹了JQuery 使用attr方法的具體實(shí)現(xiàn),需要的朋友可以收藏下2014-10-10基于jQuery和CSS3制作數(shù)字時(shí)鐘附源碼下載(jquery篇)
本篇文章基于jquery讓數(shù)字時(shí)鐘真正的跑起來,實(shí)現(xiàn)一個(gè)帶有日期和星期的網(wǎng)頁版數(shù)字時(shí)鐘,效果非常逼真,感興趣的朋友一起看看吧2015-11-11jQuery使用removeClass方法刪除元素指定Class的方法
這篇文章主要介紹了jQuery使用removeClass方法刪除元素指定Class的方法,可實(shí)現(xiàn)針對(duì)指定元素樣式的批量刪除功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQuery基于擴(kuò)展簡(jiǎn)單實(shí)現(xiàn)倒計(jì)時(shí)功能的方法
這篇文章主要介紹了jQuery基于擴(kuò)展簡(jiǎn)單實(shí)現(xiàn)倒計(jì)時(shí)功能的方法,涉及jQuery擴(kuò)展與回調(diào)函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下2016-05-05JQuery處理json與ajax返回JSON實(shí)例代碼
json數(shù)據(jù)是一種經(jīng)型的實(shí)時(shí)數(shù)據(jù)交互的數(shù)據(jù)存儲(chǔ)方法,使用到最多的應(yīng)該是ajax與json配合使用了,下面我來給大家介紹jquery處理json數(shù)據(jù)方法2014-01-01jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)實(shí)例
jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)方法設(shè)置簡(jiǎn)單,一個(gè)是服務(wù)器處理程序是返回json數(shù)據(jù),另一種就是ajax發(fā)送設(shè)置的datatype設(shè)置為jsonp格式數(shù)據(jù)或json格式都可以。這篇文章對(duì)此進(jìn)行了實(shí)例介紹,需要的朋友可以參考下2014-06-06