これで最後の場所が1つあります。リセット機能はコードの冒頭にあります。
ページが初めて読み込まれるときには、ランダムな色を選択する必要があります。既に行っている新しいランダムな色から1つの色を選択する必要があります。
そして、ページの各四角に色を割り当てる必要があります。そのため、基本的にはリセット機能を使用できます。
そして、実際にinitという非常に冒頭のところで関数を実行するだけで、物事をきれいにするつもりです。それは存在しません。
また、init関数の中では、ページが読み込まれたときに実行する必要があるすべてを配置します。
そこで関数initを使用します。
そして、私たちのネット関数の中で、最初にできることは、モードボタンのリスナーを追加することです。
そして、これは本当に物事をきれいにすることです。
だからこそどこにも浮かんでいないだけです。
したがって、これは適切にインデントされます。
これは私たちのモードボタンのイベントリスナーです。ここでこのコードを取得します。
そして、これは、私たちが取り除くことができる各正方形の色を変えることです。
そのリセットを使用するので、私たちはもうこれを行う必要はありません。そして、クリックしたときにも、このロジックをすべてちょっと整理する必要があるように、各正方形にklickリスナーを追加します。
私たちはリセットボタンの色を変えてメッセージ表示を変更しています。
ですから、これを私たちのinit関数にコピーするだけです。なぜなら、ページがうまく読み込まれ、これも適切に実行されたときに、最初から実行したいからです。
最後に、ここでボタンモードボタンと四角形のイベントハンドラを設定したら、リセット機能を実行することを意味する画面をリセットするだけです。リセットは実際に色を生成します色は未定義にすることも、空の配列を最初に設定することもできます。
私はそれから始めます。
さて空の配列を最初に付けてみましょう。
そして、私たちができることは、拾い上げられた色をただ価値のない変数にして保存し、物事を少しきれいにすることです。
ここではセレクタを下に移動して、上の方が3つの変数を選択するようにします。
そして、ページ上のさまざまな要素を選択する変数があります。
OK。
だから、やはり最初のことが起こります。
このコードをここで実行するinit関数を実行します。
そのコードはモードボタンのリスナーを設定し、正方形のリスナーを設定してからリセットを実行し、選択した色からランダムな色を選んだ色を選択し、テキストの内容とそのすべてを変更します。
そして、リセットを呼び出すinit関数の内部でこれを行うので、この行を取り除くことができます。
だから私たちが上に移動する前にこれが動作することを確認しましょう。
私たちは詐欺師を開く。 エラーはありません。
そして、私はページをリフレッシュし、そのコードのすべてがそのinit関数で実行されていることがわかります。
そこには、私たちが見ているすべてのものがリセットされています。
だから私たちのリスナーは正しく設定されています。
正しいメッセージが表示されます。
もう一度遊びましょう。
すべてがうまくいきます。
簡単モードで遊ぼう。
そこに行く。
もう一度やり直しましょう。
すばらしいです。
だからうまくいく。
私たちが作ることができるもう1つの変更があります。ここにこの機能があり、少し長めです。私が働いた人の中には、機能の長さに関する厳しいルールがあります。
あなたのコードが10行以上であれば、それを自分の関数に分割する必要があると言う人もいます。
だから、ここでそれをすることができました。
これはモードボタンリスナーを設定しているので、ここでそれを行うことができます。
また、モードボタンを書くだけでモードボタンを設定して、その機能をモードファンクションのモードボタンで宣言します。
ここでは、そのコードを貼り付けて、ちょうど最初にインデントを正しく実行します。
モードボタンリスナーを設定しました。ここでも同じことができます。
このコードをコピーすれば、これを正方形のリスナーを設定する名前にするか、あるいはそのような四角形を設定して関数を設定します。
そして、私はあなたがそこにいる資本を使わなかったことに気付いています。
だから私はここにその正方形を設定することに注意を払う必要があり、私たちのコードが同じように動作することを確認します。
だから、私たちのinitは本当に素晴らしく清潔です。
それは四角形を設定するモードボタンを設定し、私たちが見るすべてをリセットします。
リフレッシュしようとしましょう。
私たちのスクエアはまだうまく動作しているように見えます。
もっとリフレッシュしても、モードボタンは正常に機能します。
それはすべて素晴らしいですし、すべてがうまく動いているように見えます。
それは今のところリファクタリングにかかる​​までです。
しかし、今後のビデオで改善したいことをいくつか紹介します。
JavaScriptについてもう少し学び、それに慣れたら、いくつかのデザインパターンについてお話しましょう。デザインパターンは基本的にコードを構造化してこのコードを作る方法です。
それは同じロジックを同じゲームにするのと同じ方法で動作し、10人の異なる人々が10種類の方法でそれを書くことができます。そして、私たちが乗っている機能や変数の名前だけではありません。
それは一般的に物事を構成する方法でもあり、もっとも一般的なもののうち最も簡単なものの1つまたは1つをモジュール設計パターンと呼びます。
つまり、オブジェクトにたくさんのプロパティを追加することができます。そのため、オブジェクトの内部に浮かぶような変数はありません。
私たちは、ウィンドウオブジェクト上でこのような独自の機能を持っていません。
むしろ、私たち自身のオブジェクトにそれらを追加します。
だから、あなたはゲームオブジェクトを持つことができるこのようなものに見えます。
そしてゲームドットを書くかもしれないし、ちょうどその一部をやるつもりだ。
Game
dot initは関数であり、そこにこのコードをコピーするだけで、すべての単一のプロパティ変数ごとにこれを行い、最後にゲームを実行するだけです。
そして、この背後にある理由は少し複雑です。
短いバージョンは、物事を構造化し、整理しておくのに役立つということです。
また、オブジェクト・ビデオの1つで前述した名前空間の衝突を避けるのにも役立ちます。
だから私はこのリファクタ全体を通過しません。
私たちが持っているものは十分です。
それはうまく動作します。
しかし、あなたが開発者として成長し続けると、一度あなたがもっと快適になるように注意を払うものの一つを学びます.JavaScriptのデザインパターンであり、これに書かれた本があります。
エッセイやブログ、たくさんの動画があり、実際にはJavaScriptを構造化するだけのコースが実際にオンラインになっています。
だからそれは焦点ではない。
そして私はまだ本当にちょうどコンテンツに焦点を当てたいHTMLのJavaScriptはCのロジックを評価し、構造は後で来ることができます。
しかし、私はあなたに、これを構造化する他の方法があることを知りたがっています