TIL day 11
13058 ワード
個人的な問題を解決することから成長しましょう.
🍑JSファイルの分割
1号htmlファイルのonclickは、2つのJSファイルでイベント処理関数として処理できます. の利点は、htmlファイルの可読性を向上させ、様々な関数および変数を維持または再使用できることである.また,Webブラウザでキャッシュされるため,1回目のロード時にのみダウンロードできるため,パフォーマンスの向上につながる.(静的ソース特性)
この点を理解するには、Webブラウザがhtmlファイルを読み込むプロセスを理解する必要があります.まずデフォルトでは、ブラウザは同期してパケット化し、htmlファイルをパケット化する際に 位置 head、身体上部 に位置するボクシング中に一時停止し、script.jsファイルの実行が完了したら、残りのパーティションを続行します.
jsファイルでbodyタグを使用中にエラーが発生しました. の車体最下端に位置する .のすべてのタグの割り当てが完了すると、タグを正常にロードおよび使用できます.
しかし、ページがjsに依存している場合、ページが実行される前にページが真実ではない可能性があります. 、その他の状況 asyncキーワード を使用 asyncscriptに遭遇した場合は、スクリプトファイルを非同期で保存しながらパーティション化を続行し、後で実行する場合はパーティション化を停止して実行し、完了した場合は を続行します.と同様に、パケット化されていないタグを使用するとエラーが発生し、jsに依存するタグはダウンロード中に非常に悪いように見えます. とは対照的に、jsに依存するタグが割り当てられるとjsファイルが実行される場合、UXの観点からかなりの利点が得られる. deferキーワード を使用 deferscriptに遭遇した場合、jsファイルは、配布が完了するまで配布を続行します.
スクリーン分割は停止しないため、スクリーンのロード速度は速いが、jsに依存するタグは真実ではないように見える. パケットダウンロードで、パケットが完了すると実行され、タグを使用してもエラーは発生しません. 🍑 import & export
外部で使用する関数または変数の前にexportキーワードを付けると、他のファイル(html、js)で使用できます.(以下の例はESモジュールにより作成する) エクスポートする関数または変数の前にexportキーを付けると、import側に{}を付けてを使用します. export defaultとしてエクスポートされた場合、 は使用できません.の複数の関数は,変数の導出時に{}で囲み,importも構造分解割当てとして を用いる. as「文字列」を使用するか、エクスポート時に名前を変更できます. から他のファイルからexportにエクスポートされたファイルを使用するには、importを追加する必要があります. import「使用する名前」from「パス」; htmlファイルのscriptタグとして使用するには、type=「module」を指定する必要があります. モジュールは、すべてのスクリプトのロード後に実行(deferオプションの自動追加) として指定されます.
🍑JSファイルの分割 <!-- 1 -->
<body>
<button id='btn' onclick='alert("HI")'>btn</button>
<script src='js파일 경로'></script>
</body>
// 2
document.querySelector('#btn').addEventListener('click', () => {
alert('HI');
}
<!-- 1 -->
<body>
<button id='btn' onclick='alert("HI")'>btn</button>
<script src='js파일 경로'></script>
</body>// 2
document.querySelector('#btn').addEventListener('click', () => {
alert('HI');
}🍉どこに挿入しますか?
この点を理解するには、Webブラウザがhtmlファイルを読み込むプロセスを理解する必要があります.
<script>に遭遇すると、パケット化を停止してJSリソース受信を要求する.したがって、<script>ファイルの場所が重要です.<head>
<script src='script.js'></script>
</head>
<body>
<script src='script.js'></script>
...
</body>jsファイルでbodyタグを使用中にエラーが発生しました.
<body>
...
<script src='script.js'></script>
</body>しかし、ページがjsに依存している場合、ページが実行される前にページが真実ではない可能性があります.
<head>
<script async src='script.js'></script>
</head>
<body>
<script async src='script.js'></script>
...
</body> <head>
<script defer src='script.js'></script>
</head>スクリーン分割は停止しないため、スクリーンのロード速度は速いが、jsに依存するタグは真実ではないように見える.
🍑 import & export const a = () => {...}
export function b() {...} // 1
export default a; // 2
export { a, b as bbbbb}; // 3, 4
import { b } from '파일명.js' // 1
import a from '파일명.js' // 2
import { a, b } from '파일명.js' // 3
import a as abc from '파일명.js' // 4
🍉 export
const a = () => {...}
export function b() {...} // 1
export default a; // 2
export { a, b as bbbbb}; // 3, 4import { b } from '파일명.js' // 1
import a from '파일명.js' // 2
import { a, b } from '파일명.js' // 3
import a as abc from '파일명.js' // 4🍉 import
<script type='module' src='script.js'></script>Reference
この問題について(TIL day 11), 我々は、より多くの情報をここで見つけました https://velog.io/@circlewee/Elice-SW-engineer-TIL-day-11テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol