js引用後介面無效

標籤：style   blog   class   code   java   ext   

        接觸到了一個新的系統，根據使用者的需求,加上視頻的捲軸來實現根據滾動的效果，在尋找一番資料後,通過簡單的比較，最後選擇使用EasyUI的slider捲軸來實現這個功能,把EasyUI的demo下載下來後，把domo的網頁copy到項目中,並引入對應的css和js，一切準備就緒後，運行頁面，發現頁面中的捲軸中沒有滾動塊， 並且上傳視頻的功能也失效了，我沒有改動任何其他功能的代碼，但是就出現這個的問題，這究竟是什麼原因呢？苦於一時無法找到解決問題的辦法，簡單備份了一下，使用svn還原了一下最初的版本，再次運行，功能可以實現。

        接下來分步進行測試，首先把js放到引入，不寫easyUI的控制項div，<input id ="slider" class="easyui-slider"/>，發現頁面的上傳功能仍然是無法實現，我想問題一定是出在js和css的引用上，難道是js有衝突的？或者說是css有衝突的？再次檢查完之後發現好像是沒有衝突。

<link href="${ctx}/js/uploadify3.1/uploadify.css" rel="stylesheet" type="text/css" /><script src="${ctx}/js/uploadify3.1/jquery.uploadify.min.js" type="text/javascript"></script><script type="text/javascript" src="${ctx}/js/jcrop/jquery.Jcrop.js" ></script><!-- 捲軸開始 --><link rel="stylesheet" type="text/css" href="${ctx}/themes/default/easyui.css"/><link rel="stylesheet" type="text/css" href="${ctx}/themes/icon.css"/><link rel="stylesheet" type="text/css" href="${ctx}/js/roller/demo.css"/><script type="text/javascript" src="${ctx}/js/roller/jquery.easyui.min.js"></script><!-- 捲軸結束 -->

        最終是問的是組長，原來問題就在於的是js衝突，只不過我忘記了這個頁面本身引用了其他頁面，而其他頁面中引用了js和本頁的js有衝突。

        js引用和把這個引用js的代碼全部寫在頁面中是一樣的，當系統找不到js檔案的時候，就無法實現按鈕觸發等功能，而之所以系統找不到js檔案，一是因為這個js根本就不存在，二是因為系統找到了兩份一樣的js，不知道到底是哪一份。這就相當於頁面上有兩個一模一樣的方法，在寫java代碼的時候，方法完全相同的話系統一定會錯誤，而js是指令碼語言只有啟動並執行時候才會報錯，所以我們無法在引用的時候就看到錯誤，只能是根據現象分析錯誤。

        如何避免下次不再出現這樣的問題呢、下次在引用js的時候一定要注意看是否有衝突，這個頁面引用的其他頁面是否有衝突，通過這個問題來思考來改變。A君說的對，一句話，不要給自己現在的錯誤找理由, 要給自己未來的錯誤找解決辦法。