我在實驗AngularJS-系統代碼的配置和翻譯的時候遇到了如下圖所示的錯誤:
在JS編程的時候會經常遇到,XXX不是一個函數,XXX未定義等等錯誤,只要看到和自己編寫的代碼語句相關的東西直接找到就能定位並將問題解決了,但是有時候前端拋出的錯誤和我們自己編寫的代碼好像沒有什么直接的關系,這時候就需要我們好好的分析一下了,積累一些這方面的異常處理經驗也是挺有用的。
和我們自己編寫的代碼沒有關系,我們就要找找看,看看是否能找到一些聯系,並從這些聯系中將我們的問題解決掉,如下是我的分析過程:
1:先好好的看一下報錯的提示信息,看看是不是自己一眼就能看穿的,看看能不能找到自己編寫的一些代碼片段,如果不能的話,就嘗試點擊到框架的代碼的里邊看看能否找到一些蛛絲馬跡
2:分析拋錯代碼段部分,看看能否大概定位到問題的所在,如果不行,就debug調試一下代碼
3:調試框架代碼的過程中注意觀察,看看是否能找到和自己代碼段相關的部分,一般就是這一塊引起的問題,即使不是也離問題源不遠了
4:根據以上分析回頭查看自己的代碼段,定位並將問題解決掉
5:小結
軟件開發這件事情遇到各種各樣的問題是再平常不過的事情了,我們的能力也是由我們解決問題的能力來反襯出來的,對於前端編程而言,出現的問題一般都相對好定位、好解決一些。下面是我經常遇到的一些問題:
5-1:XXX不是一個函數?
此類問題產生的原因各式各樣,不過總的來講看看XXX是怎么實現就能將問題解決了。要么就不是一個函數,要么被別的代碼覆蓋掉了后來變成不是一個函數了。
5-2:XXX未定義?
此類問題產生的原因也是格式各樣,與5-1的解決方案類似,找XXX看看基本能將問題解決掉。要么就是沒定義,要么后來變成了undefined,常見於鏈式調用中。
5-3:瀏覽器崩潰了?
代碼很可能進入了死循環,執行那段代碼引起的,好好查看一番,如果不知道,只能一部分一部分的執行排查出對應的代碼段,然后分析為什么進入了死循環,找到引起問題的代碼段基本上能將問題解決掉。
5-4:瀏覽器不兼容?
這個問題是前端開發們比較頭大的一個問題,我也比較頭大,也遇到過N多次了,誰讓瀏覽器廠家那么多,為了競爭自己多加一些特性或者對組織指定接口通過不同的方式實現,或者實現起來有所差異。這個要具體問題具體分析,另外就是在使用框架的時候,最好按照框架建議的方式編寫代碼,不要在代碼中有多種的代碼實現方式,比如:又有jQuery的實現方式,又有原生DOM的實現方式,又有AngularJS的實現方式。一是具體問題具體分析,另外就是積累一些瀏覽器對相同的功能不同的實現方式,添加根據不同瀏覽器使用不同方式實現的功能代碼。
5-5:瀏覽器加載速度比較慢?
這個問題也要具體問題具體分析了,網絡問題、服務器問題、資源的量比較大等等都有可能引起此類問題,發布的代碼要盡量的輕量話,要經過壓縮處理,多余的代碼、多余的注釋、多余的打印、多余的庫文件等等要全部的去掉,別的不好保證至少代碼本身要保證是最佳的。
5-6:一段代碼今天還能實現某個功能那,隔幾天就不靈了?
這個是最莫名其妙的,不過這個問題也時常的出現,可能是原來就沒測試到、也可能是其他的代碼修改后引起的,修改別的代碼后沒有測試到這一塊沒有及時發現,也有可能是庫文件或者框架文件的版本更改了導致的,無風不起浪事出必有因,看看是那里變化了,引起了這里的變化,要具體事件具體分析了。
5-7:同樣一段代碼,在這個頁面能實現某個功能到,粘貼復制到另外一個頁面就不行了?
這里的同樣一定是部分相同,一定有不同的地方,所以才這樣的。可能是上下文不同了,可能是大環境不同了,可能是運行環境不同了,總之找到他們不同的地方就能定位到問題的所在了,如果不同的地方還蠻多的只能采用二分法逐一的排查了,直到定位到引起此問題的代碼片段為止。
5-8:代碼邏輯問題,對應的功能實現不了?
按F12然后找到對應的代碼打上斷點,一步一步的調試看看,不規范的代碼編寫方式常常引起一些莫名奇妙的問題,比如:一個方法常常不是一頭進一頭出,中間常常調用別的方法或者別的全局變量,而且調用這個方法或者變量的地方有好多處,又或者到處使用全局變量,還有變量名和方法名重復的情況。
5-9:頁面元素的樣式、位置問題,不好看了、沒對齊了?
這個問題常常出現,同樣的頁面不同的瀏覽器或者同樣的瀏覽器不同的版本或者不同的設置就會出現這樣的問題,這也是令人頭疼的瀏覽器兼容性問題之一,測試的時候主流的瀏覽器都要試一下,然后調整,平時養成良好的編程習慣,積累一些同樣樣式或者功能不同瀏覽器不同實現的方式,然后在代碼中做出判斷后再選擇使用對應的方法。如果是使用框架,那就按照框架推薦的方式來使用吧!
5-10:框架的功能實現不了啦?
自己寫的代碼和框架起來沖突了,常見的是代碼的命名重復導致的,只能一步步排查了,也有可能是其他庫文件代碼導致的,當然這種問題出現的概率比較小,但是也是有可能的,具體事件具體分析。