야후 사용자 인터페이스 블로그 (YUIBlog)

Satyam 물어보세요 : 코드를 작성 클린, Debuggable

Satyam이 (일명 다니엘 페레로)는 오랜 유이 기고자 전문가의 가장 다작의, 관대한 하나 유이 포럼 . 그는 또한 도서관 학습 유이 2.8.0 : 새 책을에 유이 2.8.0 저자의 . "시리즈 Satyam이 문서의"물어 JoeDev에 의해 제안되었다 . 그 핵심은 (새 도서의 초점 같은) 유이 2 주로 반면, 관행 많은뿐만 아니라 유이 세에 적용되는 여기에서 설명한 - 그리고 프론트 엔드 개발에 일반적으로, 당신의 선택에 관계없이 라이브러리의.

질문을 게시하기 전에 포럼에 유이 도서관 , 거기 스스로에 의해 할 수 많은 것들과, 핸디 경우 도구는 당신이 가진 당신, 당신은 시간이 아니 직접 답변을하여 귀하의 모든 수도 있습니다 찾을 수 있습니다. 게다가, 깨끗한 코드는 훨씬 덜 스트레스를 받게되면 깰 가능성이 강력한 코드입니다. 좋은 관행은 (IRC 채널 또는 포럼 도움을 찾기 위해 당신을 드라이브의 종류) 치명적인 오류를 피할 아니지만 그들은 사소한 오류에 대한 경고를 표면하고 치명적인 가장자리에서 떨어져 도움이됩니다.

이 문서에서는 그 모범 사례 중 일부에 살펴봐야 겠어. 이들 중 일부는 함께 개발에만 해당하는 유이 있지만, 대부분은 도서관 에이 잭스 선택의 적용 당신의 관계없이 개발에 프론트 엔드.

JSLint

여행을 통해 JSLint 유이에 대한 프로세스를 빌드의 일부. JSLint은, 그 자체가 완전히, 자바 스크립트로 작성된 컴파일러처럼하지만, 코드 생성하지 않고있다. 그것은, 그러나, 그 컴파일러는 것이 유용한 오류 메시지 및 경고 많이 생산됩니다. 브라우저의 자바 스크립트 인터프리터는 많은 오류를 용서하고 당신이 모르고있을 기본값을 가정합니다; JSLint의 용서 약간, 그리고 당신의 프로그램에 더 나은 선택이 당신을 가리 킵니다. JSLint 포맷 많은에 사용할 수 있으며 유이 작성 도구는 응용 프로그램 라인 명령을 사용하여 그것을 같이 독립 실행형,하지만 당신이 쓸 수있는 에디터는 가능한 적게 또는 또한 통합을로 이클립스이든 IDE 또는 이상 - -도있다 야후! JSLint위한 도구 .

유이 라이브러리에 코드 많지만 라인은 몇 가지 오류와 경고가있는 JSLint를 통해 갈 수있다면 그렇게해야 코드, (그것은 몇 가지를 피할 수 없습니다.) 내가 JSLint 아주 피곤 할 때 도움이 되었습니까. 원두는 늦은 저녁에 계산 시간의 낭비이며 당신이 가장 명백한 오류를 놓칠 가능성이 높습니다. JSLint 그리고 그게 오늘 몇시에 상관하지 않는다 당신이 일치하지 않는 곱슬 브래킷 또는 문제의 루트에의 맞춤법이 틀린 변수로 바로 가리 킵니다.

당신의 코드가 처음부터 깨끗하게 유지한다면 JSLint이 가장 도움이됩니다. 당신은 전에 JSLint를 사용한 적이 없다면 긴, 그것이 그것이 도움이 이상이 직장을 hampers 것을 느끼게 될 수 있도록 많은 경고와 함께 당신을 홍수 것입니다 이미 라인 수백되는 응용 프로그램에 그것을 밖으로 시도하십시오. 그러나, 그것은 처음 몇 번 발생합니다. 일단 당신이 나쁜 코딩 관행을 멀리하라고 배우고, JSLint 진단 적게 거두 절미하고있을 것이며 당신의 진짜 오류, 당신 미치게 사람은, 명확하게 눈에 띄는 것입니다. 한편, JSLint 당신의 코드를 안전하고 견고하게 가르칠 것입니다.

그래서, 나타나서 힘든 오류 기다 리 지마. 당신이 JSLint를 사용 적이 없다면, 당신은 좋은 코드로 무엇을 믿는 그것을 시도, 그것은 당신이 생각대로 잘되지 않을 수도 있습니다. 으로 더글러스 Crockford가 (JSLint의 저자) 말합니다, "JSLint 감정을 당신의 것입니다 상처를 줬어."하지만 그 코드를 지불하는 가격이 더 작아.

글로벌 및 사용되지 않은 변수

JSLint 당신이 경고가 표시됩니다 것들 중 하나는 약 전역 변수의 사용이다. 만든처럼 자동으로 사람 같은, 저기에 대해서 알고 제외한 여야 변수 글로벌 아니 window 이나 document 와 사용하는 라이브러리를 당신이 그와 같은 YAHOO (에 유이 2 또는) YUI (에 유이 3 ). 당신은 또한 하나의 네임 스페이스에 대한 고객님의 세계를 만들 수 있습니다.

전역 변수는 위험 하고, 참이었는데 거기 당신은 원래보다 더 그들의, 또한, 매시업 및 배너 등 "엑스트라"는 그들을 더 추가할 수도 있습니다. 이후로 window HTML을 DOM을 네임 스페이스는 이름 화합물에서하실 수 있습니다 생략 window.name , window.length 및 window.location 변수가 될 세계 name , length 및 location . 당신의 코드에서 이러한 변수 이름을 사용하지 적이 있습니까? 선반에의 사람, 길이 도서 위치의 개체 또는의 이름처럼 - 난 안 HTML을 DOM을의 그들의 뜻에 맞지 테이블에 필드 이름으로 매일지만. 당신이 그들을 선언하지 않고 그 변수를 사용하는 경우? 당신은 가정 수도 length 처음이다 undefined 하지만, 사실,) 경우를 초기화 아니라 선언 고객님 할 당신이 로컬 복사본을 그것의 ( length 참조 될 것입니다 window.length . 그리고면 뭔가를 할당 당신이 location , 당신은 페이지 수도 현재에서 멀리 이동 사용자 실수로 발생할 네. 자, 난 그냥 가능한 충돌의 예로는을 내리고있다 브라우저의 기본 변수에,하지만 당신은 다른 소스, 충돌 증가에 대한 기회에서 라이브러리를 추가하는 시작하십시오. 에 유이의 예제를 사용 형광펜은 자바 스크립트 구문 변수 사용하는 글로벌 dp 루트로서 그리고 적어도 말을 무례, 변수 어떤 구글은 페이지 도구에 삽입하면지도를 추가 스크립트 수있는 다른 또는 세계의 수를.

그것은 당신이 다른 사람의 변수와 관련하여 가볍게 단계 싶은 단순히 아니에요 - 전역 네임 스페이스에서 벗어나는으로, 당신은 그들이 당신 (또는 당신이 스스로 단계는 나중에)에 단계 것이라는 위험을 줄일 수 있습니다. 비동기 스레드가 서로 주위에 자신을 직물로, 자주 현대적인 자바 스크립트 응용 프로그램의 경우, 당신이 정말로있는 코드의 다양한 조각이 실행되며 무엇 전역 변수 어떤 값을으로 좌회전됩니다 주문 확인하실 수 없습니다. 만이 제정신 접근 가능한 그들을 피하기 위해이다.

전역 변수도 오타를 가리킨 수도 있습니다. 당신은 당신이 가진 건 아닌데 전역 변수를 가지고있다면 당신은 비슷한 이름으로 사용하지 않는 변수를 가지고, 당신이 그들 중 하나가 맞춤법이 틀린 것 : 즉, 하나의 이름으로 그것을 선언 할 수 있습니다 그리고 또 다른 다른 철자와 함께 사용 . 당신은 어떤 실행 시간에 당신은 당신이 예상하는 것처럼 당신의 변수가 초기화되지 찾을 수있는 것을 의미합니다, 그것을 사용한 후에 그것은 또한 당신이 그것을 선언한 것을 의미할 수 있습니다.

를 사용하여 this

를 사용하여 this 체인 아르 범위에 우리가 어디에 추적을 잃는 쉽게 종종 있기 때문에 골칫거리에 대한 초보. 우리는 연습을 얻을 때까지는 범위의 유지 추적이 문제가 될 수 있습니다. 또한, 코딩 스타일과 크게 도움이 응용 프로그램에 대한 구조를 개발하고, 결국, 그것은 전부에 대해 어디 장소 것들을 알고. (있다면 장소 논리에 코드를 구성하고 지속적으로 저장하기 위해 당신은 배울 상태 this 지점에 하나의 장소), 프로그램 정보에 쉽게 찾을 수 있습니다. 어떤 디버거가 무엇을 표시합니다 this 각 단계 포인트. 그것은 일이면 확인 첫번째 좋은 항상 this 기대됩니다 객체 참조가. 시간의 많은 버그를 할 때 우리가 가진, 그것 때문인가 this 을 가리키고 window . 이 결과를 생산할 수있는 몇 가지 경우가 있습니다.

의 경우에는 그 아니라 발신자 범위를의 얻을 우리가하지 않은 방법을 함께 것이다 그것은 함수를 그 내부 전화를 우리가 함수 내부 window . 이 예제는 내부 함수는 이내 그것이 포함되어있는 메서드의 범위를 공유하지 않는 것을 보여줍니다 :

  var에 someObject = (
     outerFunction : 함수 () (
         console.log (즉, '외부'이); / /) 외부 개체 (지문
         var에 innerFunction = 함수 () (
             console.log은 (내부 ','이); / / 창 지문 내부
         );
         innerFunction ();
     )
 );
 someObject.outerFunction (); 

이 문제를 해결하는 방법에는 몇 가지가 있습니다. 이 예제에서는, 우리는 사용 범위 올바른 질문 자바 스크립트 call() :

  var에 someObject = (
     outerFunction : 함수 () (
         console.log (즉, '외부'이); / /) 외부 개체 (지문
         var에 innerFunction = 함수 () (
             console.log (즉, '내부'이); / /) 내부 개체 (지문
         );
         . innerFunction 전화 (이);
     )
 );
 someObject.outerFunction (); 

다음 예제에서, 우리는이 포함된 함수의 변수를 공유하는 내부 함수에 대한 능력을 활용할 수 있습니다. 우리는 변수를 만드는 self 우리의 값으로 초기화 this 함수에서 외부. 우리가 사용할 수있는 다음 self 함수에 외부 참조 함수에서 내부 :

  var에 someObject = (
     outerFunction : 함수 () (
         console.log (즉, '외부'이); / /) 외부 개체 (지문
         var에이 자기 =;
         var에 innerFunction = 함수 () (
             console.log은 ( '내부', 자체); / /) 내부 개체 (지문
         );
         innerFunction ();
     )
 );
 someObject.outerFunction (); 

마지막으로, 이벤트, 경청 자의 범위는 요소의 어느 수신기가 연결되어있는 것을이다 :

  var에 someObject = (
     outerFunction : 함수 () (
         console.log (즉, '외부'이); / /) 외부 개체 (지문
         YAHOO.util.Event.on ( '버튼', '다음', 함수 () (
             console.log은 (내부 ','이); / / id="button"> 지문 내부 <button의
         ));
     )
 );
 someObject.outerFunction (); 

우리가 경청 자의 범위를 조정하지 않으면 그것을 설정할 때

  var에 someObject = (
     outerFunction : 함수 () (
         console.log (즉, '외부'이); / /) 외부 개체 (지문
         YAHOO.util.Event.on ( '버튼', '다음', 함수 () (
             console.log은 (내부 ','이); / /) 내부 개체 (지문
         ), 이건 사실);
     )
 );
 someObject.outerFunction (); 

이것은 또한 유이 구성 요소에 적용됩니다. 그것이 명시적으로 설정하지 않는 한 - 우리가있는 DataTable 세포, TreeView 노드 또는 MenuItem에 대한 Click 이벤트에 듣지 않으면 청취자의 범위는 이벤트를 소유하고있는 유이 구성 요소 인스턴스의 문제들을 해결한다.

애플 리케이션을위한 샌드 박스

코드를 깨끗하게 유지하는 또 다른 좋은 방법은 깨끗한 뼈대로 시작하는 것입니다. 코딩 자바 스크립트 응용 프로그램의 스타일은 시간이 지남에 변경되었습니다. 어플 리케이션을위한 하나 라이브러리 구성 요소에 대해 하나 : 요즘 대부분의 개발자가 서로 다른 두 가지 스타일을 사용합니다. 대부분의 유이이 예제를 사용하는 스타일을, 우리가 반영 이전 YAHOO.namespace 코드 자체에 대한 우리의 네임 스페이스를 만들.

요즘, 응용 프로그램을위한 우리의, 우리는 대부분 실행을 사용 하나의 함수 익명의 범위 내에서 샌드 박스 선언 onDOMReady :

  YAHOO.util.Event.onDOMReady (함수 () (
     var에 통 = YAHOO.util.Dom,
         이벤트 = YAHOO.util.Event,
         랭 = YAHOO.lang;

     var에 yourVariable = initialValue,
         moreOfTheSame은 = otherInitialValue;

     var에 myFunction1 = 함수 (...) (
         함수 / / 본문;
     );
     var에 myFunction2 = 함수 (...) (
         함수 / / 본문;
     );
     ...
 )); 

이 기법은 여러 가지 장점이 있습니다.

1. 우리는 우리가 조작 원하는 것일 수도 HTML의 모든 조각들이 현재 안전하게 사용하는 것을 보장, 시작에서 DOM을 바로의 준비를 확인합니다.
2. 제공하는 기능은 onDOMReady 전혀 낭비하지 않으며 그것은 네임 스페이스를 글로벌 오염되지 않습니다 그것의의 컨테이너 샌드 박스 익명의 그것은 때문이다.
3. 우리는 즉시 별칭 또는 가장 자주 사용하는 개체에 대한 짧은 이름을 포함하는 우리의 변수를 정의 시작합니다. 이것은 자체의 여러 가지 다른 장점을 가지고 있습니다 :
   1. 우리는 어떤 입력을 저장
   2. 반면 그것은 할 수처럼 이름을 압축하는 글로벌 아니, 이름을 짧은 우리의 압축기 할 수있는 압축 유이 YAHOO 과 같은 속성 util 또는 Menu 수도있을 깊은 그들은 어떤 방법 문제. 같은 경우 같은 이름으로 글로벌 정박에 그들이 아르 YAHOO , 전체 분기는 건드릴 수 있습니다. 그러므로 우리가 이미 짧은 이름 Dom , Event 및 Lang 을 줄일 수도 추가되고 , A B 와 C 시간 때 빌드 시에 실행되는 압축기가.
   3. 통역사가 넘는 해결하기 위해 다시 긴 이름이 이상 필요하지 않다. 각각 같은 이름 점에 YAHOO.util.Event.onDOMReady 최대 기호에 시간을 소비 봐 테이블.
   4. 동일한 이름의 변수가 그들에 정의하지 않으면 모든 변수가 함수 내에서 정의된에도 방법이 익명 함수 내부 어디서나 사용할 수 있습니다. 기본적으로, 이것은, 서브 글로벌 환경 내에 정의된 것처럼되어있는 모든 변수가 이름으로 아무데도 바로 사용할 수 있습니다.
   5. 샌드 박스에있는 변수에 우리가 쓸 필요가 없습니다 this 개체도 main 함수 만드는 전통적인 웁에서 탔어요 기법을 사용하는 경우, 어떤주는 우리에게 이러한 두통.

4. 우리는 함수를 정의합니다. 우리가 이것을 할 수 var 이상이 진술했던 것처럼, 난 function 진술, 미묘한 차이가있다는 있지만 관계가 대부분. 내가 사용하는 var 다른 변수로 문을 접근을 강조 표시로 단지 그들은 : 우리는 샌드 박스에 어디에도 액세스할 수 있습니다.

물론 이것은 우리가 함수 내의 내부 함수가 외부 함수에 정의된 모든 변수에 액세스할 수있다는 사실에 함수를 정의할 수 있도록 자바 스크립트의 능력에 의존합니다. 기본적으로, 당신은 정의의 각 함수는 새로운 지역의 환경을 더 이상 함수 내에서 액세스할 수 만듭니다.

Sandboxing는 유이 3 일을의 표준 방법입니다 :

  유이 (). 사용 ( 'Module1의', ..., 기능 (Y) 개의 (
     / / 이것은 샌드 박스입니다
 )); 

라이브러리에 대한 네임 스페이스

sandboxing 기술이 최종 애플 리케이션을위한 훌륭한 있지만, 그것은 도서관에 좋지 않습니다. 무엇 샌드 박스에서 일어나는 샌드 박스, 완전히 외부 세계에 보이지에 그대로 남아 있습니다. 그러나, 당신은 라이브러리 유틸리티 고객님의 구성 요소를 정의할 때, 당신은 다시 그것을 사용하려면, 그래서 그것은 (순전히 글로벌되는 것과 같은 안되는) 세계 액세스할 수 있어야합니다. 아무것도 당신이 아래에 정의 YAHOO.example , - 예 YAHOO.example.myUtility 세계적으로 액세스할 수 - 수 있습니다. 그것의 정의되었습니다 그것이 전체 이름으로 한 번 당신은 그것을 이용할 수 있습니다. myUtility , 글로벌의 회원으로 YAHOO , 글로벌 아니지만 세계적으로 액세스할 수 있습니다.

우리는 도서관을 구축할 때, 우리는 보통 이런식으로 공유를위한 코드와 namespacing위한 샌드 박스를 사용 :

  (함수 () (
     var에 MyClass = 함수 () (
         / / 이것은 생성자 될
     );
     MyClass.prototype = (
         / / 프로퍼티와 메소드
     );
     YAHOO.namespace ( 'MyLibrary');
     YAHOO.MyLibrary.MyClass = MyClass
 })(); 

우리는 즉시 실행 익명 함수 내에서 정의 다하여 샌드 박스를 만드는 (저기 저 괄호 보이지?, 그들은 '이 함수를 정의의 결과를 받아 그것을 실행할'뜻). 여기에서 우리는 DOM을 준비를 기다 리 지마, 도서관은 거의 자리에 그들이 그 모든 것을 확인하는 책임이 있습니다 사용하는 응용 프로그램 이후 않습니다. 샌드 박스 내에서, 우리는 이전 샌드 박스와 같은 장점이 있습니다. 우리는 우리가 정의하는 클래스의 경우에도, 우리가 자주 사용하는 것도 짧은 이름을 정의할 수 있습니다 : 그들 중 누구도 볼 수 밖에있을 것입니다. 그렇다면, 그것은 전세계적으로 접근, 우리는 우리 자신의 네임 스페이스를 생성하고 거기에 우리가 최근에 만든 클래스를 곳으로 만들 수 있습니다.

유이 로거

자, 우리가 아무 JSLint 오류 또는 경고와 함께, 우리의 코드가 좋은 깨끗한 가지고 말하지만 우린 아직 디버그 문제가있다. 유이 뭐가 잘못 알려준에 도움이 될 수 있습니다. 생산 코드, 우리는 일반적으로하지만, 유이 구성 요소의 minified 버전을로드이 다른 버전도 있습니다. - debug.js 버전은 문제를 우리가 발견됩니다 도울 수 1. 예를 들어, 우리는 방법을 컬렉션 수도 수를 사용하여 돔 setStyle 로, 텍스트의 블록 색상의 변경 말할 수 있습니다. 변화가 발생하지 않으며 우리가 뭐가 잘못 찾을 수 없습니다. 파일 돔 - debug.js가있다 삭제된에 있고, 라인을 도움이 -min 버전 :

  YAHOO.log ( '요소'+ 엘 +, '오류', '돔', '가 정의되어 있지 않기'); 

이것은 때 실행되는 setStyle 와 스타일이 요소를 찾으려고 그것을 발견하지 않습니다. 오류 메시지는 아마도 틀린 요소 ID 또는 동일한 코드를 쳐다보고의 긴 일 후에 받아 열심히 일부와 같은 오류 메시지가 표시됩니다.

그것은 실행 로거를 가지러 쉬운까지하고, 당신이해야 할 파일을 포함 자사 :

  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/logger/assets/skins/sam/logger.css">
 <script의 src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js">의 </ 스크립트>
 <script의 src="http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js">의 </ 스크립트>
 <script의 src="http://yui.yahooapis.com/2.8.1/build/logger/logger-min.js">의 </ 스크립트> 

기본 yahoo-dom-event 집계가 진행되는 중에 창문을 로거의 가장 가능성이 이미 이동하는 것이 편리할 때가 많다 앤 드롭 옵션 의존성 드래그하는 동안. 그런 다음 추가 :

  var에 myLogReader = 새로운 YAHOO.widget.LogReader (); 

그렇다면, 그것은의 로딩 문제가있어 -debug 표시 버전의 구성 요소들이 생성됩니다 파일을 메시지에 모두. 정보의 양이 너무 압도적 수 있고, 모든로드하지 않는 것이 현명하다 -debug 버전을 한번에. 로거는 또한 정보를 그 표시 필터링할 수 있습니다 당신은 경고 실패에 집중 메시지의 정보 범주를 선택 취소합니다. 필터는 기록이 뭔지 영향을주지 않습니다에만 표시됩니다 뭔지; LogReader 또는 그들을 표시 여부를 로거에 관계없이, 모든 메시지를 기록합니다. 응용 프로그램 및 즉시 로거 구성 요소 파일은, 그것이 표시 여부 중요하지 않습니다로드로 시작합니다 로깅마다 하나의 메시지 대기열이 있습니다.

로거 컨트롤 디버깅 유이의 또 다른 전력 사용자 전략 활용하는 로거의 능력을 활용하는 브라우저의 (지원되는 브라우저에서) 콘솔 :

  YAHOO.widget.Logger.enableBrowserConsole (); 

이 코드 행을 사용하면 모든 로거 메시지가 어떤 경우에 개발 작업 흐름의 자연스러운 일부 콘솔 브라우저에 파이프 수 있습니다.

건에 대한 로거 지루한만을 위해 콤보 및 minified, 집계로 변경 구성 요소에서 파일을 기억합니다 -debug 버전. 이 있음, 항상 그렇듯이, 종속성 Configurator는 ; 클릭 큰 도움이됩니다 -debug 왼쪽 상단 버튼과 파일의 정확한 목록을 생성합니다.

그리고, 나는 그것을 언급 했으므로 :

당신의 종속성을 확인하십시오

당신이 밀접하게 넌 뭘하고 수정할 그것을 원하지 유사한 예제를 선택 유이와 함께 시작하는 것이 좋습니다. 당신은 더 많은 기능을 추가으로서, 귀하는 비트 및 기타 예제에서 조각을하고 개발하는 응용 프로그램에 통합할. 문제점 중 하나는 자주 소스가 의존성입니다. 많은 사람들이 다시 그 중 일부를 계속해서 중복, 그들의 애플 리케이션에 각각의 종속 파일과 모든 예제를 붙여 넣습니다. 누락, 중복되거나 아웃 순서 종속성 예기치 않은 오류를 생산하고 있습니다. 그밖에 치명 될 가장 확실히되기 전에 아니라 야후의 글로벌 개체를로드하는 데. 어쨌든로드 뭔가가 두번 확실히 그것은 당신의 페이지가로드하는 데 걸리는 시간을 증가됩니다.

마지막으로, 당신은 유이 라이브러리를로드하는 데 자신의 서버를 사용하는 경우, 당신이 도서관에서 잘못의 복사본에 대한 기본 경로를 할 수도 있습니다. 당신은 Firebug를 가지고있다면, 인터넷 탭으로 이동하여 빨간색에 라인이있다는 것을 확인하십시오. 자들은 요청한 리소스를 찾을 수 없다는 뜻입니다.

디버깅

Firebug를 추가 기능 Firefox 용 주변 여전히 최고의 디버거이다, 게다가 그것은 무료입니다. 디버거가 "모든 오류에 대한 기회를"활성화 기본적으로 옵션은 Firebug를 그것이 오류를 발견 지점에서 중지됩니다하고 오류 메시지와 소스 코드를 보여 의미에 있습니다. JSLint은 한번에 모두 신호를 수있는 반면 Firebug를 단지 각 실행에 대한 하나의 오류를 신호 수 있습니다 특히 있기 때문에 - 이러한 오류 중 일부는 JSLint 진단했을 같은되므로 JSLint 아직 시작하는 첫 번째 장소입니다. 몇 가지 오류는 런타임에 표시되므로 디버거가 유일한 선택입니다. 언제든지 휴식 얻을 그러한, 일이 확인 먼저이다 this , 단어의 trickiest 일종의 글자 4.

샌드 박스를 사용하면, 디버거는 보통 지역 변수와 인수를 표시합니다,하지만 그들은 일반적으로 샌드 박스에 선언과 내부 함수 내부에서 사용되는 것과 같은 포함된 함수의 변수를 표시하는 기능을 제공하지 않습니다. 디버거는 당신이 명시적으로 이름으로 그들에게 묻는다면 자신의 가치를 보여줄 수있을 것이다, 그러나 그것은 자동으로 표시되지 않습니다. 다른 방법은 그들을 전세계적으로 이용할 수 있도록하는 것입니다. 예를 들어, 이후 YAHOO.example 거기 그것을 단순히 특정 구성 요소에서 수 있습니다 항상 복사본을 주시는 계속 원한다면 페이지)입니다 항상이 가능한 유이하면 (:

  var에 myTree = 새로운 YAHOO.widget.TreeView ( '나무 컨테이너');
 YAHOO.example.myTree은 = myTree; 

TreeView의 이후 인스턴스를 디버깅하는 동안에 눈을 마지막으로 계속 우리가 할 수 있도록 할당을 디버깅하는 동안 추가 기능 우리는 myTree 다른 것이 보이지 정상적으로되지 내에 샌드 박스.

밑줄로 시작하는 멤버를 사용하지 마십시오

많은 사람들이 변수 또는 속성 그들이 필요로하는 정보를 들고의 이름을 찾기 위해 디버거를 사용합니다. 때로는 그 정보는 것, 밑줄 함께 시작하는 속성에 저장 _nodes . 관례상, 그 사용이 아닌 일반 속성, 민간. JavaScript는 개인 또는 보호 회원 없음 진정한 개념을 적용되므로 선도 밑줄 그 재산이 개인 유지하는 클래스 개발자의 의도를 신호하는 종래의 방법입니다. 이러한 속성은 (결국, 당신은 디버거에서 그들을 거기 볼 수 있습니다) 유혹을 제시할 수 있습니다 왜 당신의 프로그램들을 사용하는 것이 현명하지 않습니다 좋은 몇 가지 이유가 있습니다.

첫째, 오직 공공 인터페이스가 지원됩니다. 당신은 밑줄로 시작하는 속성을 사용해야되지 않고 있으므로, 클래스 개발자는 언제든지 변경은 무료입니다. 개발자가 값을 같은이 메커니즘을 액세스 공개 좀 있어야합니다, 예를 들어, _nodes 사유 재산이있을 getNodes() 메서드 또는 nodes 구성 속성을. 중 이들의 동일한 값을 공용 인터페이스 것입니다. 선두와 속성을 사용하지 않는 두 번째 이유는 그들의 접근을 완전히 무시할 것이 사유 재산에 액세스하는 보조 효과를 생성해야 할 수도 있습니다 밑줄. 구성 요소는 다음 일관성, 깨지기 쉬운 상태로 남아있을 것입니다.

그렇다면 당신은 가치 찾기 위해 디버거를 사용하고 당신이 그것을 사용하지 않는 선도적인 밑줄로 시작하는 속성에서 찾을 수 있습니다. 오피스 API에 가서 대신하고 일부 방법 색인에 봐 getXxxx() 지수와 유사한 방법으로 이름이 속성 또는 구성. 피하 전용 변수를 사용합니다.

스택 성분

유이 라이브러리는 강력하고 신뢰할 수있다. 유이 라이브러리 내에 디버거 나면, 그것이 당신의 코드에 의해 유도된 오류로 인해 것을 더 가능성이 높습니다 유이 그 자체에 어떤 오류가 있습니다. 자바 스크립트는 항상 최상의 가능한 오류와 대처, 수고하도록 설계되었습니다. 유이 라이브러리는 마찬가지 않습니다. -debug 버전은 수표가 추가됩니다 메시지를 진단합니다 방출하지만, 그들은 버전입니다 minified의 모든 막았죠보세요. 당신이 유이 파일에 오류가 표시되면 그것이 있지만, 순수한 고집 밖으로 거기 그렇게있어 오류를 찾으려고하지 않는 것입니다. 디버거가 자바 스크립트 인터프리터가 더 이상 계속 지속될 수 있기 때문에 이것은 오류의 원인을 발견했기 때문에 그렇지 멈추면.

당신과 같은 메시지가 나타나면 minified 파일 나누기, 도움이 안돼 ...

  F는 돔 - min.js의 7 호선에서 개체되지 않습니다 

... 그것은 그것에 대해 포럼에 물어 무의미한 것입니다. 우선, F 파일이 원래 압축에 변수 이름을 설명하는 유이, 압축기 교체 이상입니다 별칭으로 생성된, 둘째의 구성 요소 파일이 라인의 처음 몇 존중 아르 항상 압축기는 유이 일반적으로 촬영하여 저작권 정보 . 및 공간 새로운 라인 문자를 흰색으로 그것 않습니다 다른 모든 이후 삭제도 유이 압축기, 실행 코드에있는 모든 dom-min.js 중 많은 줄 번호되지 않습니다 말을 그렇게 라인 7, 8-9과입니다 .

그래서 Firebug를의 스크립트 탭에서의 오른쪽 서브 패널에서 스택 추적 탭 (또는 어디든지 당신이 당신의 디버거에서 스택 추적을 찾을 수 있습니다) 때 유용하다. 당신은 거기 있었는지 그것은 당신을 알려줍니다. 여기에서 Firebug를 화면 캡처는 :

패널, 오른쪽의 항목 위에 createEvent() 곳이 하나는 아래에 현재의 문장이며,있는 함수의 이름 createEvent() 호출되었다; 한 다음 그 이전 하나를 함수 호출; 등등. 대부분의 디버거는 그 흔적도 포인트 중 하나를 선택할 것이다 당신은 당신이 어디로 갔는지를 참조하십시오. 불을 지르고 또한 추적 포인트의 각에서 변수의 값을 확인하실 수 있습니다. 우리가 가리키는 볼 수있는 노란 화살표를 subpanel 왼쪽 createEvent() . 하지만, 문제를 일으키는 코드를 위해 우리는 지적있어 항상하므로 그것은 행운이 시간이 포함된 라인 코드 라인 내의 아무 곳이나 수도있을, 다행히도, createEvent() 라인의 시작 부분에있을 일이 있습니다. 인수를 참조 변수와? B , G , L ... 직장 에선 압축기 유이되었습니다,이은 수있는가의 이름은 무엇 추측 원본. 그러나 유의 YAHOO 와 훼손되지 않은있는 저작권 고지가 보존되어 있습니다.

그들은 유이 라이브러리 내에서 함수 내에서 함수 수도로서 당신은, 스택 추적에있는 이름 중 많은 것들을 인식하지 못할 수도 있습니다. 결국, 당신은 당신이 인식하고 함수 이름을 볼 수 있습니다. 그림에서 본, 내가 아는 showAlbums 위한 생성자를 호출하는, REDT ) 클래스 내 코드 (어느입니다 썼다. 난 아무것도 다른 사람에 대한 단서가 없어. 그것이 내가 찾고있는 가서 어디로 ... 내가 알고있는 것들에있어.

당신이 확실하지 않은 경우, 당신은 전체 목록을 이동할 수 있습니다. 당신은 코드를 압축 보면, 단순히 그것을 무시하거나 유이 원본 파일의 비 minified 버전으로 전환 (가정하면 당신은 자신의 아직 압축하지 않은). 하지만 당신은 자신의 코드에 속하는 것으로 인식 그 이름에 주로 초점을 맞춥니다. Firebug를 사용하는가 참고 (?)() 이름을 위해 할 수있는 그것은 흔적. 일반적으로 샌드 박스에 코드가 모래 상자 이후 방법은 익명 함수에 포함된 것을 신호 것입니다. 에 그러한 시점에서 당신의 당신은 인자로 제공되는 변수의 값을 확인, 추적, 그들 중 일부는 당신이 무슨 생각되지 않을 수도 있습니다. API는 그것이 유효한 인자 값이 있는지 확인하기 위해 워드 프로세서에 대한 그들을 확인하십시오.

당신이 볼 수있는 인자와 변수 값은 코드 유이 구성 요소를 호출하기 전에 중단점 권리를 게재할 수 있습니다 적어도 불확실하는 경우. 그런 다음 당신은 그 곤경에있어 방식을 볼 수있을거야.

스택 추적은 종종 개발자들이 있지만 힘을 시도로까지 깊은 구멍을 파고들 자체를 유지하는 JavaScript의 경향과 무시, 그것은 주위를 둘러 봐 땅위로 올라 가실 수있을 것이 좋다. 모든 디버깅 기법과 마찬가지로, 그것은 항상 작동하지 않을 수도 있습니다,하지만 그것도 알고 있어요 반갑습니다. 어디까지, 당신은 절망이 뭔지 당신이 이것을 읽을 수있다면, 솔직해 집시다.

비동기 호출

Web2.0 애플 리케이션을 특징 상호 작용의 많은 비동기 이벤트를 처리하는 능력에 기초합니다. 새 페이지를 기다리고 관련된 모든 상호 작용은 서버에서 전달하는 웹 응용 프로그램의 원래 스타일과는 대조적으로, 현대적인 대화형 응용 프로그램을 여러 가지를 설정 참여하고 몇 가지 이벤트 중 하나가 일어날 수 있도록 듣고 ... 그리고 응답 그 이벤트. 우리는 클릭이나 키 입력 및 또는 다른 프로그래밍 이벤트 리스너를 설정, 이들은 보통 직관적입니다. 비동기 호출과 콜백 그러나, 종종 이해하기 어렵게됩니다.

구현에 대한 포럼에서 보는 나는 오류가 가장 일반의 매니저 연결과 같은 호출하면 비동기 코드 권리입니다 장소 asyncRequest() 또는 데이터 원본의 sendRequest() 가 완성된 작업 방법, 가정 할 때 실행될 그러한 것입 코드는. 그런 함수를 호출하면, 당신은 단지 전체에 그것을 실행하지 않으면 작업을 못쓰게하고 있습니다. 아니 데이터는 비동기 메서드에 대한 호출 후 사용할 수 있습니다. 그러한 데이터에 대한 요청이 지금까지 생산 하셨을 게다. 서버가 그것을 받아야하고 그것을 처리하고 회신 앞으로이 아직도있다 (이것은 절대 오면). 그래서 이러한 비동기 작업에 대해 우리가 콜백 함수를 사용하는 이유입니다.

사용자가 클릭하면, 리스너가 호출당한 콜백은 우리가 양식에 버튼을 클릭과 같은 이벤트에 대한 리스너로 지정 함수와 같습니다. 비동기 이벤트에 콜백 정말 이런이며 우리는 우리가하고, 서버에 요청 메시지를 보내 우리가이 형태로 다시 제출 가득한 기다릴로 기입하는 사용자에 대해 양식을 보내주 마찬가지로 우리의 프로그램은, 우리가 우리에게 돌아올 서버에서 보낸 답장을 기다립니다. 우리는 이벤트 리스너를 호출하는 사용자 동작 무엇을위한 비동기 이벤트 우리는 콜백 함수를 호출 설정 이유라고, 우리는 사용자가 양식이나 회신을 보내 서버를 제출하면 알 수 없습니다. 이것은 서버 응답 빠른 순간면되지할지는 모르지만, 그것은 CPU 시간에 나이를 의미합니다.

비동기 호출을 디버깅

가끔은 코드를 통해 단일 단계에 있지만 아무 대안이 없습니다. 의 매니저 연결 만나 같은 비동기 호출하려면 조심 때 asyncRequest() 메서드, 데이터 원본의 sendRequest() 또는 돔이 window.setTimeout() . 이것은 서버에 대한 데이터에 대한 비동기 요청을 시작하거나 지연 어떤 작업을 특정 시간과 그들의 콜백 데이터 또는 수신되었을 때 시간이 지난 전화 받으세요. 고려해야 할 두 가지 문제가 있습니다; 먼저 디버거가 자동으로 콜백으로 단계를하지 않습니다. 당신은 응답 따라잡기하려는 경우, 당신은 콜백 함수 내부에 중단점을 세우면 돼. 많은 사람들이 비동기 메서드를 호출하는 시점에 도달하고 단일 비동기 작업이 완료되면 콜백 내에 재개 스테핑 기대합니다. 이 일은 없을 것이다; 실행의 스레드가 콜백에 자동으로 유동되지 않고 디버거가 한 알아 내는데 것으로 예상 수 없습니다.

당신은 비동기 호출 라인에 도달 둘째, 그리고 콜백에 중단점을 넣은 다음 응용 프로그램을 실행하자. 보통이 뭐든간에 비동기 호출이 정말 중요하지 않습니다 후에가는; 회신이 도착할 때까지해야할 많은 것들이 아니므로 사실, 비동기 호출, 함수의 끝에 정상적으로됩니다. 디버거가 응답하거나 도착하면 통역사 냉동 및 수없는 그것을 처리하는 것이었다 이후 시간이 만료된, 세월이 그리워되며, 보류 자바 스크립트 인터프리터를 유지하기 때문에, 비동기 호출 통해 단일 단계를하지 마십시오. 그래서, 당신은 비동기 호출에 도착하면, 오버 단계를 클릭 였다면, 당신은 콜백에 중단점을 가지고있는 자바 스크립트 인터프리터가 작동하고 응답을 처리할 수있는 그럼 실행을 누릅니다 있는지 확인하십시오.

에 같이 콜백 이벤트와 같은 반복적인 경우 window.setInterval() 또는 다른 시간에 중요한 작업, 그것은 더 그들에 중단점을 넣으려면 없습니다. 당신이 보류 있지만, 많은 이벤트가 그리울 것이다. 그것은 더 일반적으로 사용됩니다 console.log 몇 가지 중요한 가치관을하거나 신호를 단순히 유이에 로거를 이벤트가 일어나는하고 표시합니다. 사용하지 마십시오 window.alert() 놓친 대해됩니다 돌봐 줘서는 이벤트와 같은 이유로 브라우저;에 잠깐 기다려 넣습니다.

결론

우리의 프로그램에서 어떤 일이 일어나고있는 밖으로 찾을 수 있도록 다양한 도구가 있습니다. 손에 적절한 도구로, 우리는 그것이 포럼에 질문을 작성하는 우리에게 필요한 것들이보다 적은 시간에 오류를 찾을 수 있습니다. 첫 번째 단계는, 그러나, 좋은 신뢰할 수있는 코드를 작성하고 JSLint 귀하의 개발 과정의 중요한 부분 만들 수 있습니다.

: 찾기 대화 bloglines | 테크노을

공유하고 확장할 수 : 즐겨찾기에 추가 del.icio.us으로 | 그것 Digg에! | reddit!