TASK 0002 が公開されました。初級クラスのタスク期間は 4 月 24 日から 5 月 7 日まで、中級クラスは 4 月 18 日から 4 月 25 日までです。
TASK 0002 の内容：https://github.com/baidu-ife/ife/tree/master/task/task0002
私がやったこと：https://github.com/DIYgod/ife-work/tree/master/task0002
オンラインデモ：https://www.anotherhome.net/file/ife/task0002/task0002_1.html
今回のタスクにかかった合計時間は 17 日（4.19-5.6）です。
以下は、私が TASK 0002 の過程でのいくつかの記録です。
1. JavaScript のパフォーマンス最適化（参考 JavaScript のパフォーマンス最適化：読み込みと実行）
・ウェブ開発者は一般的に <head> に外部リンクの JavaScript を読み込み、その後 <link> タグを使って外部リンクの CSS ファイルや他のページ情報を読み込みます。しかし、この一般的な方法には深刻なパフォーマンス問題が隠れています —— スクリプトはページの他のリソースのダウンロードをブロックします。したがって、すべての <script> タグは可能な限り <body> タグの底部に配置することをお勧めします。これにより、ページ全体のダウンロードへの影響を最小限に抑えることができます。
・各 <script> タグの初期ダウンロード時にページのレンダリングをブロックするため、ページに含まれる <script> タグの数を減らすことは、この状況を改善するのに役立ちます。
・JavaScript がパフォーマンスに与える影響を減らす他の方法については、参考を参照してください。
2. == と ===（参考 Javascript 中双等号 “==” と三等号 “===” の違い JavaScript の三つの等号と二つの等号の違い JavaScript コーディング規約）
==：等しい演算ですが、値の型は比較しません；
===：完全に等しい演算で、値だけでなく値の型も比較します。両者が一致する場合のみ真となります。
百度の JavaScript コーディング規約でも、Equality Expression では型を厳密にした === の使用を義務付けています。null または undefined を判断する場合にのみ == null の使用が許可されています。なぜなら、=== を使用することで等しい判断における暗黙の型変換を避けることができるからです。
3. 型検出（参考 JavaScript コーディング規約 Javascript 配列型検出：より堅牢な isArray 関数の作成 Javascript 関数型判断の完璧な解決策）
一般的な簡易的な方法：型検出は優先的に typeof を使用します。オブジェクト型の検出には instanceof を使用します。null または undefined の検出には == null を使用します。
配列型を判断する：オブジェクトの文字列表現を取得し、この文字列が '[object Array]' であるかを比較します。
9.20 更新：以下のようにすることもできます。
関数型を判断する：まず、テストするオブジェクトが存在することを確認し、それを "function" を含む文字列にシリアライズします。これが私たちの検出の基礎です（fn.constructor != String, fn.constructor != Array, and fn.constructor != RegExp）。さらに、宣言された関数が DOM ノードでないことを確認する必要があります（fn.nodeName）。その後、toString テストを行います。関数を文字列に変換すると、ブラウザ内で（fn+""）得られる結果は「function name (){...}」のようになります。したがって、それが関数であるかどうかを判断するのは簡単で、文字列に"function" という単語が含まれているかどうかを確認するだけです。これは驚くべきことで、問題のある関数に対して、すべてのブラウザで必要な結果を得ることができます。この関数は従来の方法に比べて実行速度がやや劣りますが、著者（John Resig）は控えめに使用することを推奨しています。
9.20 更新：上記の方法は面倒すぎるので、Array のように判断することができます。
Array の簡単なコピー方法：
4. 型変換（参考 JavaScript コーディング規約）
number -> string:
string -> number:
-> boolean:
number の小数点を削除する：
5. 順序付きコレクションを反復する際に length をキャッシュする（参考 JavaScript コーディング規約）
現代のブラウザは配列の長さをキャッシュしていますが、一部のホストオブジェクトや古いブラウザの配列オブジェクトでは、length にアクセスするたびに要素数を動的に計算します。この場合、length をキャッシュすることでプログラムのパフォーマンスを向上させることができます。
6. document.body.scrollTop と document.documentElement.scrollTop でスクロールバーの距離を取得する際の罠（参考 document.body.scrollTop と document.documentElement.scrollTop の互換性 JavaScript でページ要素の位置を取得する Firefox、Google、IE における document.body.scrollTop と document.documentElement.scrollTop 及び値が 0 になる問題）
阮一峰のチュートリアルを参考にして、以下のコードを書きました：
しかし、罠に遭遇し、結果として elementScrollLeft は常に 0 になりました。デバッグ結果は以下の通りです：
本当に困ったことに、文書宣言（つまり、ウェブページの最初の行の docType）がある場合、document.compatMode の値は "CSS1compat" になるはずですが、標準ブラウザは documentElement.scrollTop のみを認識します。
また、IE と Firefox を試したところ、両者とも documentElement.scrollTop を認識しましたが、Chrome は間違っています！
幸いなことに、document.body.scrollTop と document.documentElement.scrollTop の両者には、同時に一つの値だけが有効になるという特徴があります。たとえば、document.body.scrollTop が値を取得できるとき、document.documentElement.scrollTop は常に 0 になります。逆もまた然りです。したがって、次のように書くことができます：
7. すべての DOM 要素を取得する
突然思いついたこと：
8. 真偽判断
オブジェクトは常に true で、基本型は空かどうかを確認します。
空の配列を false と誤解しやすいです！
空の配列を false と誤解しやすいです！
空の配列を false と誤解しやすいです！
重要なことは三回言います！
9. 再帰的にすべての子要素を取得する
これは問題があります。下のレベルの子要素しか取得できません：
しかし、次のように変更するとすべての子要素を取得できます：
最初のコードが問題を起こした理由は不明で、一晩考えましたが進展はありませんでした。
また、デバッグ中に発見した奇妙な現象：
説明します：再帰呼び出し時に返される allchilds は正しいですが、上のレベルに戻ると、上のレベルの allchilds に加算されませんでした。
月月 がこの文に問題があると教えてくれました！
w3school はこう言っています：concat () メソッドは二つ以上の配列を結合するために使用されます。
このメソッドは既存の配列を変更せず、結合された配列のコピーを返すだけです。結合された配列のコピーを返すだけです。結合された配列のコピーを返すだけです。
すべてが説明できました。。
したがって、allchilds の宣言位置に関する問題ではなく、デバッグの方向が常に間違っていました。次のように変更する必要があります：
まさか、月月 李勝 炒飯 の助けを借りて、ようやくこの小さな関数を完成させることができました。。。
その後：突然、次のようにして簡単に取得できることを思いつきました。
血を吐きました。
10. 配列の結合（参考 JavaScript concat () メソッド）
重要なことは別に言います。なぜなら、ひどい目に遭ったからです。
concat () メソッドは二つ以上の配列を結合するために使用されます。
このメソッドは既存の配列を変更せず、結合された配列のコピーを返すだけです。
このメソッドは既存の配列を変更せず、結合された配列のコピーを返すだけです。
このメソッドは既存の配列を変更せず、結合された配列のコピーを返すだけです。
誤った使い方：
正しい使い方：
11. イベントデリゲーション（参考 javascript イベントデリゲーション）
プログラミングにおいて、ターゲットオブジェクトを直接操作したくない、またはできない場合、delegate を利用して代理オブジェクトを作成し、ターゲットオブジェクトのメソッドを呼び出すことで、ターゲットオブジェクトを操作する目的を達成できます。もちろん、代理オブジェクトはターゲットオブジェクトの参照を持っている必要があります。
イベントデリゲーションの方法を使って、ある関数を別の関数の代理として優雅に使用することができます。たとえば：
こうすることで、優雅に on un 関数が addEvent removeEvent 関数を代理することができます。これにより、ターゲットオブジェクトの隠蔽が実現され、いくつかのコアオブジェクトを保護するのに非常に役立ちます。
私は間違っていました。直接こうすればいいのです。。
12. Object 関連（参考 js の Object とは何か？）
Array、Boolean、Date、Function、Number などのオブジェクトは、実際にはすべて Object から派生しています。彼らの祖先はすべて Object です。彼らは異なる言語の特性を示します。たとえば、Array には自動管理される length 属性があり、Boolean には true または false の値しかなく、Date は時間構造を表し、Function は実行可能で、すべて彼らの原始的な型 (valueOf) が彼らに能力を与えています。
したがって、いくつかの興味深いこと：
関数に別の関数の属性を設定できます。
13. JavaScript 正規表現のグループ化（参考 JavaScript 正規表現の選択、グループ化と参照）
例：
ここで re.exec (document.cookie) は配列であり、最初の要素は正規表現によって一致したすべての文字、2 番目の要素は最初のグループ、つまり最初の括弧内の内容です：(.*?)
グループ化は正規表現の中の部分式であり、正規表現によって一致した文字列の特定の部分を取得するために使用できます。
9.20 更新：コンストラクタを使用して正規表現オブジェクトを作成する際には、通常の文字のエスケープルール（前にバックスラッシュ \ を追加）を適用する必要があります。たとえば、以下は等価です：
14. JavaScript クロスドメイン（参考 JavaScript クロスドメインのまとめと解決策）
JavaScript はセキュリティ上の理由から、他のページのオブジェクトをクロスドメインで呼び出すことを許可していません。しかし、セキュリティ制限と同時に、iframe や ajax アプリケーションの注入に多くの問題を引き起こしています。
具体的な制限と解決策については、参考を参照してください。
15. JavaScript の月が一つ多い（参考 JS の new Date でどうして一ヶ月多くなるのか？ JavaScript—— ガントチャートを使用する際に Date オブジェクトで遭遇した問題）
明らかに 5 月に設定したのに、結果は 6 月になりました。
実際には、私たちは月を 0 から数えませんが、JavaScript では 0 から数えます。JS の 0 月は私たちの 1 月で、JS の 1 月は私たちの 2 月です...
したがって、月を設定する際は 1 を引き、月を取得する際は 1 を足すことを忘れないでください。。
15. タイマーはコードの実行をブロックしない
私の意図は a () を実行してから b を出力することでしたが、b が先に出力されました。ここからも、タイマーは後の文の実行をブロックしないことが推測できます。
☆ﾐ(o*･ω･)ﾉ完結散花 レビューを待っています