먼저, 그 뒤에있는 기술의 작동 방식을 알아야합니다.

작동 방식에 대한 지식, 네트워킹 문제에 부딪 치거나 수많은 시간을 보았 듯이 사람들이 실제로 서버 측과 클라이언트 측이 무엇인지 이해하는 데 완전히 실패했기 때문에 이것을 알아야합니다. 내가 볼 수있는 가장 일반적인 최신 질문 중 하나는 “JS를 ASP 코드에서 변수로 변경하는 방법은 무엇입니까?”입니다.

• 이더넷 / 와이파이 및 TCP / IP를 이해하여 무슨 일이 일어나고 있는지 알 수 있습니까?
• 실제로 얼마나 많은 HTTP를 알고 있습니까?
• 실제로 HTML을 얻습니까? 물론, 태그가 작동하고 중첩되는 방법을 알 수 있지만 실제로 doctype 및 quirks 모드를 이해합니까? 목록 요소 주위에 단락 태그를 넣지 않아야한다는 것을 알고 있습니까?
• JavaScript를 발명하고 서버 측에서 실행할 수 있다고 설명하십시오. ecmascript, livescript, mocascript, jsscript, 노드 …
• Window API를 배우고 DOM API를 배우고 XHR API를 배우십시오. 이 세 가지를 모르면 브라우저 용 비즈니스 작성 코드가 없습니다.

코드가 자신보다 크거나 특정 상황을 이해하십시오.

• 물론, 당신은 무언가를 썼지 만 모두가 그것을 볼 수 있습니다. 그것은 모두 “오픈”소스입니다. 물론, 당신은 코드를 보길 원한다면, 난처하게, 그것을 최소화 할 수 있습니다.
• 여러 브라우저의 차이점을 이해해야합니다. 가장 인기있는 광고 또는 시장 인구 통계를 타겟팅하십시오. 예를 들어, ie6은 테이블에 대해 특별히 DOM API 메소드가 아닌 Child를 추가하면 DOM 테이블 셀 요소를 렌더링하지 않습니다. 더 많은 예가 존재하므로 배우셔야합니다.
• 특정 브라우저가 아닌 브라우저에서 이러한 모든 문제에 대한 코드를 작성하는 방법을 이해해야합니다. 한 브라우저에서 잘 작동하는 것이 다른 브라우저에서는 느리게 학습됩니다. 브라우저의 작동 방식과 이유가 무엇인지 파악해야합니다.
• 오딘의 수염을 사랑하기 위해 코드에 대한 사이트 간 스크립팅 공격을 허용하는 코드를 작성하지 마십시오. 셀에 아약스 호출을하고와 같은 작업을 수행 cell.innerHTML = "<script>alert("xss")</script>"하고 경고 상자가 표시되면 잘못한 것입니다.
• 나쁜 조언을주는 DynamicDrive, w3Schools 및 웹 사이트에서 피의 지옥을 멀리하십시오. 좋은 조언을 제공하는 커뮤니티를 찾아야합니다. Stack Overflow에는 JavaScript와 Node.JS 대화방이 있으며 w3와 같은 사이트는 오래된 데이터를 유지하고 결코 신경 쓰지 않는 “더 나은”기능의 한계를 뛰어 넘기 위해 최선을 다합니다. W3C 와 같은 공식 사양 사이트 , MDN (Mozilla Developer Network)을 고수해야합니다 . 코드의 동료 검토를 요청하십시오. 코드에 문제가있는 것 같은 느낌이들 때, 코드로 잘라 내기 / 붙여 넣기 + 비틀기를 많이 할 때는 즉시 대화방에 와서 더 나은 코드 작성에 대한 지침을 요청해야합니다.
• 안내를 받으러 왔거나 정말 멋진 것을 공유하고 싶을 때 … 제발, 제발 부탁드립니다. 문서화했는지 확인하고 변수 이름이 의미가 있는지 확인하고 모두 한 줄로되어 있지 않은지 확인하십시오. 깨끗한 코드를 작성해야합니다. 당신은 쓰레기 더미가있는 경우뿐만 아니라 당신이, 당신이 할 수 있도록하는 방법을 알고, 아무도 실패하지가 원하는 에있다. 도와 드리겠습니다.
• 모든 사람들이 JavaScript를 지원하는 것은 아니라는 점을 명심하십시오. 그 이유는 다음과 같습니다. 1) 모든 사람을위한 더 빠른 인터넷 2) 웹은 콘솔 기반 브라우저 사용자, 스크립트없이 실행하는 사람들, 휴대 전화에서보다 쉽게 ​​액세스 할 수 있습니다. 내가 말하려는 것은 누군가가 JavaScript를 가지고 있지 않으면 최소한 <noscript>태그를 사용 하여 사이트에 알리도록하는 것입니다.
• JavaScript의 프로토 타입 특성으로 인해 언어가 실제로 작동하는 방식을 변경할 수 있습니다. JavaScript가 발전하고 있음을 알 수 있습니다. JS의 이전 버전 인 “ECMA Script 3″을 “ECMA Script 5″(일명 es5)로 끌어 내고 있습니다. 프로토 타입으로 인해 현장에서 es3 언어를 수정하여 es5처럼 작동 할 수 있습니다. 즉, 10 살짜리 브라우저는 작년에 나온 언어 기능을 갖습니다. 가능한 한 es5 심을 사용하면 정말 시원하므로 조사해야합니다.
• 서구 영어를 사용하는 백인 아이들은 인터넷을 사용하지 않습니다. 그에 따라 코드를 작성하십시오. 즉, 국제화를 이해하고 더 높은 수요를 처리하는 코드를 작성해야합니다. 10 년 전 온라인에 5 억 명 미만의 사람들이 있었는데, 현재 약 20 억 명, 10 년이 더 되었습니까? 아마도 지구상의 모든 사람과 가까운 곳에서 인터넷에 접속할 수 있습니다. 즉, 정규 표현식에 맞지 /[a-z ']/i않지만 힌디어, 아랍어, 악센트 (근시안 개발자의 기존 문제임)를 포함 하는 이름을 지원해야합니다. , 다른 사람. 문자 집합, 유니 코드 및 UTF-8 이해

당신은 파스타 공장이 아닌 프로그래머입니다. 스파게티 쓰기를 중지하십시오.

• 의미있는 것들을 따라 변수의 이름을 지정하십시오.
• 코드를 문서화하십시오. rhino가 제공하는 JSDoc을 사용하거나 낙서가 많은지 상관하지 않습니다. 코드를 사용하려는 사람을 돕는 설명서를 작성하십시오. 코드를 개선하거나 유지하려는 사람을위한 설명서를 작성하십시오. 유용한 의견을 포함하십시오. "This fizzes the bizz"절반 영어 반 프랑스어 와 같은 의견 은 도움이되지 않습니다. 기능이 무엇을하는지 설명하십시오. 복잡한 코드 섹션을 설명하십시오.
• 코드 반복을 제한하는 방법을 알아 봅니다. 모듈 식 디자인 또는 기능적 패턴을 찾으십시오. 당신이 추상화 할 수있는 것을보십시오. 동일한 작업을 수행하기 위해 큰 코드 세그먼트를 잘라 내고 붙여넣고 뒤쳐서는 안됩니다.
• DOM API를 이해해야합니다. DOM과 윈도우 객체는 많은 훌륭한 것들을 제공합니다. 이것은 많은 일처럼 들리지만 그것은 큰 무서운 약어이기 때문입니다. 많은 자바 스크립트 닌자가와 같은 코드를 작성하는 것을 좋아합니다 <a href="javascript:alert("foo")">. FFS는하지 마십시오. 전체 문서가로드 될 때까지 기다렸다가 JavaScript 코드를 html 문서와 분리하십시오. 이것은 기본적인 OOP 사례 101이며 JS 또는 CSS를 HTML 문서에 인라인하지 마십시오. 올바르게 수행하는 방법을 알아 내거나 수행 방법을 아는 사람을 찾으십시오. 다시 질문하십시오.
• 는 Javascript:foo("buz")psudeo 프로토콜이며 완전히 지원되지 않으며 인라인 자바 스크립트를 사용하지 않으면 처음에는 사용하지 않을 것입니다. 나는 당신을 내 마음의 바닥에서 약속합니다.이 지구상에서 또는 당신이 당신의 자바 스크립트를 HTML 요소 안에 넣을 필요가있는 우주의 어느 곳에서도 이유가 없습니다. 이제까지. 그러지 마 나는 더 이상 그렇게하는 사람들을 돕지 않을 것 입니다. 그것은 나쁩니다.

항상 깨지지 않는 방식으로 코드를 작성하는 방법을 알아보십시오.

• 전역 변수는 가장 큰 문제 중 하나입니다. JavaScript의 함수형 프로그래밍이 어떻게 작동하는지 알아보십시오. 게양이 무엇인지 파악하십시오. 전역 변수를 피하는 방법을 찾으십시오.
• 정적 코드 분석 도구를 사용하십시오. 이것들은 코드를 작성할 때 만든 작은 “oops”에 대해 즉시 알려줍니다. 어딘가에 세미콜론을 잊었습니까? 아, 그렇습니다. 어딘가에 글로벌이 있습니까? 아, 그렇습니다. 실행할 때 많은 수수께끼 오류가 발생할 수있는 코드? 오! 저기 그들이있어! 더 이상 구문 오류가 아닌 무언가를 알아 내려고 몇 시간 동안 코드 더미를 쳐다 보지 않아도됩니다. (글쎄, 거의, 당신은 잡을 수없는 일을했을 수도 있지만 일반적으로 굉장합니다).
• 단위 테스트. 그럴 이유가 없습니다. 수많은 단위 테스트 도구가 있습니다. 기본적으로 단위 테스트는 “내 기능이 있습니다”및 “Y를 출력하고 싶습니다” “여기에는 테스트 입력이 있습니다”그리고 테스트는 “모두 작동합니까?”입니다. 인기있는 QUnit과 같은 많은 JS 테스트 프레임 워크가 있습니다. 좋아하는 검색 엔진을 둘러보고 멋진 것을 간질이는 것을보십시오. 그러나 그것들을 사용하십시오.
• 버전 제어라고도하는 소스 제어 관리. 힘내는 인기가 있고 합당한 이유가 있습니다. SVN과 다른 것들도 마찬가지입니다. 당신이 필요로 바로이 순간을하고 중지하는 것은 생산 코드를 편집 할 수 있습니다. 파일 이름 변경을 중지해야합니다. 파일 main_backup_20110911.js.bak.1이 손실되고 디렉토리가 지저분 해지고 이전 시점으로 쉽게 “되감기”할 수 없습니다. 무슨 일이 일어나고 있는지 알 수 없으며 코드 패치를 만들 수 없습니다. GIT 학습을 시작하면 한 시간이 걸리며 다시는 돌아 오지 않을 것입니다.
• 동료 검토. 당신은 아니에요하지 그 좋은, 저도 제가 할 수있는만큼 의견을 요청하여 더 얻을입니다. 그렇게해야합니다.

사람들이 좋아하는 JavaScript 작성

• 왜 코드가 느린 지 파악하십시오. jspref 를 사용하고 테스트를 작성 하십시오 .
• 하나의 DOM 요소에 이벤트 바인딩을 중지하면 속도가 느리고 심각한 이벤트 버블 링 문제가 발생하여 많은 시간을 낭비하게됩니다. JavaScript에서 “이벤트 위임”을 연구하십시오.
• innerHTML을 사용하여 DOM을 편집하지 마십시오. 이것은 HTML이 무엇인지 배우고 DOM이 무엇인지 배우는 것으로 되돌아갑니다. HTML은 브라우저 렌더링 엔진이 문서 객체가되는 많은 프로그래밍 객체를 만드는 데 사용하는 서버에서 전송 된 데이터입니다. innerHTML을 사용하면 브라우저가 모든 것을 다시 렌더링하도록 요청합니다. 고맙게도 10 년 전과 마찬가지로 DOM API를 만들었으며 전체 내용을 업데이트하지 않고도 “자식 추가”또는 “텍스트 노드 만들기”를 수행 할 수 있습니다. innHTML은 Microsoft가 발명 한 수치입니다. 사용하는 경우 IE6가 쓰레기통을 영원히 돕고 있기 때문에 끔찍한 IE6에 대한 모든 권한을 잃게됩니다. DOM을 배우십시오.
• 가능한 모든 곳에서 작동해야합니다. 지원되지 않는 항목이 있으면 성능이 저하되어 경험이 빨라지지 않습니다. 사용자를 얼굴로 때리고 충돌 할 수는 없습니다.
• 저작권과 라이센스가 중요합니다. 다른 사람의 노력을 찢어 버리지 마십시오. 누군가가 “재판매 금지”라고 말하면 판매 할 수 없습니다. 멍청하게 굴지 마십시오. 열심히 일하는 사람들을 찢어 버리는 코드가 싫습니다.
• JS는 클래스가 아닌 프로토 타입입니다. 그만해. 프로토 타입의 작동 방식을 이해하지 못하면 반드시해야합니다. 구글 그것. JavaScript는 클래스 기반이 아니므로 클래스를 만들려고하지 마십시오. 사람들은 프로토 타입 언어로 클래식 코드를 작성하려고 시도하고 “언어가 빠지는 이유”의 사례로 루비가 프로토 타입을 지원할 수없는 것과 같은 경우를 만들 수 있습니다. 새로운 것을 배우고 잘못하지 마십시오.

항상 기본에 집중하십시오.

• 당신은 틀렸고, 그것은 지금 당신이 무언가를 알고 있기 때문에 굉장합니다. 잘못을 인정하지 않고 자신의 배신자 록 스타 슈퍼 히어로 닌자처럼 나쁜 코드를 문 밖으로 내리는 사람보다 더 나쁜 것은 없습니다. 그들은 단지 바보입니다. 틀렸다는 것을 인정하고 틀렸다는 것을 인정하고 도움을 요청하십시오.
• 항상 jQuery가 필요하지는 않습니다. jQuery는 많은 느린 코드를 생성하고 JS를 모르는 사람들이 JS를 작성하도록 도와줍니다. JS가 JS를 작성하기 위해 JS를 알 필요가 없기 때문에 이것은 추가 문제입니다. 그림을 이동. 이벤트 학습, DOM 학습, innerHTML에 대한 학습과 같이 위에서 언급 한 몇 가지 사항을 이해하면 jQuery가 코드에 해로운 이유를 알게됩니다. 많은 곳에서 올바르게 사용할 수 있지만 더 작은 라이브러리를 사용하거나 브라우저와 함께 제공되는 표준 JavaScript를 숨겨서 무언가를 달성 할 수도 있습니다. jQuery가 필요하지 않으므로 아무것도 배우지 않아도되는 멋진 코드를 작성하는 것이 더 쉬워 지지만 더 잘 배우고 더 많이 배우기 시작해야합니다. 어쨌든 jQuery에서 더 나은 코드를 작성하십시오.다른 JavaScript 라이브러리를 확인하고 너무 친숙하지 마십시오.
• cut + paste + tweak가 필요 없으며 DRY 코드를 작성하십시오. 나는 이것을 전에 언급했지만 여기에서도 중요합니다. 코드 기반이 불명예 인 경우 양질의 코드를 작성할 수 없습니다.
• 배열 / 객체의 차이를 남용하지 말고 반복하는 법을 배우십시오. 왜 a를 사용 for (;;)하고 왜 for( in )루프 를 사용하는지 배우십시오 . while 루프를 사용하는시기 스위치 케이스 만 사용할 수 있으면 중첩 IF를 중지하십시오. 객체는 순서를 유지하지 않으므로 객체를 배열로 사용하지 마십시오. 오래된 Opera / FF, 오래된 MISE, 때때로 Flash는 객체의 순서를 존중하지 않습니다. 객체의 순서를 유지하려면 객체를 사용하고 객체를 원한다면 객체를 사용하십시오 (요소의 순서가없는 것).
• 코드에 복잡성을 추가하지 않고 의사 결정 구조를 활용하는 방법 IF 중첩을 중단하고 부울 논리 연산자의 작동 방식을 알아 봅니다. 스위치 케이스의 작동 방식을 파악하십시오.
• RTFM. 더 나은 코드를 배우는 가장 좋은 곳은 실제 사양을 읽는 것입니다. 사용하려는 코드 부분에서 RFC 사양을 읽으십시오. ECMAScript 문서를 읽으십시오. W3C DOM 사양을 읽으십시오. W3C XHTML / HTML / HTML5 사양을 읽으십시오. 사양을 읽으면 좋습니다.

빠른 플래시와 다이가 아닌 긴 게임에 집중하십시오.

• 커뮤니티를 돕고 오랫동안있을 코드를 작성해야합니다. 코드와 커뮤니티에 대한 열정을 가지십시오. 어딘가에 나쁜 지식을 남겼다면 지옥으로 돌아가서 고치십시오. 나쁜 정보는 실제로 제거하기 가 어렵고 영원히 붙어 있습니다. 당신의 역할을하십시오. w3schools가 웹을 악화시키는 것을 도와주지 마십시오.
• 아무데도 뛰어 들지 말고 “이봐 요, 어떻게 사용하는지에 대한 좋은 생각이 있습니다 which“라고 말하지 마십시오. 당신은 아무것도 기여하지 않았습니다. aand와 같은 변수를 사용하지 마십시오 chezburger.
• 나쁜 코드와 좋은 코드를 발견하고 자신의 코드에서 찾아서 나쁜 코드를 좋은 코드로 만드는 법을 배우십시오.
• 무언가를 만들고, 배우고, 가르치십시오.
• 당신의 시야를 넓힐. JavaScript를 영원히 쓸 수는 없습니다. 관심있는 다른 것에 안식을 가져 와서 돌아와서 배운 내용을 공유하고 커뮤니티에서 그 자리를 찾을 수 있는지 확인하십시오. 당신이 거기있는 동안 JavaScript가 가진 가치를 다른 세계에 보여주십시오.
• 모든 것을 알더라도 여전히 잘못입니다. 본인의 신분 / 기관이 아닌 정확한 증거를 사용하십시오. 당신은 결코 옳을 수 없지만, 당신의 증거는 항상 정확합니다. 때때로 피하는 것만 큼 열심히 성냥에 들어 가지 마십시오. 증거가 있거나 없습니다. 화염은 아무도 도와주지 않습니다.

관심있는 사람이라면 실제로 글을 쓰지 않은 튜토리얼의 개인 메모에서 대부분을 얻었 습니다 .

답변

alert('This illustrates how JavaScript has first-class functions');
alert('It also illustrates how to use closures.  Try running this code in your browser.');

var funky = function(s) {
    alert("We're getting funky with " + s);
};

var makeFunkyObject = function(funkyFunction) {
    var numberOfTimesAlerted = 0;
    var fn = { };
    fn.alertFunky = function(s) {
        funkyFunction(s);
        numberOfTimesAlerted++;
    }
    fn.getNumberOfTimesAlerted = function() {
        return numberOfTimesAlerted;
    }
    return fn;
}

var funkyObject = makeFunkyObject(funky);

funkyObject.alertFunky('Alice'); // alerts We're getting funky with Alice
funkyObject.alertFunky('Bob'); // alerts We're getting funky with Bob
alert(funkyObject.getNumberOfTimesAlerted()); // alerts 2

alert('Also, be sure to distinguish between learning about JavaScript and learning about the DOM');
alert('The former is awesome; the latter, not so awesome.');