filter関数を使用してminishop(2)を実現する
14484 ワード
0.リンク
https://kimmsoll.github.io/minishop-js/
1.コードの修正
1.委任イベントによる変更
// button들의 부모인 nav에 eventListener를 등록한다.
const buttons = document.querySelector("nav");
const setEventListener = (items) => {
// 로고 누르면 모든 옷 출력
logo.addEventListener("click", (event) => {displayItems(items)});
// 버튼에 맞게 필터링 되어 출력
buttons.addEventListener("click", (event) => {
displayItems(items.filter((item) => item[event.target.dataset.key] === event.target.dataset.value));
})
};
2.重複を解消するための変数を作成し、ボタンの空白以外の条件を追加し、onClick関数を個別に作成する
const onClick = (event, items) => {
const dataset = event.target.dataset;
const key = dataset.key;
const value = dataset.value;
if(key === undefined || value === undefined){
event.preventDefault();
} else {
displayItems(items.filter((item) => item[key] === value));
}
}
const setEventListener = (items) => {
logo.addEventListener("click", () => displayItems(items));
buttons.addEventListener("click", (event) => onClick(event, items));
};
2.学習内容
(1)委任イベント
addEventListenerのパラメータ
// item 전달 예시
const onClick = (item) => console.log(item);
buttons.addEventListener("click", () => onClick(item));
// item, event 전달 예시
const onClick = (event, item) => console.log(item[event.target.dataset.key]);
buttons.addEventListener("click", (event) => onClick(event, item));
(2) visibility / display
paintでは、コンポーネントは生成されますが、レイアウトは生成されません.
paint,composition,layoutが発生します.最終的には、より良い可視性が保証されます.
(3)マウント順
注)https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path
DOM -> CSSOM -> RenderTree -> layout
1.DOMツリーに変換
htmlファイルを分析して作成します.DOMはjsによって変更される可能性があります.
2.CSSOMの実施
造形DOM用のすべてのCSS情報を含む.
3.RenderTreeの作成
DOMとCSSを組み合わせて、ユーザーが見たコンテンツをRenderTreeとして作成します.
4.layout:寸法を計算してレイアウトを整理するには
5.paint:PSを考慮してレイヤーを分割するには
6.composition:レイヤー順にブラウザに表示するには
3. PWA
注)https://www.youtube.com/watch?v=FEBkne7Nyu4
https://github.com/pwa-builder/pwabuilder-web/blob/V2/src/assets/next-steps.md
PWAの作成手順の概要
ポートを検証すると、端末は
~/Downloads/ngrok http 포트번호
コマンドでhttpsのurlを受信することができる.PWABuilder ⇢ https://www.pwabuilder.com/
最初はそうだった適合度0点
残りの入力が必要な項目を入力し、ファイルをダウンロードします.
<link rel="manifest" href="manifest.json" />
// head 마지막에 삽입
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
const el = document.createElement('pwa-update');
document.body.appendChild(el);
</script>
4.感じ
基本的に加入すべきものを加え、一定の点数を得て生成に成功しましたが、本当のユーザーが何を必要としているのか、UIをどのように実現するか、本質は見逃せません!
Reference
この問題について(filter関数を使用してminishop(2)を実現する), 我々は、より多くの情報をここで見つけました https://velog.io/@kgorae/filter-함수로-minishop-구현하기-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol