網站前端模塊化開發策略研究

肖慧明

(遼寧軌道交通職業學院,遼寧沈陽 110023)

在通訊技術與互聯網的不斷發展下,網絡用戶數量也得到了飛速增長。互聯網上信息資源的規模正以驚人的速度上升,各類不同種類、不同目的的網站也隨之涌現。企業為了達到樹立其形象、宣傳新產品等目的,紛紛涉足網站建設這一領域。隨著相關企業對網站建設的逐漸重視,網站建設的需求也越來越多,大部分網站的更新周期迅速縮減。雖然網站前端開發的人員也在逐年增加,但面對如今行業需求的快速變化,仍然不能很好的解決前端開發面臨的諸多問題,一種對思想先進、模式良好的前端模塊化開發技術的需求愈演愈烈。

1 網站前端的發展及現狀

網站前端的發展日新月異,短短不過10年的時間,已經逐步引領了潮流。如今,網站已演變為互聯網應用程序,代碼量的爆炸式增長,為了降低開發成本,同時保證代碼的質量,網站前端的模塊化勢在必行。前端模塊化開發在于按布局和功能的模塊劃分,各個模塊負責特定功能,所有模塊按一定的組織方式形成一個整體。模塊化開發的主要目的是為了復用代碼、便于維護、代碼結構清晰等。前端模塊化有利于多人協同開發,降低了開發人員之間的干擾,能夠有效提高網頁瀏覽的速度,減少代碼的冗余,整合網絡信息資源等。網站前端模塊化開發已經發展成為一個系統工程,它需要相關人員多角度分析,共同協作。但目前國內只有少數企業設計了自己耳朵前端模塊化開發框架結構,擁有專屬的開發策略,且對新技術的應用還不夠成熟。網站前端的模塊化開發仍然任重而道遠。

2 模塊化開發策略

與模塊化的程序設計思想類似,前端模塊化開發的基本思想是在Web上以模塊作為基本單位,對相關代碼等進行組織和劃分,各個模塊相互獨立,負責各自特定的功能。在此種策略下,一個網頁可以看作是由一個主模塊和若干個子模塊構成,主模塊相當于程序設計中的主函數,用于存放子模塊以及屬于自身的頁面元素。對網站所需的基本元素進行模塊化,方便對其進行調用和管理。由此可見,網站前端的模塊化開發技術并不太復雜。在網站建設中,采用一套合理有效的開發策略,對HTML、CSS、JavaScript進行有效的拼裝組合,又能減少三者的循環依賴,降低代碼的耦合度。常見的幾種開發策略包括傳統策略、頁面級策略、模塊級策略。

2.1 傳統開發策略

在傳統的模塊化開發中,需要先將各個頁面進行拆分,形成多個基本模塊,如LOGO、導航條、尾部導航、版權信息、內容1、內容2等,每個模塊生成各自的文件。這樣的實現方法雖然看上去簡單方便,但是卻存在很多的問題。例如,傳統的模塊化開發策略將產生大量的模塊,這樣既不便于管理,相應的請求數也會劇增;同時,考慮到大量模塊的存在,需要對其進行壓縮,但壓縮后又會造成新的問題,如容易阻塞頁面的顯示等。基于以上原因,這種傳統的開發策略并不適用于團隊開發,需要做出相應的改進。

2.2 頁面級開發策略

在頁面級開發策略中,根據不同頁面的模塊劃分情況,設定所需要的CSS模塊和JavaScript模塊,各個頁面與其所依賴的模塊關系寫于頁面級的設定文件中。在發生請求時,通過Mini工具將所需要的模塊進行合并,一個請求即可得到請求頁面所需要的全部模塊,解決了再傳統開發策略中,因內容壓縮和模塊過多而出現的問題。

2.3 模塊級開發策略

基于頁面級模塊化開發策略開發的網頁不利于后期維護,在移動某個頁面時,所依賴的模塊也將發生變化,應當全部移除,但其他頁面也可能存在引用情況,導致整個移除花銷增大。除此之外,網站的線上調試極為困難,因為發布的代碼經過混淆之后,難以實現調試。在實際操作中,也存在一些問題,如更新了前端基礎類庫后很難推動全站升級,利用某個新的通用組件時發現代碼實現較為困難,新功能經過評估后只能基于原有類庫繼續開發,公司整合業務、合并產品線時發現前端代碼發生沖突等。

基于上述問題的考慮,模塊級的模塊化開發策略應運而生。模塊級的模塊化開發,是指開發人員分別定義自身頁面模塊的依賴關系,而不再像頁面級模塊化開發那樣集中記錄。發生請求頁面時,頁面的Controller指定需要加載的頁面,由加載的Loader自行計算需要加載的模塊,同時Loader與服務器端進行交互,對所需要的模塊進行分組、合并、壓縮操作,并行下載至請求的瀏覽器上。

目前基于模塊級的模塊化開發規范的框架較多,如RequireJS,它是目前使用較為廣泛的框架,在定義好模塊的依賴關系后,不需做任何的配置,就能實現對所需模塊進行自動有序的載入。RequireJs實現了js文件的異步加載,避免網頁失去響應,同時對模塊之間的依賴性進行管理,方便了代碼的編寫與維護。

與RequireJs相比,YUI3的Loader對下載方式進行了優化,YUI3強調代碼的復用,將功能做了級別劃分和顆粒化的設計,YUI3種子中的Get、Loader模塊是動態按需加載的基礎,YUI3框架通過良好的結構組織,可以根據程序引入的所需模塊名稱自動計算依賴模塊,實現按需加載;YUI3對每個模塊都進行了更細粒度的劃分。YUI Loader用GET的方式指定線上文件的路徑,進行動態的合并,同時做最小化處理。Loader根據模塊載入的數量、順序與當前瀏覽器支持的GET長度自動對請求進行分散、并行下載。在概念上抽象出核心、組件、和工具類,分別放在不同的目錄結構中,需要時自行引用。YUI3的這一設計理念為動態加載的框架設計做了很好的鋪墊。

3 結語

對網站前端的模塊化開發的意義在于最大化的實現了設計的重用,以最少的模塊和零部件,更高效的滿足更多具有個性化的需求。在模塊化開發中,開發人員能夠按照所要實現的功能選擇加載模塊。依賴現有的多種開發工具與框架,適當修改,如目前存在的模塊劃分、模塊粒度、模塊繼承等問題,完善模塊化開發策略。未來的網站前端開發,需要做到易于線上的調試和后期的維護,同時發布時間也需有效縮短,需要開發人員的齊心協力,以實現更好的模塊化開發。

[1]熊茜.基于虛擬表示模型的Web頁面模塊化設計方法[J].計算機應用,2008,25(2).

[2]張宏森,朱征宇.基于模塊的網頁設計技術[J].計算機應用研究,2009,(2):49-50.

[3]鐘志東,孟清.網站開發的五層構架模塊化設計[J].計算機時代,2013,(8):19-21.