這一篇將介紹Jla架構的核心,在此之前,先要介紹"Jla"這個名稱,全稱是"JavaScript Lazy App",這個架構的核心是將一系列代碼單元組合起來,在頁面上按需載入,也就是通俗提到的"懶載入",這也就是這個名字的由來。 當我們來仔細審視JavaScript相對於其他語言的特點時,我們會發現,安全性和對懶載入的支援是我們不能忽視的特性,安全性是指使用者通常會信任JavaScript指令碼的運行,因此啟動並執行平台非常廣泛,而懶載入則使得我們在開發之中,可以靈活的控製程序單元從服務端流向用戶端的過程,這樣,就為使用JavaScript進行大型項目的開發提供了可能。 在現在,越來越多的傳統型應用程式正在改為BS模式,原來的程式可能是幾十兆甚至上百兆,這種情況下,如果通過BS模式一次載入所有的功能到頁面上,會給用戶端帶來非常不好的使用者體驗,對伺服器的壓力也挺大,而且其中的大部分功能未必使用者真正能用得上,因此我們最好是將程式進行分拆,任何功能都是在需要的時候再載入,例如點擊按鈕之後執行的操作等。 Jla架構正是為解決這個問題而設計的架構,我們先看看該架構是怎麼定義的: 在Jla架構之中,一個程式由眾多的代碼單元組成,每個代碼單元應該是這樣的模式:
1 Jla.require(["namespace.ClassA","namespace.ClassB"],2,function(ClassA,ClassB)
2 {
3 //code of ClassD start
4 function App()
5 {
6 }
7 App.prototype.onClick=function()
8 {
9 Jla.require(["namespace.ClassC"],1,function(ClassC)
10 {
11 //調用ClassC.完成點擊之後執行的操作
12 })
13 }
14 //code of ClassD End
15 Jla.set("namespace.ClassD",App);
16 })
從上面的代碼單元來看,這個代碼單元是定義了一個類,這個類的命名空間是namespace.ClassD,通過Jla.set來向架構之中註冊這個命名空間,這個類使用到了兩個Jla.require方法,代表這個類在運行時會依賴其他的類。 當一個類需要調用其他類的時候,要求使用Jla.require模式,該模式有三個參數: 參數1是一個命名空間數組,代表需要調用哪幾個類 參數2是依賴的類型,有三種類型: 值1代表應該立即去擷取該類,並在擷取完成之後執行回呼函數,主要用在需要懶載入的情況,例如點擊按鈕之後執行的函數等 值2代表的含義和1相同,但是進一步建議在代碼發布時應該將這幾個類也打包在一起(意味著依賴程度太高,不建議使用動態載入),主要用在一個類必須引用另一個類才能啟動並執行情況下 值0代表不需要主動去載入該類,但假如該類已經載入或者後面被其他的類引用載入,則執行回呼函數,用的比較少,主要用在一些事件綁定過程上。 參數3是回呼函數,在需要的類都載入完成後,會自動執行回呼函數,而且會將需要的類列表作為回呼函數的參數傳遞,這樣就可以直接使用那些類,而不需要再次執行 雖然以上的代碼非常簡單,實際上也就使用了Jla.require和Jla.set兩個函數,但這段代碼已經完整表達了Jla架構的核心規範,我簡單的描述一下這個核心所定義的規範: 1.不要直接調用一個類,對外部類的引用都應該通過Jla.require來引用,雖然你可能直接通過命名空間或者Jla.get(namespace)調用到那個類,因為這樣就破壞了規範,而且如果你調用的時候該類還沒有載入完成,就會出現異常; 2.每個代碼單元都應該明確在實現自己的邏輯的過程中需要依賴哪幾個類,依賴程度如何,只有對這些能明確下來,才能保證最後應用程式只會載入需要的邏輯單元; 3.每個類都只應該關心自己實現的邏輯,而不需要關注最終的程式是什麼樣子的,這樣才能保證每一個代碼單元的重用性。 這個架構規範比較簡單,僅僅拿著這個架構去開發會遇到一些麻煩,但是實際上這已經是一個完整的開發架構,後面我繼續描述的內容比較多,但都是依賴這個架構的應用,並不是對這個架構的補充。