剛接觸前端不久，發現裡面的水可真深，上週在寫一個小專案時，遇到了一個十分詭異的問題。

    專案的前端是用freemarker生成的,有個頁面（簡稱A頁面）裡面嵌套了一個巨集，然後在巨集裡面我引入了一個jQuery外掛（inputmask 主要用來做資料校驗的），在寫完一系列邏輯校驗程式碼之後，然後訪問A頁面，結果有js錯誤，說jQuery物件未定義，這個問題很容易解決，原因是我雖然A頁面底部引入了jQuery檔案，但由於指令碼載入時按順序來的，所以它在初始化Inputmask這個外掛時，需要呼叫到jquery物件，而此時jquery這個檔案還尚未被載入，我想當然的就在巨集裡面又引入了一次jquery檔案。再次訪問A頁面，又出現了新問題，說的是inputmask這個函式找不到。我嘗試的跟了下inputmask外掛的程式碼，發現在初始化時都沒有問題，埋頭調了一下午，終於找到了問題關鍵所在，問題就出在引入了兩次jquery檔案，當載入inputmask這個外掛時，它將Inputmask函式繫結在了第一個引入的jquery物件上，然而當A頁面全部載入時，jquery物件又被載入了一次，它會把第一次載入jquery物件給覆蓋掉，所以此時的jquery物件上面根本沒有繫結inputmask這個函式，呼叫時就會報錯。

    解決方案：你可以把第一次載入的jquery物件儲存起來，這樣這個jquery物件始終有inputmask函式或者你可以把A頁面的jquery引用檔案放到這個巨集的前面。（據說前端優化推薦CSS樣式引用放在最前面，JS檔案引用放到最後）

總之儘量避免重複引入相同的檔案。