幫助IT團(tuán)隊(duì)快速構(gòu)建符合jt808協(xié)議部標(biāo)的基于java技術(shù)的GPS和視頻平臺(tái)(2379423771@qq.com)

          Think in Jquery

          大部分情況下,我們面臨的背景是:

          設(shè)計(jì)者高高在上,不食人間煙火,只是提供約束,不要這樣,必須那樣,而不是提供方法和可以復(fù)用的API。

          開(kāi)發(fā)者是處于解決問(wèn)題的一線,飽嘗重復(fù)造輪子的疾苦,他們最需要的是快速的解決問(wèn)題,以更恰當(dāng)?shù)姆绞焦ぷ鳎瑢ふ腋菀讟?gòu)建系統(tǒng)的技術(shù)和方式。
          Jquery給設(shè)計(jì)者上了很好的一課。
          Jquery就像一個(gè)魔法師一樣,$()就像魔法棒一樣,隨手一指,一個(gè)木偶變復(fù)活了,一瞬間具備了各種各樣的復(fù)雜的能力。
          1)分離和粘合

          在jquery的身上得到淋漓的體現(xiàn)。不僅是分離結(jié)構(gòu)(structure)和行為功能(behaviour),在強(qiáng)調(diào)分離的同事,提供了強(qiáng)大的連接、粘合的能力。

          1.結(jié)構(gòu)  <div id="div_portlet"></div>
          2.功能  function  tooltip(){}
          3.粘合 $("#div_portlet" ).tooltip();  //對(duì)于開(kāi)發(fā)者,一行代碼就達(dá)到設(shè)計(jì)上的分層分離和功能實(shí)現(xiàn)兩個(gè)目標(biāo)了。
          同樣是使用傳統(tǒng)的javacript library, 所謂OO的做法如下:

          <script> var tootip = new Tooltip(); //創(chuàng)建OO對(duì)象</script>
          <div id="div_portlet" onmouseover="tooltip.display();"  onmouseout="tooltip.hide();" ></div>
          兩者對(duì)比,可以看出,Jquery非常非常的體貼開(kāi)發(fā)者,通過(guò)強(qiáng)內(nèi)聚的API的設(shè)計(jì),封裝,再封裝,一個(gè)方法包辦了onmouseover和onmouseout兩個(gè)事件,擦屁股的事情也解決了。

          想象以前,是怎么給一個(gè)table或DIV做圓角的,很多的方案是CSS+圓角圖片,很麻煩,圖片的背景還要符合頁(yè)面環(huán)境的顏色。
          jquery是怎么做的:$("#div_portlet" ).corner(); //搞定,不需要CSS,不需要圖片。

          2)封裝,封裝,再封裝

                Write less. Do more, 是Jquery的口號(hào)。
                也應(yīng)當(dāng)是每個(gè)設(shè)計(jì)者設(shè)計(jì)API牢記的,API的設(shè)計(jì)宗旨就是要,苦了我一個(gè),幸福無(wú)數(shù)人的精神。參見(jiàn)【好事要做到底,我們需要full stack的API設(shè)計(jì) 】。
                有人說(shuō),Jquery的代碼太亂,真是有閑工夫,我還在Javaeye論壇上,見(jiàn)過(guò)別人說(shuō)Spring的代碼亂,還有人說(shuō)JBPM的代碼像一托屎。這些偉大的框架,都是自己封裝了復(fù)雜度,竭力把最簡(jiǎn)潔的API留給使用者,讓你專(zhuān)注于自己該做的事情。換來(lái)的卻是責(zé)難。
               可惜的是,我們用別人的庫(kù)是,總是要做一大堆的事情,才完成一個(gè)復(fù)雜的功能。
               例如我們?cè)陲@示Flash Object時(shí),使用swfObject.js 需要完成的代碼是:
             
          <script type="text/javascript">

          var so = new SWFObject("../open-flash-chart/open-flash-chart.swf", "ofc", "250", "200", "9", "#FFFFFF");
          so.addVariable("data-file", "../data-files/data-60.txt");
          so.addParam("allowScriptAccess", "always" );//"sameDomain");
          so.write("my_chart");

          </script>

                同樣使用JQuery jQuery Flash Plugin,一條代碼就搞定了。
               $('#hello').flash(
                    { src: 'hello.swf' },
                    { expressInstall: true }
                );

          3)  充分利用倒鉤(hook)、回調(diào)(callback) 定制行為

                在API的默認(rèn)behaviour不能滿(mǎn)足要求的前提下,使用hook、callback,可以讓API的調(diào)用者,可以盡最大程度的定制自己、添加自己的特殊行為。Jquery的core、Plug-in,都大量的使用了這種技巧。

               如:$("div_content").toggle(); // 默認(rèn)是切換hide 和 dispaly 兩者行為。

               如果你想在切換時(shí),做一點(diǎn)其他的事情。如通知另一個(gè)控件。

               可以:$("div_content").toggle(function(){
                        //可以發(fā)送消息,或出發(fā)事件。
                });

          4) 減少代碼的行數(shù)是降低復(fù)雜度的最有效方式

          http://www.netvibes.com  是一個(gè)portal網(wǎng)站,它的portal使用了Mootool的javascript框架,  javascript的總行數(shù)將近6萬(wàn)行。Mootool的OO確實(shí)做的很好,號(hào)稱(chēng)適合在大型、復(fù)雜的應(yīng)用中使用,可惜在復(fù)雜的應(yīng)用當(dāng)中,過(guò)度的OO,并不能提供簡(jiǎn)潔的功能,繼承的濫用反而增加了復(fù)雜度和維護(hù)的難度。
          我down下來(lái)代碼后,看了看,覺(jué)得 如果使用Jquery,代碼最少能縮小一半。
                
          如果你一定要堅(jiān)持你的應(yīng)用是大型的javascript應(yīng)用(盡管沒(méi)有標(biāo)準(zhǔn)衡量),你就喜歡Class,看不到這個(gè)單詞,你就不爽。看看下面的文字。

          5). OO和JQuery的結(jié)合

           很多人并不了解OO,對(duì)于OO不過(guò)是葉公好龍吧了,以為OO,就是一定要出現(xiàn)個(gè)Class, 然后在不斷的new 來(lái)new去,這就是OO的編程。本來(lái)一個(gè)Utility的方法,非要OO,結(jié)果先要new一個(gè)Object, 然后在調(diào)用Ojbect的方法。

            OO是這樣子嗎?當(dāng)然不是,封裝、繼承、多態(tài),是OO的核心。
            OO的編程雖然可以幫助用戶(hù)開(kāi)發(fā)高度有彈性、易擴(kuò)展、以維護(hù)的程序,但前提是要理解OO。    

            如果我們不滿(mǎn)足于使用Jquery的API、plug-in的功能,我們想用它來(lái)作為我們開(kāi)發(fā)大型OO-based 項(xiàng)目的基礎(chǔ)javascript框架時(shí),我們?nèi)匀豢梢酝ㄟ^(guò)plug-in的方式,讓JQuery具有OO編程的基礎(chǔ)框架的功能。

             Low Pro for jQuery   是一個(gè)模擬prototye OO 的Jquery plug in,  是你可以用Prototype的OO方式編程。

             使用插件前的API的調(diào)用方式
                $('#example4').draggable({ helper: 'clone', revert: true });
          假設(shè)我們遇到了復(fù)雜的情況,想改變draggable的情況,這是只有修改源文件了。
           使用插件后,我們可以通過(guò)類(lèi),繼承類(lèi)來(lái)改變對(duì)象的行為。
           
          Draggable = $.klass({
                 initialize: function(options) { },
                 onmousedown: function() {}
             });
          通過(guò)繼承來(lái)擴(kuò)展對(duì)象的行為:
             GhostedDraggable = $.klass(Draggable, {
             onmousedown: function($super) {
                  $super();
                 //此處可以編寫(xiě)自定義的行為代碼
             }
             });
          然后通過(guò)attach的方法綁定到制定的DIV上:
          $('div.product').attach(GhostedDraggable, { anOption: thing });

          6).在應(yīng)用中,盡可能的使用一個(gè)框架,便于技術(shù)積累。
            Jquery可以滿(mǎn)足你大部分的要求,不是做不到,是你不知道, 你不知道Jquery的有這樣的能力罷了。

             我做的最近一個(gè)Portal項(xiàng)目,javascript全部是基于Jquery的,參見(jiàn)下圖。
             使用的插件不多,但都實(shí)用。
             JTab、Draggable、Selectable、Sortable、Jcorner、Jtip
             那個(gè)chart也是基于Jquery, 不過(guò)是拿過(guò)來(lái)經(jīng)過(guò)經(jīng)過(guò)改進(jìn)的。
             至于我們基于jquery的編程風(fēng)格就不用多說(shuō)了。


          my project

          posted on 2008-07-15 19:06 Speed 閱讀(6604) 評(píng)論(5)  編輯  收藏 所屬分類(lèi): 框架設(shè)計(jì)前端設(shè)計(jì)JQuery

          評(píng)論

          # re: Think in Jquery 2008-07-15 20:14 R_XiaoGuang

          寫(xiě)的好,拜讀!  回復(fù)  更多評(píng)論   

          # re: Think in Jquery 2008-07-16 08:32 chaowei

          寫(xiě)的好,支持.  回復(fù)  更多評(píng)論   

          # re: Think in Jquery 2008-12-26 17:21 devil01

          嚴(yán)重支持   回復(fù)  更多評(píng)論   

          # re: Think in Jquery 2009-02-19 14:34 duduli

          最近想學(xué)Ajax框架。
          看了文章覺(jué)得對(duì)jquery懂了不少。  回復(fù)  更多評(píng)論   

          # re: Think in Jquery 2009-04-24 11:12 jifei

          好的很,我在嘗試使用它.  回復(fù)  更多評(píng)論   

          導(dǎo)航

          留言簿(15)

          隨筆分類(lèi)

          值得一看的博客

          積分與排名

          最新評(píng)論

          閱讀排行榜

          主站蜘蛛池模板: 铅山县| 八宿县| 陆川县| 安泽县| 常山县| 太原市| 牟定县| 区。| 津南区| 孟州市| 芦山县| 安宁市| 曲松县| 连云港市| 万载县| 都安| 海晏县| 务川| 美姑县| 越西县| 宁陵县| 车险| 镇安县| 保康县| 交城县| 浪卡子县| 太谷县| 南岸区| 元朗区| 昌乐县| 晴隆县| 奉化市| 江口县| 深水埗区| 田林县| 新宾| 含山县| 英山县| 信宜市| 镇雄县| 晋宁县|