1
00:00:00,330 --> 00:00:05,440
그렇기 때문에 우리 코드의 맨 처음에있는 리셋 기능을 사용할 수있는 마지막 장소가 있습니다.

2
00:00:05,550 --> 00:00:17,440
페이지가 처음으로로드 될 때 우리가해야 할 일은 임의의 색상을 선택해야한다는 것입니다. 그런 다음 이미 여기에있는 새로운 임의의 색상 중에서 하나의 색상을 선택해야합니다.

3
00:00:17,820 --> 00:00:26,290
그리고 페이지의 각 사각형에 색상을 지정해야합니다. 기본적으로 리셋 기능을 사용할 수 있습니다.

4
00:00:26,490 --> 00:00:33,430
그리고 init이라는 바로 처음에 함수를 실행하여 정리할 것입니다. 존재하지 않습니다.

5
00:00:33,600 --> 00:00:38,820
그리고 init 함수 내부에 페이지가로드 될 때 실행해야하는 모든 것을 넣을 것입니다.

6
00:00:39,000 --> 00:00:41,490
그래서 우리는 init 함수를 갖습니다.

7
00:00:41,790 --> 00:00:49,070
그리고 우리의 net 함수 안에서 우리가 할 수있는 가장 먼저 할 일은 우리 모드 버튼 청취자를 추가하는 것입니다.

8
00:00:50,250 --> 00:00:52,200
그리고 이것은 실제로 물건을 정리하는 것입니다.

9
00:00:52,230 --> 00:00:55,110
그래서 아무 곳에도 떠 다니는 것이 아닙니다.

10
00:00:55,320 --> 00:00:56,850
그래서 이것은 올바르게 들여 쓰기됩니다.

11
00:00:57,000 --> 00:01:05,260
여기는 모드 버튼 이벤트 리스너이고이 코드는 여기에서 살펴볼 것입니다.

12
00:01:05,400 --> 00:01:10,420
그리고 이것은 우리가 제거 할 수있는 각 사각형의 색을 변화시키는 것입니다.

13
00:01:10,560 --> 00:01:22,620
재설정을 사용하고 각 사각형에 klick 리스너를 추가하기 때문에 더 이상 할 필요가 없습니다. 클릭 할 때마다이 논리를 모두 약간 정리해야합니다.

14
00:01:22,620 --> 00:01:26,980
재설정 버튼이 색상을 변경하면 메시지 디스플레이가 변경됩니다.

15
00:01:27,030 --> 00:01:38,560
그래서 이것을 페이지의 init 함수에 복사 할 것입니다. 왜냐하면 페이지가 너무 잘로드 될 때 처음부터 실행하고 적절히 처리하기를 원하기 때문입니다.

16
00:01:38,820 --> 00:02:01,260
그리고 마지막으로 버튼 모드 버튼과 사각형에 대해 이벤트 핸들러를 설정하면 재설정 기능을 실행한다는 의미의 화면을 재설정하고 리셋은 실제로 우리 색상을 생성합니다. 그래서 우리는 색상을 정의 할 수 없거나 처음에 빈 배열을 가질 수 있습니다.

17
00:02:01,260 --> 00:02:02,230
나는 그걸로 시작 할거야.

18
00:02:02,280 --> 00:02:04,040
우선 빈 배열을 먼저 제공하겠습니다.

19
00:02:04,350 --> 00:02:13,920
그리고 나서 우리가 할 수있는 것은 picked colour를 단지 가치없는 변수로 만들고 그것을 저장하고 물건을 조금 더 깨끗하게 만드는 것입니다.

20
00:02:14,010 --> 00:02:20,760
여기서 셀렉터를 이동 시켜서 위로 가기 위해 세 가지 변수를 선택합니다.

21
00:02:20,760 --> 00:02:25,620
그런 다음 페이지에서 다른 요소를 선택하는 변수가 있습니다.

22
00:02:26,100 --> 00:02:26,620
승인.

23
00:02:26,790 --> 00:02:29,360
그래서 다시 태어나 기 시작합니다.

24
00:02:29,550 --> 00:02:34,600
우리는이 코드를 모두 여기에서 실행할 init 함수를 실행합니다.

25
00:02:35,010 --> 00:02:50,980
이 코드는 모드 버튼 리스너를 설정하고 사각형 리스너를 설정 한 다음 리셋을 실행하여 선택한 색상에서 임의의 색상을 선택한 색상을 선택하여 텍스트 내용과 그 모든 것을 변경합니다.

26
00:02:51,150 --> 00:02:57,730
그리고 우리는 reset 함수를 호출하는 init 함수 안에서 이것을 수행하기 때문에이 줄을 제거 할 수 있습니다.

27
00:02:57,780 --> 00:03:01,720
그래서 우리가 계속하기 전에 이것이 작동하는지 확인합시다.

28
00:03:02,610 --> 00:03:04,860
죄송하지만 ..

29
00:03:04,890 --> 00:03:05,860
오류 없음.

30
00:03:06,180 --> 00:03:11,370
그리고 페이지를 새로 고침하고 해당 코드가 모두 해당 init 함수에서 실행되고 있음을 알 수 있습니다.

31
00:03:11,370 --> 00:03:15,270
그리고 그 안에는 우리가 보는 모든 것을 다시 설정합니다.

32
00:03:15,270 --> 00:03:17,190
그래서 우리의 청취자가 올바르게 설정되었습니다.

33
00:03:17,460 --> 00:03:19,140
우리는 올바른 메시지를 얻습니다.

34
00:03:19,140 --> 00:03:20,160
다시 놀자.

35
00:03:20,370 --> 00:03:21,890
모든 것이 잘 작동합니다.

36
00:03:22,170 --> 00:03:24,440
쉬운 모드로 놀자.

37
00:03:25,680 --> 00:03:26,340
우리는 거기에 갈.

38
00:03:26,340 --> 00:03:31,430
다시 한 번 더 놀자.

39
00:03:31,530 --> 00:03:32,000
큰.

40
00:03:32,100 --> 00:03:35,880
그래서 그것은 잘 작동합니다.

41
00:03:35,910 --> 00:03:46,290
우리가 할 수있는 한 가지 더 많은 변화가 있습니다. 바로이 기능이 여기에 있고 지금은 약간 길기 때문에 내가 일 해본 사람들 중에는 기능이 얼마나 오래 있어야하는지에 대해 정말로 엄격한 규칙이 있습니다.

42
00:03:46,290 --> 00:03:52,140
어떤 사람들은 코드가 10 줄보다 길면 코드를 자체 함수로 분리해야한다고 말합니다.

43
00:03:52,230 --> 00:03:53,500
그래서 우리는 여기서 그것을 할 수 있습니다.

44
00:03:53,700 --> 00:04:00,000
이것은 모드 버튼 청취자를 설정하는 자체의 기능 일 수 있습니다. 그래서 여기에서 할 수 있습니다.

45
00:04:00,040 --> 00:04:15,010
또는 모드 버튼을 쓰는 것만으로 모드 버튼을 설정하고 그 기능을 모드 버튼을 설정하는 기능으로 선언 할 것입니다.

46
00:04:15,960 --> 00:04:25,470
그리고 여기에서 우리는 그 코드를 붙이기 만하면 처음부터 들여 쓰기가 한 번만 실행됩니다.

47
00:04:25,470 --> 00:04:29,450
모드 버튼 리스너를 설정 했으므로 여기서도 동일한 작업을 수행 할 수 있습니다.

48
00:04:29,460 --> 00:04:45,120
이 코드를 복사하면 정사각형 청취자의 이름을 지정하거나 그냥 정사각형이라고 부르면 기능 설정을 작성하겠습니다.

49
00:04:45,120 --> 00:04:48,240
그리고 나는 네가 거기에있는 수도를 사용하지 않았다는 것을 알았다.

50
00:04:48,300 --> 00:04:56,340
그래서 여기에 정사각형을 설치하는 것에주의를 기울일 필요가 있습니다. 그러면 우리 코드가 똑같은 방식으로 작동하는지 확인할 것입니다.

51
00:04:56,340 --> 00:04:59,130
이제 init이 정말 멋지고 깨끗합니다.

52
00:04:59,250 --> 00:05:04,610
사각형을 설정하는 모드 버튼을 설정하고 표시되는 모든 것을 재설정합니다.

53
00:05:04,680 --> 00:05:06,850
새로 고침을 시도하겠습니다.

54
00:05:07,170 --> 00:05:10,970
우리 스퀘어가 잘 작동하는 것처럼 보입니다. 여전히 잘 작동합니다.

55
00:05:11,100 --> 00:05:15,510
더 많이 새로 고침하면 모드 버튼이 여전히 잘 작동합니다.

56
00:05:15,510 --> 00:05:19,040
모든 것이 훌륭하고 모든 것이 잘 작동하는 것처럼 보입니다.

57
00:05:19,430 --> 00:05:21,600
그것은 지금까지 리팩토링 담당자에게 맡기고 있습니다.

58
00:05:21,600 --> 00:05:26,360
그러나 앞으로의 동영상에서 개선해야 할 몇 가지 사항을 알려 드리겠습니다.

59
00:05:26,610 --> 00:05:36,690
일단 자바 스크립트에 대해 좀 더 배우고 그것에 익숙해지면 디자인 패턴에 대해 이야기 할 것이고 디자인 패턴은 기본적으로 코드를 구조화하여이 코드를 가질 수 있습니다.

60
00:05:36,690 --> 00:05:47,690
동일한 논리를 사용하여 같은 게임을 만드는 것과 동일한 방식으로 작동하며 10 명의 사람들이 10 가지 방법으로 그것을 쓸 수 있으며 우리가 타고있는 기능이나 변수의 이름에 관한 것이 아닙니다.

61
00:05:47,820 --> 00:05:55,650
그것은 또한 우리가 일반적인 것들을 구조화하는 방법에 관한 것이고, 가장 일반적인 것들 중 가장 간단한 것 또는 가장 간단한 것 중 하나를 모듈 디자인 패턴이라고합니다.

62
00:05:55,890 --> 00:06:05,460
이것이 의미하는 바는 객체에 많은 속성을 추가 할 수 있기 때문에 객체 안에 있지 않은 변수가 주위에 떠 다니지 않습니다.

63
00:06:05,550 --> 00:06:10,000
우리는 window 객체에서 이와 같이 독자적으로 존재하는 함수를 가지고 있지 않습니다.

64
00:06:10,080 --> 00:06:12,790
오히려 그것들을 우리 자신의 물건에 추가합니다.

65
00:06:12,870 --> 00:06:16,840
그래서 당신이 게임 객체를 가질 수있는 것처럼 보일 것입니다.

66
00:06:17,280 --> 00:06:21,840
그리고 우리는 Game dot을 쓸 수 있습니다. 그리고 우리는 그것의 한 부분을 할 것입니다.

67
00:06:21,870 --> 00:06:36,590
Game dot init은 함수이고 우리는이 코드를 거기에 복사 할 것이고 우리는 모든 단일 함수 변수마다 이것을 수행 할 것입니다. 그리고 나서 결국 우리는 단지 게임을 실행할 것입니다.

68
00:06:36,620 --> 00:06:41,130
그리고 이것에 대한 추론은 조금 더 복잡합니다.

69
00:06:41,130 --> 00:06:44,720
짧은 버전은 물건을 구조화하고 정리하는 데 도움이된다는 것입니다.

70
00:06:44,940 --> 00:06:50,290
또한 이전에 객체 비디오 중 하나에서 언급 한 네임 스페이스 충돌을 피하는데도 도움이됩니다.

71
00:06:50,460 --> 00:06:52,620
그래서 저는이 전체 리팩토링을 통과하지 않을 것입니다.

72
00:06:52,620 --> 00:06:53,730
우리가 가진 것이 충분합니다.

73
00:06:53,730 --> 00:06:54,880
그것은 잘 작동합니다.

74
00:06:54,990 --> 00:07:05,010
그러나 개발자로서 계속 성장하고 점점 더 편안 해지면주의를 기울일 것들 중 하나를 배우십시오. 자바 스크립트 디자인 패턴이 있으며 여기에 쓰여진 책이 있습니다.

75
00:07:05,010 --> 00:07:11,670
거기 에세이와 블로그와 너무 많은 비디오와 전체 코스는 실제로 자바 스크립트를 구조화에 관한 온라인이야.

76
00:07:11,790 --> 00:07:12,940
그래서 그게 초점이 아니에요.

77
00:07:12,970 --> 00:07:20,910
그리고 저는 여전히 콘텐트에 초점을 맞추고 싶습니다. HTML 코드는 자바 스크립트 C가 로직을 평가하고 나중에 구조가 올 수 있습니다.