좋은 JavaScript를 작성하기위한 5 가지 이하의 팁? [닫은]


14

JavaScript는 분명히 필수 불가결 한 것이되었습니다. 그러나, 나는 아직도 그것에 익숙하지 않다. 나는 그것이 엉망인 것처럼 보이고 지금 당장 그것을 다루고 싶지 않다는 느낌과 싸우기가 어렵다는 것을 알았다. JavaScript를 사용하는 것보다 다른 언어를 이해하는 데 훨씬 더 도움이됩니다. 왜냐하면이 두려움에 대처할 수 없기 때문입니다. JavaScript를 작성할 때 Weimaraner 강아지의 초상화를 그립니다.

일반적으로 내가하는 각각의 움직임에 대해 스스로에게 물어볼 수있는 몇 가지 가장 중요한 지침을 명심해야합니다. (제 생각에 소수는 5 이하입니다.)

JavaScript를 코딩 할 때 내가 할 때마다 스스로 물어봐야하는 JavaScript 관련 5 가지 (또는 적은) 질문을 나열 할 수 있습니까? 그들은 무엇입니까?

업데이트 : 명확히하기 위해 JavaScript를 배울 때 명심해야 할 다섯 가지를 요구하지 않습니다. 저는 항상 앞으로 나아갈 수 있도록 다섯 가지 질문을하고 있습니다. 모두가 항상 물어봐야합니다. 다음과 같은 고급 질문 : "다른 곳에서이 작업을 반복 할 수 있습니까?" 또는 "이 변수 / 함수 이름은 충분히 구체적이거나 너무 구체적입니다"<==이 예제 질문은 JavaScript에만 국한되지 않습니다. JavaScript에 고유 한 지시문을 찾고 있습니다.


3
말한 질문은 많은 답변을 장려하고 있으며 각 답변은 똑같이 유효합니다. 이런 종류의 질문은 좋은 질문을하지 않습니다. 당신은 모든 것을 다시 말할 수 있습니까? 그렇지 않으면 닫힐 가능성이 높습니다.
ChrisF

2
"Top 5 list"는 Programmers.SE에서 우리가하는 일이 아닙니다. 특정 문제 에 대한 답변에 관심 이 있으시면 언제든지 문의하십시오. 그렇지 않으면, 이와 같은 목록을 생성하기 위해 Reddit의 r / Programming 을 제안 합니다.

답변:


6

두 부분으로 대답하겠습니다. 하나는 " 좋은 JavaScript 작성 하는 법을 배우기위한 5 가지 이하의 팁 "입니다. 다른 하나는 "좋은 JavaScript 작성에 대한 5 개 이하의 팁"입니다.

배우기:

  1. 질문
  2. 들리다
  3. 읽다
  4. 물건 만들기

하기:

  1. 전역을 피하십시오 (모듈화)
  2. 루프 외부에서 어려운 작업 수행 (DOM 선택, 함수 선언 등)
  3. 범위 작동 방법 알아보기
  4. 클로저를 언제 어떻게 사용하는지 배우십시오
  5. 객체 지향 JS 작동 방식 알아보기

편집 (OP를 준수하기 위해 질문 추가) :

어떤 범위를 참조하고 있습니까?

이는 유출 된 전역, 이벤트 핸들러 및 클로저 사용시기에 도움이됩니다.

나 자신을 반복하고 있습니까?

OO 기술의 적절한 추상화 및 사용이 중요합니다. 현명하게 사용하십시오.

내 코드가 반복됩니까?

DOM 액세스를 루프에 넣거나 루프에서 함수 (익명 또는 기타)를 작성하는 것은 매우 쉽습니다. 이가 사용하는 코드의 사실이 될 수 있음을 참고 setTimeout하거나 setInterval뿐만 아니라 기존의 루프.

이것이 내가 생각하는 바를 의미합니까?

Truthy 및 falsy JS의 값 (비 - 엄격한 비교하여 특히 약간 까다로울 수 ==대조적으로 ===). 동적 타이핑, 유형 강제, 객체 또는 리터럴 참조 여부도 관련이 있습니다.


28

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

작동 방식에 대한 지식, 네트워킹 문제에 부딪 치거나 수많은 시간을 보았 듯이 사람들이 실제로 서버 측과 클라이언트 측이 무엇인지 이해하는 데 완전히 실패했기 때문에 이것을 알아야합니다. 내가 볼 수있는 가장 일반적인 최신 질문 중 하나는 "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가 가진 가치를 다른 세계에 보여주십시오.
  • 모든 것을 알더라도 여전히 잘못입니다. 본인의 신분 / 기관이 아닌 정확한 증거를 사용하십시오. 당신은 결코 옳을 수 없지만, 당신의 증거는 항상 정확합니다. 때때로 피하는 것만 큼 열심히 성냥에 들어 가지 마십시오. 증거가 있거나 없습니다. 화염은 아무도 도와주지 않습니다.

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


상단에 대한 귀하의 답변은 HTTP와 HTML을 완전히 혼동했습니다.
Bryan Boettcher

@insta 나는 당신이 HTTP를 이해해야한다고 말하는 것에 아주 의도적입니다. 내가 말했듯이 "내가 볼 수있는 가장 일반적인 최신 질문 중 하나는"JS 코드를 ASP 코드에서 변수로 변경하는 방법은 무엇입니까? "입니다. HTTP 콘텐츠, 쿠키 및 헤더를 전달하는 프로토콜을 이해하지 못합니다. 서버를 클라이언트에게 전달하려고합니다. 레이어에 대해 알아야하므로 이러한 것들에 혼동되지 않도록해야합니다. 기능적으로 표현하기 위해 : TCPIP(HTTP(ClientServerRelationship(), Cookies(), HTML(JavaScript(Knowledge))))
시크릿

1
"실제로 HTTP를 얻습니까? 물론, 태그가 작동하고 중첩되는 방법을 알 수 있지만 실제로는 doctype 및 quirks 모드를 이해합니까? 단락 요소를 목록 요소 주위에 두지 않아야한다는 것을 알고 있습니까?" 이 인용문의 어떤 것도 잘못 사용되지 않은 전송 프로토콜과 관련이 없습니다.
Bryan Boettcher

1
@insta Ah 죄송합니다. 완전히 보지 못했습니다. HTML로 변경했습니다. 감사 :).
시크릿

1
+1 이것은 허용 된 것보다 훨씬 나은 답변입니다.
Tom Squires

7
  1. Douglas Crockford의 Javascript : The Good Parts를 읽으십시오 . 그것은 팁이지만 솔직히 좋은 자바 스크립트를 작성하는 것에 대해 들었던 최고의 조언입니다.

  2. 관련하여 Douglas Crockford의 Javascript 기사를 읽으십시오 .


9
그러나 종교적으로 받아들이지 마십시오. 그것을보고 그것이 당신에게 의미가 있는지 확인하십시오. 목적을 이해하지 못하는 곳에 질문하십시오.
시크릿

3
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.');

+1 : 일단 이것을 익히면 자바 스크립트 닌자가됩니다.
Spoike

2

다음은 JavaScript를 시작하는 데 도움이되는 몇 가지 질문입니다.

  1. JSON은 어떻게 작동하며 어떤 이점이 있습니까?

  2. Javascript에 함수 객체가있는 이유는 무엇입니까?

  3. eval을 사용해서는 안되는 이유는 무엇입니까?

  4. 자바 스크립트로 이벤트를 만들려면 어떻게해야합니까?

  5. 자바 스크립트에서 기능을 감지하려면 어떻게해야하나요?

Javascript에서해야 할 대부분의 작업을 거의 다룹니다.


1
  1. 항상 세미콜론을 사용하십시오. JS의 암시 적 세미콜론은 끔찍한 아이디어입니다. 특히 일반적인 사용법으로 떠 다니는 흥미로운 구문이 있습니다. 일반적으로 JS 축소 기에도 필요합니다.
  2. eval ()을 피하십시오 . 이로 인해 모든 종류의 문제가 발생하며 응용 프로그램 속도를 늦출 수있는 매우 빠른 방법입니다. 대부분의 사용은 실제로 남용입니다. 당신이 사용해야한다고 생각할 때마다 eval()다른 방법으로 이중 및 삼중 검사; 실제로 전체 문자열 가치의 JavaScript를 실행하지 않는 한 거의 항상 더 깨끗하고 쉬운 방법이 있습니다.
  3. (function() {/* stuff */})()코드 세트를 포함하고 이에 대한 로컬 범위를 작성하는 좋은 방법입니다. 객체를 사용하는 것도 종종 더 나은 방법입니다. 이러한 방식으로 사용되는 객체는 다른 언어의 네임 스페이스와 더 유사합니다. 조심하십시오 this. 대부분의 다른 언어와 달리 this직관적으로 생각하는 것을 항상 참조하지는 않습니다. 또한 달리 명시되지 않는 한 모든 JS 변수, 함수 및 기타 객체는 여러 .js파일에 걸쳐서도 전역 적 입니다.
  4. 좋은 JS 라이브러리를 찾아서 배우고 사용하십시오. jQuery 는 가장 인기있는 것 중 하나입니다. 이것들은 기능 감지 및 DOM 조작 추상화 및 다양한 브라우저에서 다른 것들이 구현 된 여러 가지 방법을 포함하여 많은 노력을 기울일 것입니다.
  5. 항상 세미콜론을 사용하십시오. 진심으로. 잊었을 때 경고하는 IDE를 받으십시오. 난 소리를 내고 싶지는 않지만 세미콜론이 부족하기 때문에 버그가 소개되어 브라우저가 경고하지 않는 경우가 몇 번있었습니다.

항상 세미콜론이 필요 하지는 않지만 좋은 연습이라고 동의합니다.
rlemon

1
ASI 규칙은 모든 JS 엔진에서 동일하므로 한 곳의 코드는 다른 곳에서도 동일하게 동작해야합니다. 모든 올바른 장소에서 세미콜론을 보는 것이 좋지만 다른 문제처럼 당신을 죽이지 않을 것입니다. 즉, ASI와 같은 return일을하고 데이터를 포함하는 다음 줄을 조심해야합니다 return ;. 실제로 ASI로 인해 말했을 것 입니다. "항상 세미콜론을 사용하는 것"보다 ASI 및 공백 규칙을 이해하는 것이 더 중요하다고 말하고 싶습니다. 그러나 자신을 구하는 좋은 방법입니다.
시크릿

평가를 피하려면 +1, 세미콜론 편집증에는 -1 자바 스크립트의 세미콜론 삽입에는 특별한 규칙이 있는데,이를 따를 때 매우 논리적입니다. 확인해보세요
Ryan Kinal

@Incognito +1I'd say it's more important to understand ASI and whitespace rules than it is "always use semicolons."
rlemon

세미콜론이 항상 필요한 것은 아니라고 말하는 모든 사람에게; 자바 스크립트에서 실제 크로스 브라우저 개발을 완료하면 다시 방문하십시오 (IE6, 7, 8 참조).
Spoike

0

클래스는 코드를 구성하는 데 매우 강력한 도구라고 생각합니다. 클래스 기반 시스템을 설계하는 방법에는 언어에 구애받지 않는 규칙이 많이 있으며 클래스를 사용할 때 일부 OO 원칙이 실제로 더 명확하게 구현됩니다.
따라서 CoffeeScript를 살펴 보는 것이 좋습니다 .

여기에서 SOLID , DRY , GRASP , KISSYAGNI 구현 방법에 대한 정보를 수집 하고 더 중요하게 충돌하는 것처럼 보이는 상황 에 대한 정보를 수집하는 것이 좋습니다 . 당면한 문제). 스택 교환에서도 찾을 수 있습니다.

이러한 원칙은 JavaScript 개발에 "원시"로 적용되는 것에 유의하십시오. 그러나 많은 내용은 클래스 기반 언어를 사용하여 설명 할 수 있으므로 이해하는 데 너무 많은 오버 헤드가없는 언어로 프로그래밍하는 데 유용 할 수 있습니다.
개인적으로 JavaScript는 매우 강력한 언어라고 생각하지만 실제로는이 사실을 이해하려면 먼저 다른 언어를 깊이 이해해야합니다.


-7

웹 응용 프로그램에서 클라이언트 측 UI 개발을 위해 JavaScript를 사용한다고 가정합니다.

1) 클라이언트 쪽이어야합니까 아니면 서버 쪽이어야합니까? 나는 실제로 서버 측에있을 가치가있는 심각한 코드 덩어리를 작성했으며 그 반대도 마찬가지라는 것을 알고 있습니다. 서버 코드에 더 잘 들어가는 AJAX 호출을하는 데 많은 시간을 할애 할 것입니다. 특히 정적이지만 정기적으로 변경되는 항목 (예 : 카테고리 목록)

2) 이미 플러그인이 있습니까? 나는 JQuery를 많이 사용하며 대답은 거의 항상 그렇습니다! 나는 종종 누군가가 작성한 플러그인 코드를 가져 와서 내 요구에 맞게 조정하지만 (보통 클래스를 추가하는 등) 거의 처음부터 시작할 필요가 거의 없습니다.

3) 자바 스크립트가 적합한 장소입니까? 때로는 지능형 CSS를 사용하는 것이 훨씬 더 합리적 일 때 Javascript를 통해 무언가에 동적 스타일을 완전히 추가하는 경우가 있습니다.

4) 다른 도구를 사용해야합니까? 이것은 내가 최근에 겪고있는 것입니다. 내 스택 (Rails 3.1)에서 잘 처리되는 커피 스크립트 와 같은 일부 자바 스크립트 대안이 있으며 내 코드의 많은 부분을 이동할지 여부를 고려하고 있습니다.

5)이 자바 스크립트 코드는 좋은 코드입니까? 자바 스크립트는 다른 코드와 같은 코드입니다. 이 코드는 나머지 코드만큼 좋은가요? 그렇지 않다면 왜 안됩니까? 버리나요? 게으른가요?


4
좋은 JavaScript 작성에 대한 팁은 "JavaScript를 작성하지 마십시오"및 "좋은 JavaScript 작성"을 포함합니다. 죄송합니다, -1
Ryan Kinal

1
@RyanKinal "jQuery 대부분을 사용합니다." 그것만으로도 큰 문제입니다.
시크릿

2
@ f0x 왜 그렇게 말합니까? 왜 다른 사람이 한 일을 기반으로 구축하고 싶지 않습니까?
Drew

2
@Ryan, "내가 물어보아야 할 5 개 이하의 질문을 나열하십시오"에 대한 귀하의 답변에는 일반적으로 좋은 조언이지만 "[예 : 그런 것들]을 배우십시오"라는 세 가지 지시문이 포함되어 있습니다. JavaScript를 코딩하는 동안 내가 움직일 때마다 스스로에게 질문해야합니다. "JavaScript를 이해하려면 무엇을 배워야합니까?" 드류는 질문에 답변 한 유일한 사람입니다.

2
@ f0x 나는 그것이 타당하지 않은지 여부에 관계없이 맹목적으로 플러그인을 사용해야한다고 말하지는 않지만 다른 사람들이 우리에게 제공하는 도구를 사용합니다. 그렇지 않으면 모두 자체 버전의 어셈블리를 사용하고 있습니다. 플러그인은 (a) 문제를 완전히 해결하거나 (b) 다른 사람이 해결하려는 문제를 어떻게 해결했는지에 대한 통찰력을 제공함으로써 시작할 수있는 훌륭한 지점을 제공합니다.
Drew
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.