TIL Day-13

VanillaJSによるJavaScriptの基本機能の強化

素子で考える

UIをコンポーネントで表現する方法、
コンポーネント単位の抽象UIの要素
凝集力を持って開発する
素子で考える
To doリストを作成する場合は、Header TodoForm TodoList Appこれにより4つの素子が考えられる.
独立して使用でき、繰り返し使用できます.
UIを宣言的に表すために、表現部分を要素単位として抽象化する
各構成部品の階層
App HeaderTodoFormTodoList
構成部品間の依存性
   ↗   Header
App ➡   TodoForm
   ↘   TodoList
Appと呼ばれるコンポーネントは、3つのコンポーネントを制御します.
ヘッド、TodoForm、odoListそれぞれ独立
再利用可能

preventDefault()について

function TodoForm({ $target }) {
   const $form = document.createElement('form')

   $target.appendChild($form)

   this.render = () => {
       $form.innerHTML = `
           <input type="text" name="todo" />
           <button>Add</button>
       `

       $form.addEventListener('submit', e => {
           e.preventDefault()
       })
   }
   this.render()
}

以上のコードは、TodoListの作成に必要なTodoFormです.jsの一部です.

ここでAddをクリックします.

ページがリフレッシュされるとurlが変更されます.
でも.

$form.addEventListener('submit', e => {
            e.preventDefault()
        })

このコードを追加すると、

urlは何も変化しません.
ここで、今日初めて勉強したe.preventDefault()は、ラベルの基本動作を閉じる方法です.
たとえば、タグでhrefリンクへの移動を閉じることができます.
formタグでは、submitをクリックするとページがリフレッシュされるurlアクションを閉じます.
類似事件を阻止する方法をもっと見つけた.

preventDefault():現在のイベントのデフォルトの動作を停止

stopPropagation():現在のイベントの上流への伝播を阻止

stopImmediatePropagation():親および現在のレベルの他のイベントに影響を与えないように、現在のイベントを停止します.

return false:第4の方法は、上記の3つの方法とは少し異なる.jQueryを使用するのは、上記の2つの操作を実行するのと同じであり、jQueryを使用するのとpreventDefault()を使用するのと同じではありません.

このように整理してもいいです.

一日の終わり

🖤 初めてのヴァニラJSは思ったより面白かった!
🖤 重要なのは、各機能の各コンポーネントにコードを書き、独立して再利用することです.
🖤 2週目よりも3週目のTILが先になるかもしれません.😅