그렇기 때문에 우리 코드의 맨 처음에있는 리셋 기능을 사용할 수있는 마지막 장소가 있습니다.
페이지가 처음으로로드 될 때 우리가해야 할 일은 임의의 색상을 선택해야한다는 것입니다. 그런 다음 이미 여기에있는 새로운 임의의 색상 중에서 하나의 색상을 선택해야합니다.
그리고 페이지의 각 사각형에 색상을 지정해야합니다. 기본적으로 리셋 기능을 사용할 수 있습니다.
그리고 init이라는 바로 처음에 함수를 실행하여 정리할 것입니다. 존재하지 않습니다.
그리고 init 함수 내부에 페이지가로드 될 때 실행해야하는 모든 것을 넣을 것입니다.
그래서 우리는 init 함수를 갖습니다.
그리고 우리의 net 함수 안에서 우리가 할 수있는 가장 먼저 할 일은 우리 모드 버튼 청취자를 추가하는 것입니다.
그리고 이것은 실제로 물건을 정리하는 것입니다.
그래서 아무 곳에도 떠 다니는 것이 아닙니다.
그래서 이것은 올바르게 들여 쓰기됩니다.
여기는 모드 버튼 이벤트 리스너이고이 코드는 여기에서 살펴볼 것입니다.
그리고 이것은 우리가 제거 할 수있는 각 사각형의 색을 변화시키는 것입니다.
재설정을 사용하고 각 사각형에 klick 리스너를 추가하기 때문에 더 이상 할 필요가 없습니다. 클릭 할 때마다이 논리를 모두 약간 정리해야합니다.
재설정 버튼이 색상을 변경하면 메시지 디스플레이가 변경됩니다.
그래서 이것을 페이지의 init 함수에 복사 할 것입니다. 왜냐하면 페이지가 너무 잘로드 될 때 처음부터 실행하고 적절히 처리하기를 원하기 때문입니다.
그리고 마지막으로 버튼 모드 버튼과 사각형에 대해 이벤트 핸들러를 설정하면 재설정 기능을 실행한다는 의미의 화면을 재설정하고 리셋은 실제로 우리 색상을 생성합니다. 그래서 우리는 색상을 정의 할 수 없거나 처음에 빈 배열을 가질 수 있습니다.
나는 그걸로 시작 할거야.
우선 빈 배열을 먼저 제공하겠습니다.
그리고 나서 우리가 할 수있는 것은 picked colour를 단지 가치없는 변수로 만들고 그것을 저장하고 물건을 조금 더 깨끗하게 만드는 것입니다.
여기서 셀렉터를 이동 시켜서 위로 가기 위해 세 가지 변수를 선택합니다.
그런 다음 페이지에서 다른 요소를 선택하는 변수가 있습니다.
승인.
그래서 다시 태어나 기 시작합니다.
우리는이 코드를 모두 여기에서 실행할 init 함수를 실행합니다.
이 코드는 모드 버튼 리스너를 설정하고 사각형 리스너를 설정 한 다음 리셋을 실행하여 선택한 색상에서 임의의 색상을 선택한 색상을 선택하여 텍스트 내용과 그 모든 것을 변경합니다.
그리고 우리는 reset 함수를 호출하는 init 함수 안에서 이것을 수행하기 때문에이 줄을 제거 할 수 있습니다.
그래서 우리가 계속하기 전에 이것이 작동하는지 확인합시다.
죄송하지만 ..
오류 없음.
그리고 페이지를 새로 고침하고 해당 코드가 모두 해당 init 함수에서 실행되고 있음을 알 수 있습니다.
그리고 그 안에는 우리가 보는 모든 것을 다시 설정합니다.
그래서 우리의 청취자가 올바르게 설정되었습니다.
우리는 올바른 메시지를 얻습니다.
다시 놀자.
모든 것이 잘 작동합니다.
쉬운 모드로 놀자.
우리는 거기에 갈.
다시 한 번 더 놀자.
큰.
그래서 그것은 잘 작동합니다.
우리가 할 수있는 한 가지 더 많은 변화가 있습니다. 바로이 기능이 여기에 있고 지금은 약간 길기 때문에 내가 일 해본 사람들 중에는 기능이 얼마나 오래 있어야하는지에 대해 정말로 엄격한 규칙이 있습니다.
어떤 사람들은 코드가 10 줄보다 길면 코드를 자체 함수로 분리해야한다고 말합니다.
그래서 우리는 여기서 그것을 할 수 있습니다.
이것은 모드 버튼 청취자를 설정하는 자체의 기능 일 수 있습니다. 그래서 여기에서 할 수 있습니다.
또는 모드 버튼을 쓰는 것만으로 모드 버튼을 설정하고 그 기능을 모드 버튼을 설정하는 기능으로 선언 할 것입니다.
그리고 여기에서 우리는 그 코드를 붙이기 만하면 처음부터 들여 쓰기가 한 번만 실행됩니다.
모드 버튼 리스너를 설정 했으므로 여기서도 동일한 작업을 수행 할 수 있습니다.
이 코드를 복사하면 정사각형 청취자의 이름을 지정하거나 그냥 정사각형이라고 부르면 기능 설정을 작성하겠습니다.
그리고 나는 네가 거기에있는 수도를 사용하지 않았다는 것을 알았다.
그래서 여기에 정사각형을 설치하는 것에주의를 기울일 필요가 있습니다. 그러면 우리 코드가 똑같은 방식으로 작동하는지 확인할 것입니다.
이제 init이 정말 멋지고 깨끗합니다.
사각형을 설정하는 모드 버튼을 설정하고 표시되는 모든 것을 재설정합니다.
새로 고침을 시도하겠습니다.
우리 스퀘어가 잘 작동하는 것처럼 보입니다. 여전히 잘 작동합니다.
더 많이 새로 고침하면 모드 버튼이 여전히 잘 작동합니다.
모든 것이 훌륭하고 모든 것이 잘 작동하는 것처럼 보입니다.
그것은 지금까지 리팩토링 담당자에게 맡기고 있습니다.
그러나 앞으로의 동영상에서 개선해야 할 몇 가지 사항을 알려 드리겠습니다.
일단 자바 스크립트에 대해 좀 더 배우고 그것에 익숙해지면 디자인 패턴에 대해 이야기 할 것이고 디자인 패턴은 기본적으로 코드를 구조화하여이 코드를 가질 수 있습니다.
동일한 논리를 사용하여 같은 게임을 만드는 것과 동일한 방식으로 작동하며 10 명의 사람들이 10 가지 방법으로 그것을 쓸 수 있으며 우리가 타고있는 기능이나 변수의 이름에 관한 것이 아닙니다.
그것은 또한 우리가 일반적인 것들을 구조화하는 방법에 관한 것이고, 가장 일반적인 것들 중 가장 간단한 것 또는 가장 간단한 것 중 하나를 모듈 디자인 패턴이라고합니다.
이것이 의미하는 바는 객체에 많은 속성을 추가 할 수 있기 때문에 객체 안에 있지 않은 변수가 주위에 떠 다니지 않습니다.
우리는 window 객체에서 이와 같이 독자적으로 존재하는 함수를 가지고 있지 않습니다.
오히려 그것들을 우리 자신의 물건에 추가합니다.
그래서 당신이 게임 객체를 가질 수있는 것처럼 보일 것입니다.
그리고 우리는 Game dot을 쓸 수 있습니다. 그리고 우리는 그것의 한 부분을 할 것입니다.
Game dot init은 함수이고 우리는이 코드를 거기에 복사 할 것이고 우리는 모든 단일 함수 변수마다 이것을 수행 할 것입니다. 그리고 나서 결국 우리는 단지 게임을 실행할 것입니다.
그리고 이것에 대한 추론은 조금 더 복잡합니다.
짧은 버전은 물건을 구조화하고 정리하는 데 도움이된다는 것입니다.
또한 이전에 객체 비디오 중 하나에서 언급 한 네임 스페이스 충돌을 피하는데도 도움이됩니다.
그래서 저는이 전체 리팩토링을 통과하지 않을 것입니다.
우리가 가진 것이 충분합니다.
그것은 잘 작동합니다.
그러나 개발자로서 계속 성장하고 점점 더 편안 해지면주의를 기울일 것들 중 하나를 배우십시오. 자바 스크립트 디자인 패턴이 있으며 여기에 쓰여진 책이 있습니다.
거기 에세이와 블로그와 너무 많은 비디오와 전체 코스는 실제로 자바 스크립트를 구조화에 관한 온라인이야.
그래서 그게 초점이 아니에요.
그리고 저는 여전히 콘텐트에 초점을 맞추고 싶습니다. HTML 코드는 자바 스크립트 C가 로직을 평가하고 나중에 구조가 올 수 있습니다.