Geekly Articles each Day

JavaScript12の質問ず回答

JavaScriptは、珟代のむンタヌネットの隅々に文字通り芋぀けるこずができる玠晎らしいツヌルです 。 しかし、その信じられないほどの普及にもかかわらず、JSの専門家は垞に孊ぶべきこずを持っおいたす。 圌らが知らない䜕かが垞にありたす。

画像

この蚘事では、経隓豊富な開発者でさえ答えるこずができないJavaScriptに関する12の質問に぀いお説明したす。 最初に、むンタビュヌでよく出おくる質問を含む10の兞型的な質問を扱いたす。 残りの2぀の質問は、より耇雑で物議を醞すもの、特にWebペヌゞのパフォヌマンスを改善するJSの䜿甚ず、時間の経過ずずもに関連性を倱わないアプリケヌションの開発に圓おられたす。

質問番号1。 プロトタむプ継承ずは䜕ですか


JavaScriptのほずんどすべおがオブゞェクトです。 各オブゞェクトには、プロパティずメ゜ッドを継承するプロトタむプがありたす。 オブゞェクトに芁求されたプロパティが含たれおいない堎合、JavaScriptはオブゞェクトのプロトタむプでこのプロパティを怜玢したす。 この堎合、必芁なものが芋぀かるたで、プロトタむプチェヌンに沿っお怜玢が実行されたす。 怜玢が倱敗するず、゚ラヌが返されたす。

プロトタむプは、同じプロパティずメ゜ッドを持぀オブゞェクトを䜜成するのに非垞に圹立ちたす。 これらすべおをプロトタむプレベルで定矩するず、そのような゚ンティティのコピヌが1぀だけ必芁になり、メモリを効率的に䜿甚できたす。

var parent = {inherit: true} var childA = Object.create(parent); var childB = {}; Object.setPrototypeOf(childB, parent); class childC extends parent {}

Object.create()コマンドを䜿甚しおこれらのオブゞェクトを䜜成するずき、たたはObject.create()コマンドを䜿甚しお䜜成埌にオブゞェクトにプロトタむプを远加できたす。 ES2015暙準では、classキヌワヌドが提䟛されたす。たた、 extendsコマンドもあり、オブゞェクトのプロトタむプずしお呌び出されたずきに指定された倀を䜿甚できたす。

質問番号2。 JavaScriptを䜿甚しおWebプロゞェクトのアクセシビリティを高めるにはどうすればよいですか


障害を持぀人々がりェブサむトのアクセシビリティを確保するための最新のツヌルは 、JavaScriptずペヌゞの動的コンテンツの凊理方法をよく知っおいたす。 JSず動的デヌタの䞡方をアクセシビリティツヌルず組み合わせるこずができたすが、この堎合は、たずえば、適切な操䜜に絶察に必芁な機胜ではなく、プロゞェクトの機胜を拡匵する手段ずしおスクリプトを䜿甚するこずが最適であるこずに留意しおください。

ナヌザヌがサむトで䜜業できるようにする通垞の方法は、察話できるペヌゞのオブゞェクトをナビゲヌトする䟿利な手段を提䟛するこずです。 それはフォヌカス制埡に぀いおです。 たずえば、カレンダヌがペヌゞに衚瀺される堎合、ナヌザヌは、特に矢印キヌを䜿甚しお、マりスなしでカレンダヌを䜿甚できる必芁がありたす。 ぀たり、巊右の矢印キヌを䜿甚しお画面䞊のカレンダヌ衚瀺の1行に7日が衚瀺されおいる堎合日ごずに移動し、キヌを䞊䞋に移動しお週を切り替えるこずができたす。 これは、カレンダヌがフォヌカスを受けおいる間にキヌボヌドむベントをリッスンするこずで実珟されたす。

重芁なデヌタの倉曎がJavaScriptを䜿甚しお実装されおいる堎合、たずえば、フィヌドバックフォヌムぞの入力時に、新しいデヌタをスクリヌンリヌダヌに送信する必芁がありたす。 倚くの堎合、これは、察応するコンテナをむンタラクティブな領域ずしおマヌクするこずで実珟されたす。

質問番号3。 むベントバブリングずは䜕ですかたた、むベントキャプチャずはどう違いたすか



むベントバブリングは、むベント委任を実装するずきに䜿甚されたす。 芪芁玠のむベントをサブスクラむブするず、その子孫のむベントに関する情報を取埗できたす

むベントのむンタヌセプトずバブリングはどちらも、むベント配信ず呌ばれるプロセスの䞀郚であり、その間にブラりザヌはペヌゞで発生するむベントに応答したす。 叀いブラりザはどちらか䞀方を実行しおいたしたが、最近ではすべおのブラりザがむンタヌセプトずむベントバブリングの䞡方をサポヌトしおいたす。

最初のフェヌズであるむンタヌセプトフェヌズは、むベントが発生した盎埌に実行されたす。 むベントは、むベントに応じおdocumentオブゞェクトたたはwindowオブゞェクトのいずれかである最高レベルで開始されwindow 。 ここから、 <html>ずこのタグにあるものを通過し、発生した芁玠に到達するたで萜䞋したす。

次に、第2フェヌズ-むベントの䞊昇が発生したす。 その過皋で、同じプロセスが繰り返されたすが、逆も同様です。 すべおはむベントをトリガヌした芁玠から始たり、ルヌトの<html>芁玠に「ポップアップ」したす。 むベントリスナを远加する堎合、これはシステムの動䜜が予想されるずおりです。

質問番号4。 むベントの委任は、倚くのむンタラクティブな芁玠を持぀サむトのコヌドをどのように改善したすか


倚くの堎合、Webサむトは垞に倉化する動的な芁玠に満ちおいたす。 そのような芁玠も察話型である必芁がある堎合、ナヌザヌが芁玠ず察話するずきに発生するむベントを監芖する方法が必芁になりたす。 各芁玠に独自のむベントリスナヌが必芁な堎合、これによりコヌドが散らばり、ブラりザの負荷が増加したす。

むベント委任は、むベントバブリングメカニズムを䜿甚する手法です。 芪芁玠にリスナヌを远加するこずにより、開発者は自分の子孫のむベント凊理を蚭定できたす。

 parentEl.addEventListener('click', function(e) { if(e.target && e.target.nodeName == 'BUTTON') { //    } });

むベントリスナヌコヌルバック関数の内郚では、タヌゲットむベント芁玠はtargetパラメヌタヌで衚され、これを䜿甚しお远加のアクションを決定できたす。 たずえば、このパラメヌタヌdata属性には、オブゞェクトのプロパティにアクセスするための識別子をdataできたす。

質問番号5。 クロヌゞャヌずは䜕ですかたた、クロヌゞャヌはどのようにコヌドを敎理するのに圹立ちたすか


JavaScriptの関数は、「レキシカルスコヌプ」ず呌ばれるものを䜿甚したす。 これは、それらが含たれるスコヌプで定矩された倉数にアクセスできるこずを意味したすが、関数内で宣蚀された倉数は倖郚からアクセスできたせん。

 function outer() { let x = 'Web Designer'; function shout() { alert(`I love ${x}!`); } shout(); }

outer()関数を呌び出すず、「I love Web Designer」ずいうメッセヌゞが衚瀺されたすが、 shout()関数たたはouter()関数のouter() x倉数にアクセスしようずするず、䞡方ずも未定矩になりたす。 クロヌゞャは、関数ずその語圙環境の組み合わせです。 この䟋では、クロヌゞャはouter()関数です。

クロヌゞャヌは、1぀のクロヌゞャヌ内で宣蚀されたすべおが他のクロヌゞャヌに圱響を䞎えないため、コンポヌネントの倧きなセットを䜜成するずきに圹立ちたす。 クロヌゞャヌを䜿甚しお、Pythonなどの他のオブゞェクト指向蚀語で䜿甚されおいるものを思い起こさせる方法で、プラむベヌト関数ず倉数を䜜成できたす。 モゞュヌルモゞュヌルは、クロヌゞャヌを広範囲に䜿甚しお、モゞュヌルが盞互䜜甚する構造化された方法を提䟛したす。

質問番号6。 コヌドブロックの䞊郚にある「use strict」行の意味は䜕ですか


ES5では、strictモヌドず呌ばれるJavaScriptの特別なバヌゞョンに぀いお説明しおいたす。 厳栌モヌドでは、以前のバヌゞョンの蚀語のあいたいな構成䜓を䜿甚するず、予期しない動䜜が発生する代わりに゚ラヌが発生したす。

 function strictFunction() { 'use strict'; myVar = 4; //ReferenceError }

䞊蚘のコヌドスニペットでは、未宣蚀の倉数に倀を割り圓おようずしおいたす。 ストリクトモヌド以倖では、このようなコマンドを実行するず、倉数myVarがグロヌバルスコヌプに远加されmyVar 。これに十分な泚意を払わないず、スクリプトの機胜が完党に倉曎される可胜性がありたす。 厳栌モヌドでは、これにより゚ラヌメッセヌゞが衚瀺され、プログラムの誀動䜜を防ぐこずができたす。 ES2015モゞュヌルはデフォルトで厳密な厳密モヌドを䜿甚したすが、関数を䜿甚しお䜜成されたクロヌゞャヌでは、 'use strict'コマンドを関数レベルずファむルレベル党䜓で䜿甚できたす。

質問番号7。 JavaScriptに適甚される堎合、「倉数を䞊げる」ずいう甚語は䜕を意味したすか


JavaScriptの機胜の1぀は、JavaScriptで蚘述されたプログラムがコンパむルされおいない圢匏で配垃されるずいう事実です。 ブラりザは、「オンザフラむ」で蚀うようにスクリプトをコンパむルし、このプロセス䞭に、これらのスクリプトで宣蚀された関数ず倉数に぀いお「メモ」を取りたす。

コヌドを最初に衚瀺した埌、ブラりザヌは2番目のパスを実行したす。これは、プログラムの実行であり、関数ず倉数が適甚される堎所を既に認識しおいたす。 コヌドフラグメントが実行されるず、関数ず倉数の宣蚀がこのフラグメントの先頭に「䞊昇」したす。

 welcome("Matt"); //"Welcome, Matt." function welcome(name) { return `Welcome, ${name}.`; }

この䟋では、スクリプトの先頭に「䞊昇」するため、コヌドで宣蚀される前にwelcome()関数を䜿甚できたす。

質問番号8。 矢印関数は通垞の関数ずどのように違いたすか


ES2015は倚くの倉曎を導入したしたが、そのうちの1぀は矢印関数の導入でした。

 function CountUp() { this.x = 0; setInterval(() => console.log(++this.x), 1000); } var a = new CountUp();

矢印関数ず通垞の関数の䞻な違いは、それらがより短いずいう事実を芋おいない堎合でも、矢印関数はthis独自の倀を蚭定しないthisです。 代わりに、それらは含たれおいるthisブロックの倀を䜿甚したす。 䞊蚘の䟋では、 this.xにアクセスするず、1 this.xごずにthis.x数字が衚瀺されたす。 同様の状況で通垞の関数を䜿甚する堎合、倀はundefined 、 NaNの結論になりたす。 矢印関数の本䜓は戻り倀です。 これにより、プロミスで矢印関数を䜿甚するこずが特に䟿利になりたす。 通垞の関数は、矢印の関数ずは異なり、特定の倀を明瀺的に返す必芁がありたす。そうでundefined堎合は、 undefinedが自動的に返されたす。

質問番号9。 どのような状況でletおよびconstキヌワヌドを䜿甚する必芁がありたすか


ES2015のもう1぀の基本的な革新は、倉数を宣蚀する別の方法ずしおletおよびconstキヌワヌドを導入したこずです。 そのような倉数のスコヌプは、倉数が宣蚀されたブロックに制限されたす。 これにより、異なるコヌドブロックで䜜成された倉数がこれらのブロックの倖にあるものに圱響を䞎えないずいう確信が埗られたす。

 for(let x=1; x<=3; x++) { console.log(x); // 1, 2, 3} console.log(x); // "x is not defined"

プログラムの実行䞭に倉数の倀が倉わらない堎合は、 letではなくconstを䜿甚したす。 より正確に「定数」ず呌ばれるこのような倉数をオヌバヌラむドしようずするず、゚ラヌが生成されたす。 このアプロヌチでは、定数で蚘述された参照のオブゞェクトず配列の内郚コンテンツは倉曎できたすが、新しいオブゞェクトに眮き換えるこずはできたせん。

varキヌワヌドを䜿甚しお宣蚀された倉数ずは異なり、 letおよびconstを䜿甚しお宣蚀された倉数はconstれないため、初期化される前にアクセスできたせん。 コヌドブロックの先頭ず倉数が初期化される堎所の間のスペヌスは、「䞀時的なデッドゟヌン」ず呌ばれ、倚くの堎合、混乱の原因になりたす。

質問番号10。 関数型プログラミングずは䜕ですかその機胜は䜕ですか



ネット機胜

関数型プログラミングはプログラム開発ぞのアプロヌチであり、その本質は、アプリケヌションの状態を衚すデヌタが関数のみを䜿甚しお凊理されるこずです。 そのような関数が副䜜甚を匕き起こさない堎合、結果は扱いやすく理解しやすいコヌドになりたす。

通垞、JSプロゞェクトは、オブゞェクト指向プログラミングの原則を䜿甚しお構築されたす。 プログラムの珟圚の状態に関する情報はオブゞェクトに保存され、ペヌゞで䜕かが倉曎されるず、倉曎に関する情報がこれらのオブゞェクトに曞き蟌たれたす。

実際、関数型プログラミングは別の考え方です。 Fのような蚀語は、これらの原則を非垞に長い間䜿甚しおきたず蚀わなければなりたせん。 同時に、ES2015では、JSでの関数型プログラミングの可胜性を広げる重芁なメカニズムがいく぀か登堎したした。

Webプロゞェクトの開発時に関数型プログラミングの芏則に埓う堎合、すべおの操䜜はいわゆる「玔粋な」関数内で実行する必芁があるこずを考慮する必芁がありたす。 これらは、これらの関数の範囲倖にあるデヌタの圱響を受けない関数です。 ぀たり、同じデヌタがそのような関数を裏切る堎合、垞に同じ結果を返す必芁がありたす。

さらに、これは、たずえば、アプリケヌションの状態を衚すなど、関数の倖郚の特定のデヌタぞの共有アクセスを関数に持たせないこずを意味したす。 アプリケヌションが状態を倉曎する必芁がある堎合、パラメヌタずしお関数に枡す必芁がありたす。

最埌に、コヌドでは、既存の倀を倉曎しないようにする必芁がありたす。 たずえば、オブゞェクトの倉曎を䌎う操䜜を実行する堎合、倀が倉曎されたこれらのオブゞェクトのコピヌを返す必芁がありたす。 これは、゚ラヌやコヌドテストの耇雑化に぀ながる副䜜甚を取り陀くのに圹立ちたす。

質問11。 JavaScriptを䜿甚しおWebペヌゞのパフォヌマンスを向䞊させる方法


珟圚、ほずんどのWebブラりゞングはスマヌトフォンたたはタブレットから実行されおいたす。 ただし、誰もが最先端のデバむスを持っおいるわけではありたせん。 したがっお、ペヌゞがナヌザヌのアクションにどれだけ迅速に応答するかが非垞に重芁です。 サむトの䜜業における「ブレヌキ」は、クラむアントを倱う可胜性がありたす。 幞いなこずに、JavaScriptにはこれを回避するのに圹立぀ツヌルがありたす。

unnecessary䞍芁なスクロヌル効果を避ける


匕き裂かれたスクロヌルは、ペヌゞでいく぀かのプログラムアクションが実行されおいるこずを瀺す明確な兆候です。 堎合によっおは、ペヌゞ䞊にむベントリスナヌが存圚するため、ブラりザは匷制的に埅機したす。 そのため、 wheelやtouchmoveなどのむベントはスクロヌルをキャンセルできたす。その結果、暙準のスクロヌル動䜜が開始される前に、むベントが終了するたでペヌゞが匷制的に埅機されたす。

これにより、ペヌゞをスクロヌルするずきにゞャンプが発生し、速床が䞀定しなくなるため、ナヌザヌがペヌゞを操䜜する印象が悪くなりたす。

 document.addEventListener('touchmove', handler, {passive: true});

これを回避するには、むベントリスナヌを远加し、3番目のパラメヌタヌずしお、 passiveプロパティがtrue蚭定されたオブゞェクトを枡しtrue 。 このようなむベントを凊理するブラりザは、スクロヌルに圱響を䞎えないず芋なす堎合がありたす。その結果、ペヌゞのスクロヌルは䞍必芁な遅延なしに開始できたす。

3番目のパラメヌタヌは、叀いブラりザヌのuseCaptureオプションを眮き換えるため、 useCaptureアプロヌチたたはそのアプロヌチを適甚する前に、ブラりザヌがサポヌトするものを確認する必芁がありたす。 特定の領域ずナヌザヌずの察話を意図的に無効にするために、ほずんどのブラりザヌでは、CSSでtouch-action: none䜿甚できたす。

▍調敎むベント


スクロヌルや芁玠のサむズ倉曎などのむベントはできるだけ早く発生するため、すべおのリスナヌが関連デヌタを受信したす。 各むベントの凊理䞭にリ゜ヌスを倧量に消費する操䜜が実行されるず、すぐにペヌゞがフリヌズする可胜性がありたす。

 const resizeDebounce = debounce(() => { //       }, 200); window.addEventListener('resize', resizeDebounce);

むベントの「チャタリング」をなくすこずで、頻繁に発生するむベント凊理関数を呌び出す頻床を枛らすこずができたす。 このメカニズムの実装ず、さたざたなプロゞェクトで関数を呌び出す頻床は異なりたすが、たずえば、むベント凊理の頻床を1秒あたり5回に枛らすず、ペヌゞのパフォヌマンスが即座に向䞊するこずがわかりたす。

▍衚瀺ペヌゞ゚リア


スクロヌルむベントを䜿甚する䞀般的な方法は、特定のアむテムがペヌゞに衚瀺されるタむミングを怜出するこずです。 「バりンス」を排陀する手法を䜿甚しおも、 getBoundingClientRect()呌び出すには、ブラりザヌがペヌゞ党䜓のレむアりトを分析する必芁がありたす。 IntersectionObserverず呌ばれる新しいブラりザヌAPIがありたす。これは、それによっお監芖される芁玠の状態の倉化を報告し、衚瀺領域に入るか出るたびに特定の関数を呌び出したす。 無限スクロヌルのペヌゞの堎合、このAPIを䜿甚しお、廃止された芖芚芁玠を削陀たたは再利甚に適したものずしおマヌクできたす。

IntersectionObserver APIは、Safariを陀く最近のすべおのブラりザヌで䜿甚できたす。 同時に、ペヌゞ衚瀺領域を操䜜するための新しい方法論を䜿甚するこずず、芁玠の可芖性を決定するための叀いアプロヌチずの違いは非垞に顕著です。

resourceリ゜ヌスを集䞭的に䜿甚する操䜜を別々のスレッドに割り圓おる


倧きなデヌタセットを䜿甚する堎合、たたは画像などの倧きなファむルを凊理する堎合、JavaScriptがブラりザりィンドりをブロックする堎合がありたす。 デフォルトでは、すべおのタスクは単䞀のスレッドで実行されるため、このスレッドが過負荷になるず、アプリケヌションむンタヌフェむスはナヌザヌの圱響に応答しなくなりたす。

特定の操䜜を完了するのに時間がかかるこずがわかっおいる堎合は、Webワヌカヌに配眮するこずを怜蚎するずよいでしょう。 これは、別々のスレッドで実行されるスクリプトの名前です。これらのスクリプトがリ゜ヌスを倧量に消費する操䜜を実行しおも、Webアプリケヌションのナヌザヌむンタヌフェむスは匕き続き機胜したす。 このようなスクリプトは、特別なメッセヌゞング゚ンゞンを䜿甚しお盞互にデヌタを送信できたす。 WebワヌカヌはDOMおよびwindowオブゞェクトの䞀郚のプロパティにアクセスできたせん;メッセヌゞングメカニズムは、メむンストリヌムにデヌタを転送するためにも䜿甚され、むンタヌフェむスに圱響を䞎える可胜性がありたす。

質問番号12。 時間の経過ずずもに関連性を倱わないJSコヌドを蚘述する方法


JavaScriptの基本原則の1぀は、開発䞭に、実行可胜であれば、以前のバヌゞョン甚に蚘述されたコヌドを実行できないような倉曎を行わないこずです。 その結果、たずえば、今日開発されたほずんどすべおのコヌドは、Web開発の䞖界の倚様性を考慮しおも、10幎埌には機胜したす。

ただし、特定のコヌドが実行されるずいうこずは、時間の経過ずずもにその関連性が倱われないずいう意味ではありたせん。 ここで、今日曞いたものが数幎埌にどのように芋えるかに぀いお疑問に思う時が来たした。 将来のためにテストする準備ができおいるプログラムを䜜成できるようにするいく぀かの提案がありたす。

spaスパゲッティコヌドを避ける


特定のプロゞェクトでの䜜業の初期段階では、アむデアを魅力的に思えるかもしれたせん。いわば、コヌドを小さく独立した郚分に分割するこずなく「すべおを䞀緒に積み重ねる」こずです。 このアプロヌチでは、特定のコヌドで䜕が行われおいるのかを簡単に理解できたすが、これはプログラムの機胜が互いに密接に関連しおいるこずも意味したす。 そのため、プログラムのどこかで他の郚分に実装されおいるものが必芁な堎合、コヌドの察応するセクションがコピヌされ、新しいニヌズを考慮しお曞き換えられる可胜性がありたす。 , , , , , , -, .

, , , . , . , «», , , .

▍


, React Polymer, . .

, « »? , , . , , .

, , , , , JavaScript. . , , , .

, . , , , API, , , , Node.

▍


, , , . , , , , , , .

 let activeUsers = users.filter(user => user.active === true);

, , , . , , , - i j , .

, , . , . , ESLint, .

▍


, , . . , , , .

, , , . , , , .

, , , . , , , . , , , users , . , , , . , , . , - . — «» , .

▍ ,



Jest , ,

React , . , , , , . — , , , .

. Mocha Jest , . .

, . , , , .

, , . , . — .

▍



Babel

, — . , « », , , , .

, , Babel — , JavaScript . , JS.

ES2015 JS , , . — , . , ES2017, , , , . Babel, , , .

, JS , , , , , .

たずめ


JavaScript, - , , , , . , , , .

芪愛なる読者 , JS-, , , . -, ?

Source: https://habr.com/ru/post/J346022/

More articles:


All Articles