프런트 엔드 개발에 ExtJS를 사용할 때 Google Chrome 및 Firefox에서는 시스템이 정상적으로 표시되지만 IE 브라우저로 열면 다음과 같은 오류 메시지가 보고됩니다. 문자열 또는 숫자. 나중에 코드를 확인해 보니 js 코드에서 쉼표를 불규칙하게 사용해서 IE가 호환되지 않는 것을 발견했습니다.
저는 Eclipse를 사용하여 코드를 작성하므로 이 문제를 해결하기 위해 Eclipse를 사용하는 방법을 소개하겠습니다.
예를 들어 다음과 같은 불규칙 코드가 있습니다.
Ext.onReady(function() { var panel = Ext.create('Ext.container.Viewport', { layout : 'border', items : [{ title : 'north panel', html : 'north content', region : 'north', height : 100, }, { title : 'west panel', html : 'west content', region : 'west', width : 150, // 这是备注1 }, { title : 'main panel', html : 'main content', region : 'center', /* 这是备注2*/ }] }); });
보시다시피 100, 150, 가운데 뒤에 쉼표(,)가 있습니다. IE에서 실행하면 실제로 오류가 발생합니다. 이제 코드가 이렇게 작성되었으니 이 문제를 어떻게 감지할 수 있을까요?
그림 1: 파일 검색
위 그림 1과 같이 eclipse의 File Search 기능을 이용하면 정규식을 이용해 검색할 수 있습니다. 정규식은 s*}입니다. 그러나 문제가 있는데, 위의 첫 번째 오류만 검색할 수 있습니다. // 또는 /**/를 주석에 추가하면 감지할 수 없습니다. 그러나 yuicompressor와 같은 js 코드 압축 도구를 사용하여 코드를 압축할 수도 있습니다. 압축하는 동안 모든 주석이 제거되고 압축된 js 파일을 감지할 수 있습니다. 물론 자신만의 알고리즘을 작성하여 탐지할 수도 있지만 이는 여전히 일반 사람들에게는 어렵습니다!
그러나 저는 플러그인을 사용하는 또 다른 방법을 제안합니다. 여기서는 Spket 플러그인을 사용하고 있습니다. Spket 공식 웹사이트는 http://www.spket.com/입니다. Spket eclipse 플러그인을 다운로드하려면 eclipse 마켓에서 직접 다운로드할 수도 있습니다. 다운로드한 후 플러그인을 설치한 다음 spket으로 js 파일을 엽니다.
그림 2: Spket을 이용한 탐지
위의 그림 2와 같이 Spket은 코드의 불규칙성을 자동으로 감지하고 문제가 있는 부분을 표시하는 것을 볼 수 있습니다. 코드를 작성하는 동안 문제를 발견할 수 있어 표준화되고 아름다운 코드를 작성하는 데 도움이 됩니다. ! 그런데 IE에 존재하지 않는 객체가 사용되기 때문에 호환성이 문제가 되는 경우가 있습니다. 예를 들어, Firefox와 Google에는 콘솔 객체가 있지만 IE에서 console.info를 사용하면 오류가 보고됩니다! 따라서 코드에서 일부 호환되지 않는 개체를 제거하는 것을 잊지 마세요!
이상에서는 불규칙한 쉼표로 인해 JavaScript 코드가 IE와 호환되지 않는 문제를 소개합니다.