基于jQuery架構(gòu)javascript基礎(chǔ)體系
更新時(shí)間:2011年01月01日 17:51:44 作者:
jQuery畢竟還只是一個(gè)基礎(chǔ)的最底層的工具集,封裝元素選擇器,事件等等,基本上能滿足一般的需求,但要從整體的WEB的周度來看,為了提高javascript開發(fā)的效率與可重用性,就需要有一個(gè)整體的布局
jQuery的使用開始成為javascript開發(fā)者的主選產(chǎn)品,但如果沒有一個(gè)整體的規(guī)劃,簡單的拿來主義勢必帶來后期維護(hù)成本的增加,大量的jQuery插件如同一把雙刃劍,一方面大大節(jié)省了開發(fā)時(shí)間與周期,但同時(shí)也造成WEB頁面加載的負(fù)擔(dān),帶來的難護(hù)與二級擴(kuò)展成本將非常龐大,因此,在使用之前就需要一個(gè)最基礎(chǔ)的javascript架構(gòu)體系,能明顯基礎(chǔ)功能組件,插件組件有效實(shí)施與擴(kuò)展。
我們想,jQuery畢竟還只是一個(gè)基礎(chǔ)的最底層的工具集,封裝元素選擇器,事件等等,基本上能滿足一般的需求,但要從整體的WEB的周度來看,為了提高javascript開發(fā)的效率與可重用性,就需要有一個(gè)整體的布局,biuuu認(rèn)為最簡單的思路如下:
1,在現(xiàn)有的ajax接口之上再封裝一層操作,主要是用于統(tǒng)一ajax入口,同時(shí)可以再細(xì)分把GET與POST兩種進(jìn)行分離,通過全局的入口,就能從整理上把關(guān),如過濾參數(shù),檢驗(yàn)參數(shù),增加全局參數(shù)等,一步到位,可復(fù)用性非常高,實(shí)現(xiàn)上如下:
var ajax= {
get : function(){
jQuery.get(url, [data], [callback], [type])
}
post : function(){
jQuery.post(url, [data], [callback], [type])
}
}
2,封裝統(tǒng)一的彈出框,對話框等交互窗口,通過統(tǒng)一接口實(shí)現(xiàn)彈窗類操作的交互,節(jié)省開發(fā)時(shí)間,同時(shí)有利于整體風(fēng)格的調(diào)整與優(yōu)化。
3,提供基礎(chǔ)的插件加載函數(shù),類似于工廠模式,統(tǒng)一插件加載與調(diào)用的入口,對于后期的擴(kuò)展與維護(hù)提供便利,這樣就不需要關(guān)心插件的更新與升級,只需要調(diào)用統(tǒng)一的接口。
4,其實(shí)就是一些最基礎(chǔ)常用的函數(shù),這個(gè)與具體的項(xiàng)目相關(guān),做為全局的工具類。
從上面四點(diǎn)來看,整體的架構(gòu)思路還只是一個(gè)比較淺層次的方案,其實(shí)還有安全,性能等方面的考慮,但至少需要有這方面的思路,越是簡單就越能體現(xiàn)出架構(gòu)的合理性,javascript體系也不例外,在實(shí)際的使用過程中,通過整合與優(yōu)化,提高javascript的開發(fā)效率與提升javascript能力也就是這樣簡單。
我們想,jQuery畢竟還只是一個(gè)基礎(chǔ)的最底層的工具集,封裝元素選擇器,事件等等,基本上能滿足一般的需求,但要從整體的WEB的周度來看,為了提高javascript開發(fā)的效率與可重用性,就需要有一個(gè)整體的布局,biuuu認(rèn)為最簡單的思路如下:
1,在現(xiàn)有的ajax接口之上再封裝一層操作,主要是用于統(tǒng)一ajax入口,同時(shí)可以再細(xì)分把GET與POST兩種進(jìn)行分離,通過全局的入口,就能從整理上把關(guān),如過濾參數(shù),檢驗(yàn)參數(shù),增加全局參數(shù)等,一步到位,可復(fù)用性非常高,實(shí)現(xiàn)上如下:
復(fù)制代碼 代碼如下:
var ajax= {
get : function(){
jQuery.get(url, [data], [callback], [type])
}
post : function(){
jQuery.post(url, [data], [callback], [type])
}
}
2,封裝統(tǒng)一的彈出框,對話框等交互窗口,通過統(tǒng)一接口實(shí)現(xiàn)彈窗類操作的交互,節(jié)省開發(fā)時(shí)間,同時(shí)有利于整體風(fēng)格的調(diào)整與優(yōu)化。
3,提供基礎(chǔ)的插件加載函數(shù),類似于工廠模式,統(tǒng)一插件加載與調(diào)用的入口,對于后期的擴(kuò)展與維護(hù)提供便利,這樣就不需要關(guān)心插件的更新與升級,只需要調(diào)用統(tǒng)一的接口。
4,其實(shí)就是一些最基礎(chǔ)常用的函數(shù),這個(gè)與具體的項(xiàng)目相關(guān),做為全局的工具類。
從上面四點(diǎn)來看,整體的架構(gòu)思路還只是一個(gè)比較淺層次的方案,其實(shí)還有安全,性能等方面的考慮,但至少需要有這方面的思路,越是簡單就越能體現(xiàn)出架構(gòu)的合理性,javascript體系也不例外,在實(shí)際的使用過程中,通過整合與優(yōu)化,提高javascript的開發(fā)效率與提升javascript能力也就是這樣簡單。
相關(guān)文章
JQuery獲取與設(shè)置HTML元素的內(nèi)容或文本的實(shí)現(xiàn)代碼
使用JQuery可以非常容易地添加、獲取和改變某個(gè)HTML元素的內(nèi)容,你會為這種簡便感到非常愉悅2014-06-06jQuery noConflict() 方法用法實(shí)例分析
這篇文章主要介紹了jQuery noConflict() 方法用法,結(jié)合實(shí)例形式分析了jQuery noConflict() 方法基本功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05jQuery.uploadify文件上傳組件實(shí)例講解
這篇文章主要介紹了jQuery.uploadify文件上傳組件實(shí)例講解的相關(guān)資料,本文圖文并茂介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)base64前臺加密解密功能詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)base64前臺加密解密功能,結(jié)合實(shí)例形式分析了jquery.base64.js實(shí)現(xiàn)前臺base64加密與解密功能的實(shí)現(xiàn)方法,并給出了java實(shí)現(xiàn)后臺base64加密解密的操作示例對比驗(yàn)證加密效果,需要的朋友可以參考下2017-08-08WEB前端開發(fā)都應(yīng)知道的jquery小技巧及jquery三個(gè)簡寫
一個(gè)簡單技巧的集合,幫你提升 jQuery 技能,下面腳本之家小編給大家收集整理了web前端開發(fā)都應(yīng)知道的jquery小技巧,對jquery小技巧感興趣的朋友一起學(xué)習(xí)吧2015-11-11ztree簡介_動力節(jié)點(diǎn)Java學(xué)院整理
zTree 是利用 JQuery 的核心代碼,實(shí)現(xiàn)一套能完成大部分常用功能的 Tree 插件,本文給大家簡單介紹下ztree的基本知識,感興趣的朋友一起看看吧2017-07-07DropDownList實(shí)現(xiàn)可輸入可選擇(兩種版本可選)
本篇文章主要介紹了DropDownList實(shí)現(xiàn)可輸入可選擇的具體實(shí)現(xiàn)代碼,并附上兩種版本(js版本和jquery版本),可供大家選擇。有需要的朋友可以參考下2016-12-12