js的動態加載、緩存、更新以及復用(二)


 

  上一篇發出來后得到了很多回復,在此首先感謝大家的熱情捧場!有的推薦第三方框架,比如 In.js、requrieJS、sea.js、lab.js等。這個開闊了眼界,以前只知道sea.js,省去了自己搜索的麻煩。也用了點時間簡單看了一下,因為每一個都是大塊頭,都有自己的理念,如果只是簡單使用的話,那么誰便找一個就可以了,但是我習慣把原理弄清楚。因為我覺得雖然不知道原理也可以使用,但是知道了原理后,可以用的更好

 

  主要看的是sea.js,目前簡單的理解是:一個加載js的機制 + 模塊化編程(CMD規范)的理念。這個是淘寶用的,肯定很強大、很結實了。那么我是不是拿來用呢?這就要看看我到底想要什么,以及改動量大小。

  那么我想要啥呢?第一步只想要一個可以動態加載js的代碼,越簡單越好。為啥呢?越簡單就越不需要修改。為啥要求不需要修改呢?因為我想達到的效果是,每個頁面只需要 <script type="text/javascript" src="/boot.js"></script> 這么一行,就可以把所有的共用的js文件都統統的加載進來,並且可以自動更新。

 

  不知道大家有沒有發現一個問題,boot.js 可以搞定其他js文件的更新,但是他自己的更新如何搞定呢?有兩個方法,一個是在后面加個隨機數作為參數;另一個就是一輩子都不需要修改。我不想用前者,因為每次都要去服務器加載,和初衷不符。我想用后者,當然我也知道,不可能一輩子不變,只能盡量延遲修改的時間。所以就需要——簡單。越簡單越不需要修改,也就可以保持更長的時間。所以我起名叫做 boot。就是一個簡單的引導(加載)的功能。

 

  第二步才開始真正的管理js文件。這時候可以考慮使用第三方框架,當然也可以自己寫。因為我可以用boot.js來確保加載哪些文件,以及加載最新的文件。在第二步就需要確定一個解決方案。我的想法就是做一個js文件服務。由這個服務實現加載js、更新js、加載順序(依賴),還有復用。

 

  如果我們要做五個項目,每個項目都是一個獨立的站點,那么對於共用的js文件是怎么處理的呢?1、每個項目站點都放一份,引用自己站點里的。2、做一個獨立的站點存放共用的js,然后其他的項目都統一到這里引用。我用的是第二個方法,你們呢?

 

  突然想到一個問題,我們寫js到底要達到什么目的(效果)?基礎功能(jQuery、my97、editor等)、UI(easyUI等)、處理業務邏輯(做點判斷了啥的)。還有其他的啥。我們每寫一個js文件,都需要考慮要引用哪些文件嗎?目前我做的項目是,由js文件服務來搞定js文件的加載,然后寫點處理業務邏輯的代碼就ok了。

 

  想說的還有很多,只是思路有點亂。后續要上具體的代碼了,不知道大家是不是喜歡。

 

ps:

面對的問題。引用 https://github.com/seajs/seajs/issues/547

惱人的命名沖突

我們從一個簡單的習慣出發。我做項目時,常常會將一些通用的、底層的功能抽象出來,獨立成一個個函數,比如

function each(arr) {
  // 實現代碼
}

function log(str) {
  // 實現代碼
}

並像模像樣地把這些函數統一放在 util.js 里。需要用到時,引入該文件就行。這一切工作得很好,同事也很感激我提供了這么便利的工具包。

直到團隊越來越大,開始有人抱怨。

小楊:我想定義一個 each 方法遍歷對象,但頁頭的 util.js 里已經定義了一個,我的只能叫 eachObject 了,好無奈。

小高:我自定義了一個 log 方法,為什么小明寫的代碼就出問題了呢?誰來幫幫我。

抱怨越來越多。團隊經過一番激烈的討論,決定參照 Java 的方式,引入命名空間來解決。於是 util.js 里的代碼變成了

var org = {};
org.CoolSite = {};
org.CoolSite.Utils = {};

org.CoolSite.Utils.each = function (arr) {
  // 實現代碼
};

org.CoolSite.Utils.log = function (str) {
  // 實現代碼
};

 

引用結束。

 

現在我采用的也是命名空間的方式,當然是按照.net的習慣來的。

 

好的js文件艾

 

不知不覺居然寫了這么多。用命名空間確實便於管理。尤其是管理源碼。另外也應該學習一下CMD、AMD都是啥,自己寫的代碼也應該規范一點。

 

 

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM