天天看點

編寫Javascript類庫(jQuery版) - 進階者系列 - 學習者系列文章

      這些年主要關注于項目管理方面的工作,編碼就比較少了。這幾天比較空閑,就想把原來的經驗沉澱下來,一個是做好記錄,以後如果忘記了還能盡快找回來,第二個是寫寫博文,算是練練手筆吧。

      言歸正傳,這次寫的是Javascript類庫。大家都知道,Javacript是一種很有意思的語言。雖然它是前端語言,但是它能做的事情遠遠超出我們的想象。Javascript同樣是一種面向對象的語言,使用它,同樣可以自定義對象,同樣也具備對象的一些特性,即封裝,繼承,多态性。同時,Javascript同樣也有設計模式,同樣能過編寫出高品質的代碼,雖然在很多時候不是很需要這樣。

      這次要寫的Javascript類庫,其實很簡單,隻是用jQuery插件的方式将各種自定義函數進行封裝而已,便于調用。下面是Visual Studio 2013的解決方案圖。

編寫Javascript類庫(jQuery版) - 進階者系列 - 學習者系列文章

      這裡其實也是定義了Javascript的一種架構,即jQuery的架構方式(基于目錄的架構)。後續将會繼續補充和完善該jQuery插件的使用方法等等。關于架構方面,以前關注得也相對比較多,但是最近想再翻出來玩玩,是以後續也會陸續有關于.NET架構方面的文章發出。

下面簡要對該類庫做個說明。先看編寫方式說明:

編寫Javascript類庫(jQuery版) - 進階者系列 - 學習者系列文章

      相信有一點Javascript基礎的人就能看得懂了。使用方法很簡單,就是基于jQuery的匿名函數編寫的靜态函數而已。

      使用方法:$.JSFn.FunctionWithOutParam();

      然後開始看代碼:

編寫Javascript類庫(jQuery版) - 進階者系列 - 學習者系列文章

      這裡用jQuery的extend方法進行了擴充,就是基于這種方式的一種封裝。定義了該插件,即函數名稱為JSFn,這裡沒有使用Common,主要是認為這個是Javascript的一些自定義函數,應該封裝在函數庫中。上面同時定義了PlugInInfo這個靜态變量,使用靜态變量的方式聲明了該類庫的一些基本資訊。

      下面拿一個庫中的函數進行下說明:

編寫Javascript類庫(jQuery版) - 進階者系列 - 學習者系列文章

      首先,聲明函數名稱CheckBrowser,用function匿名函數封裝起來。在函數的{号下面添加函數聲明注釋。

                /// <summary>

                /// 檢測浏覽資訊

                /// </summary>

                /// <returns>傳回包含浏覽器資訊的變量</returns>

      這裡必須這樣子添加注釋,否則在使用該類庫的時候無法取得智能函數提示了。見下圖。

編寫Javascript類庫(jQuery版) - 進階者系列 - 學習者系列文章

      下面看看測試用例:

編寫Javascript類庫(jQuery版) - 進階者系列 - 學習者系列文章

      這裡隻是簡單的擷取了該類庫的一些靜态變量的基本資訊而已。

      上面的測試方法,同樣能使用下面的方式進行測試:

編寫Javascript類庫(jQuery版) - 進階者系列 - 學習者系列文章

      使用上面的代碼,就能夠把該代碼插入到頁面的任意位置,反正也是在頁面各元素控件加載完畢後再執行。

      最後,提供該函數類庫的下載下傳,歡迎大家添加并共享出來。

      上面簡要的描述了基于jQuery匿名函數的Javascript函數類庫的編寫方法,希望能夠對大家有那麼點幫助那就夠了。

Ps.今天已經周四了,時間過得很快,馬上又要到年底了。祝願在剩下的幾個月中能有好的文章寫出來。

繼續閱讀