タスク 3 はすでに公開されており、初級クラスのタスク期間は 5 月 7 日から 5 月 18 日まで、中級クラスは 4 月 30 日から 5 月 10 日までです。
TASK 0003 の内容：https://github.com/baidu-ife/ife/tree/master/task/task0003
私が行った作業：https://github.com/DIYgod/ife-work/tree/master/task0003
オンラインデモ：https://www.anotherhome.net/file/ife/task0003/
今回のタスクにかかった時間は 10 日間（5 月 6 日から 5 月 16 日）
以下は私が TASK 0003 の過程で行ったいくつかのメモです。
1. JavaScript のスコープ（参考：鳥哥：Javascript のスコープの原理 理解 JavaScript のスコープとスコープチェーン）
JavaScript の関数は、定義されたスコープ内で実行されます。
JS にはコンパイルのプロセスがあり、JS は各 JS コードの実行前に、まず var キーワードと関数定義（関数定義と関数式）を処理します。
関数を呼び出す前に、まずアクティブオブジェクトを作成し、この関数内のローカル変数の定義と関数の定義を検索し、変数名と関数名をアクティブオブジェクトの同名のプロパティとして設定します。ローカル変数の定義では、変数の値は実際に実行されるときに計算され、その時点では単純に undefined に設定されます。
コードの最適化に関する示唆：
スコープチェーンの構造からわかるように、実行時コンテキストのスコープチェーン内で、識別子の位置が深くなるほど、読み書きの速度が遅くなります。なぜなら、グローバル変数は常に実行時コンテキストのスコープチェーンの最後に存在するため、識別子の解決時にグローバル変数を検索するのは最も遅いからです。そのため、コードを書く際にはできるだけグローバル変数を使用せず、ローカル変数を使用するようにすることが望ましいです。良い経験則は次のとおりです：クロススコープのオブジェクトが 1 回以上参照される場合は、まずそれをローカル変数に保存してから使用することです。
たとえば、次のコード：
この関数は 2 回 document というグローバル変数を参照しています。変数を検索するためにスコープチェーン全体を走査する必要があります。このコードは次のように書き直すことができます：
このコードは比較的単純ですが、書き直した後は大幅なパフォーマンスの向上は見られません。ただし、プログラムに多くのグローバル変数が繰り返しアクセスされる場合、書き直した後のコードのパフォーマンスは大幅に向上します。
2. 高さの自動調整（参考：CSS レイアウトのテクニック - 高さの自動調整）
高さの自動調整は幅の自動調整ほど簡単ではなく、ブラウザの互換性の面でもやや複雑です。
ただし、単に height: 100%; と書いても何の効果もありません。次のようにする必要があります：
3. 理解できない空白が突然現れ、突然消える
問題は次のようなものです。昨日（5 月 12 日）はページが正常に表示されていましたが、今朝起きてコードを変更せずにページをリロードすると、overflow: scroll CSS プロパティを持つ要素の右側と下側に空白が表示されました。以下の画像を参照してください：
ただし、overflow: scroll プロパティを削除すると空白は消えます。Chrome と Safari でテストし、キャッシュをクリアしましたが、問題は解決しませんでした。そのため、この時点でのコードを commit して github に push しました。
午後になり、同じタブ、同じページでリロードすると、バグが自動的に消えました。この時点でのコードは午前と比較してほとんど変更されておらず、関係のない変更しかありませんでした。再度 commit して github に push しました（すべての変更はgithub に記録されています）。再度スクリーンショットを撮りました：
注意：変化が 2 回起こった後、Chrome と Safari のブラウザでテストし、キャッシュをクリアしました。
ここまでで何の手がかりもなく、これ以上追求することができませんでした。
Mac のバグの可能性があります。
4. JavaScript オブジェクトと JSON テキストの相互変換（参考：JavaScript オブジェクトと JSON 文字列の相互変換 JSON チュートリアル - W3CSCHOOL）
eval 関数：JSON テキストを JavaScript オブジェクトに変換するための関数。JavaScript エディタを呼び出します。非常に高速ですが、セキュリティの問題が発生する可能性があります。
JSON パーサーの使用：
JSON.parse 関数：JSON テキストを JavaScript オブジェクトに変換します。
JSON.stringify 関数：JavaScript オブジェクトを JSON テキストに変換します。
5. textarea と input のサイズが予想よりも大きい
李勝さんに感謝します。
この問題は実際には非常に単純ですが、私は最初に考えつきませんでした。最初は非常に不可解でした。以下をご覧ください：
See the Pen RPaJpb by DIYgod (@DIYgod) on CodePen.
問題は、textarea と input の幅が設定した幅よりも 6px 多いことです。完璧主義者にとっては、これは非常に不快です。実際には、これらの要素にはデフォルトで 2px の padding と 1px の border があります。これらの要素の CSS に次のように追加すると問題が解決します：
または、よりエレガントな方法で次のように書くこともできます：
以上です。