總體思路

1、  建立一個js服務，該服務實現通用js檔案的載入、依賴、快取、更新以及複用。

2、  各個專案如果使用通用js，可（bi）以（xu）使用js服務實現載入。

3、  Js服務只提供通用的js，比如jQuery、my97、easyUI等（可根據實際情況設定具體的js檔案）。

4、  其他針對特點需求寫的js檔案，需要自己寫程式碼載入。Js服務可以提供載入用函式。（正在考慮要不要使用sea.js）

5、  Js服務載入的js檔案，不需要做任何修改。當然也不負責各個檔案裡的函式名稱是否衝突。

　　Sea.js追求自然程式設計，程式碼要寫的自然。很是巧合我也推崇自然程式設計，我寫的框架就叫做“自然框架”。只是在載入js這塊和sea.js的思路有點不同。

　　一個專案裡需要的js檔案可以分為三種：第三方通用js（比如jQuery、my97等）；自己公司寫的通用js（比如我寫的NatureUI）；自己對特定需求寫的特定js。

　　我覺得對於通用的js，就不需要每次用的時候都去寫一行程式碼進行載入，太麻煩了。比如jQuery，載入（自動處理）之後我直接$就可以用了，沒必要在寫一行載入用的程式碼。因為Js服務會把各種通用js檔案一次性的載入到top頁面，然後利用“複用”的方式，讓其他頁面可以直接使用。也就是說在子頁裡，不用去考慮jQuery有沒有載入，載入完成了沒，不用再令寫一行載入的js，直接用就好了。

　　就像我們寫C#程式碼，新建一個專案的時候，VS會把常用的dll引用進來；新建一個頁面的時候，VS會把常用的名稱空間using上，不需要我沒再去操心了。我覺得這種方式比較簡單，至於是否自然，那就是仁者見仁智者見智了。

載入流程

看圖

1、  在頁面裡使用<script >引用boot.js。這個主要是一個載入程式，用他來載入其他的js。

2、  然後看看是否有快取資訊。

3、  如果有快取資訊，那麼說明這是子頁。呼叫適配函式，讓子頁可以訪問top頁里加載的js檔案。然後看看子頁裡有沒有jsReady函式，如果有則呼叫。

4、  如果沒有快取資訊，說明這是top頁面，需要載入另一個js（bootLoad.js）。這個是真正幹活的檔案。這裡放在配置資訊和載入css、載入js的函式。然後開始各種載入。

　　基本流程就是這樣，如果你看了第一篇的預告，會感覺這個流程圖似乎不太一樣。確實不一樣，我又修改了一遍。感覺修改後流程更簡潔、思路也更清晰了。下面用FAQ的方式來進行說明。估計看了之後會有不少疑問。

FAQ

1、 為啥有一個boot.js後又有一個bootLoad.js?

　　原來只有一個的，分成兩個是為了讓boot.js儘可能的不需要修改。因為我無法保證boot.js是最新的。

2、 Top頁面是啥？

　　Top頁面就是最外面的頁面，top頁面裡用iframe載入其他頁面，叫做子頁。

3、 子頁是啥？

　　在top頁面裡用iframe載入的頁面。可以通過top.的方式來訪問top頁裡的資訊和函式。

4、 適配是啥意思？

　　　　在子頁裡雖然可以訪問top頁裡的函式，比如top.$。但是訪問的時候要加上top.這個就比較麻煩了。所謂的適配，就是讓程式設計師不用操心自己寫的js是執行在top頁裡還是子頁裡，統統$就可以了。

　　　　對於第三方外掛需要做一些適配，目前已經搞定了jQuery和my97，easyUI還沒有搞定。

　　　　因為可能大家都沒有想過在子頁裡使用top頁裡的函式吧，所以寫外掛的時候根本就沒考慮。比如my97，在top頁裡彈出日期選擇的div，由於子頁和top有位置偏差，所以日期選擇也偏出去了，沒想到啥好辦法，只好改my97 的原始碼了。

5、 不就是載入js嗎，弄這麼複雜幹嘛？

　　　　如果只有一兩個js檔案要載入，確實不需要這麼複雜。但是如果有十多個甚至幾十個js檔案要載入呢？

　　　　如果自己要開發一套UI外掛，那麼在開發除錯階段，要載入未合併的js，這樣便於除錯和修改。開發的差不多了，在改成引用合併後的js檔案。那麼引用js的部分怎麼處理呢？尤其是一邊開發UI，一邊開發專案的時候。

6、 怎麼還有css的事？

　　Css也是要載入的，一般一個專案的各個頁面用的css都是一樣的。這裡也順便一起載入了。

7、 配置資訊裡都有啥？

　　　　因為js服務在一個單獨的站點裡面，那麼這個站點的網址是啥呢？192.168.0.55還是Resource.naturefw.com ？這個地址就需要在配置資訊裡面說明，以便於引用。另外還有單點登入的網址，還有其他的一些資訊。

8、 為啥要快取？

　　　　不想每個頁面都去載入固定不變的東東，比如配置資訊和通用函式。雖然瀏覽器在載入的時候會啟用快取，但是不太好控制。客戶端也可以強制不用快取。也許是我控制慾比較強吧，我想更好的控制。

　　　　另外用快取，速度會更快一些，比較不用瀏覽器去做各種判斷了。雖然判斷的時間一般也挺快的。

9、 如何實現更新？

　　　　用版本號，設定一個版本號，有更新了，改一下這個版本號就可以了。

10、  看你寫了好幾次複用，到底是啥？

　　　　就是讓子頁用top頁里加載好的js。

11、  如何避免各個檔案裡的函式名稱衝突？

　　　　我用的是名稱空間的方式，C#寫的比較多了，感覺名稱空間挺好用的，就移植過來了。看了sea.js的介紹，裡面也提到了名稱空間的方式，是yahoo用過。Sea.js並不推薦，因為使用的時候要記住長長的名稱空間。但是我覺得這個不算事呀。不就是長點嗎，安裝Resharper（R#）之後，點.也是可以出提示的。另外可以用“別名”，比如 var form = Nature.Controls.Form; 這樣就好了。

12、  其他js都是怎麼下載的？

　　　　做一個js檔案路徑的字典，json格式，弄個暱稱最為key，域名 + 路徑 + 檔名作為value。按照依賴制定前後順序，然後按照這個字典進行逐一載入就可以了。

13、  為什麼沒有做延遲載入？

　　　　我把共用的js檔案都載入到了top頁面裡，子頁想用的話，直接用好了，完全沒有再次載入的過程。雖然一開始需要載入更多的js，但是一般可以忍受。另外登入OA，第一件事情就是輸入使用者名稱和密碼，那麼完全可以利用這個“空餘”時間來實現其他js的載入。

目前只想到這些，還有哪些疑問，歡迎大家提問。

ps：下集預告，就是看看執行效果了，可能寫了這麼多，大家可能還沒有一個具體的概念，到底是啥樣子的呀。下一篇會貼一些執行截圖。