HTMLはシリアライズされたオブジェクトグラフです

9284 ワード
dom html テキストリンク
長い間、私はちょうどどのように印象的で強力なHTMLをはっきりさせるのに苦労しました、そして、それが若干のGargantuanアプリ開発プロセス/フレームワークのまさに「構築目標」として扱われるのを見るために、それがどれくらい私を悲しませてください.このようにして、"div tagスープ"となります.

それから、それはついに私の上で起こりました.切断は、実際にHTMLが適切なものを記述していないという事実から生じる.したがって、一部の人々は全くHTMLブラウザのランタイムとの関係の完全な性質を全く把握することはありません.
ブラウザがWebページをロードするときに起こることのごく短いバージョンは以下の通りです.
  • これは、HTMLの生テキストを読み込みます.
  • これは、トークンのシリーズにHTMLを解析します.
  • それらのトークンを解析し、ツリー構造内のノードに変換する.
  • ドキュメントオブジェクトモデル(DOM)は、それからその木から造られて、ウェブページランタイム(別名JavaScript)にさらされます.
    • ちょっとDOMについて話しましょう.DOMは文字通り特殊な関係を持つオブジェクトの木です.ルートオブジェクト以外のオブジェクトはすべて親オブジェクトを持ちます.オブジェクトには子供がいます.多くのオブジェクトは片側または他(またはその両方)で兄弟を持っています.
    我々が真のオブジェクト指向プログラミング(OOP)概念をここで話していることを心に留めてください.DOMのそれらのオブジェクトはJavaScriptを通して内省と突然変異に利用できます.一般的にはHTMLElement . 例えば、<p> タグは、HTMLParagraphElement クラス.カスタム要素specのおかげで、独自のサブクラスを書く能力があります(!!)of HTMLElement . 例えば、<my-fancy-tag> タグはカスタムクラスのオブジェクトで表現できますMyFancyTag .
    このすべてを考えると、私たちは急速に、それが生成される方法に関係なくHTMLが常に「オブジェクトグラフ」として終わるという認識に来ます.そして、この真実を知って、私たちは実際に生計を作成することができます発見、“HTML”ドキュメントを宣言するのは、宣言的なマークアップ構文ではなく、命令のJavaScriptステートメントを使用します.
    // Create a brand-new HTML document
const doc = document.implementation.createHTMLDocument("New Document")

// Create a new paragraph element
const p = doc.createElement("p")
p.textContent = "This is a new paragraph."

// Add the paragraph to the body of the page
doc.body.appendChild(p)

p.classList.add("text-center") // later mutation

// Let's see what it looks like as HTML!
console.log(new XMLSerializer().serializeToString(doc))
    単純なWebページを表示するには、ネットワーク上に大きな命令的(おそらく安全ではない)コードブロックを送信したくないので、代わりにHTMLを待ちます.その代わりに、次のように書きます.
    <html>
  <head>
    <title>New Document</title>
  </head>
  <body>
    <p class="text-center">This is a new paragraph.</p>
  </body>
</html>
    結局、結果は全く同じです.それはあなたがそれを得ることが不可欠であるので、私はあなたのためにこれを繰り返してみましょう.一旦ウェブページがロードされて、ブラウザーによってレンダリングされるならば、ページのための「ソースコード」が(JavaScript DOM声明によって)命令的に書かれたか、宣言的に(ハイパーテキストマークアップ言語を経て)重要ではないかどうか.いずれにせよ、あなたは特異な結果を得る:私たちがDOMと呼ぶオブジェクトグラフ.
    なぜこれはとても重要なので、悲劇的に誤解ですか?なぜなら、HTMLがある意味で本物のプログラミング言語であるという事実に注目し始めると、それはシリアル化されたオブジェクトグラフであり、その後、ブラウザによって逆シリアル化されたプログラムになります.
    JavaScriptで「divスープ」を必死に書く勇気があります.あなたは何千ものラインで終わるでしょうdocument.createElement("div") and el.classList.add("hj09g872") と他の不可解なgoobledygook.正しい心の誰もこのように実際にソフトウェアプログラムを書くでしょう.それはひどいOOPです、そして、それはunmaintainableです.
    しかし、人々は他のどこかで起こっているいくつかのファンシーパンツのソフトウェア開発プロセスのためにそれをダンピンググラウンドとして扱うことによって、HTMLとDOMの権利をそれに沿って低下させることを許容することも望ましい.あなたは、HTMLペイロードとそれが生成する逆シリアル化されたオブジェクトグラフで終わります.
    私の論文はHTMLを書くための最良の方法です.あなたがそうするなら、命令コードを書く方法を書くことです.たとえば、私がヘッダー、本体、フッターを使ってウェブページにカードを追加する場合、このようなHTMLを書きます.
    <my-card type="standout">
  <header slot="header">
    <h3>I'm a Card Header</h3>
  </header>

  <p>I'm in the body of the card.</p>

  <footer slot="footer">
    <button type="button">Action Button</button>
  </footer>
</my-card>
    これはまさに私がコードを命令的に書く方法です.JavaScript Iのサブクラスの使用HTMLElement ASMyCard , そして、それがDOMの中で接続で実行する必要があるどんな論理も書きます.それから、ウェブページのために、私はaを例示しますMyCard 要素として、適切な意味要素を使用して、そのオブジェクトクラスの対応する部分に対して適切に対応するHTMLHeadingElement , HTMLButtonElement , などMyCard , I’d use SlCard そして、私自身のトラブルの全体の多くを保存します.😉)
    私は、理想的な世界では、Webブラウザによってロードされた生のHTMLを読んで、そのシリアライズされたオブジェクトグラフを敏感にOOPのコードパスのシーケンスに精神的に逆にすることができなければなりません.残念ながら、それは多くのウェブサイトの場合ではありません.気まぐれでは、“ビューのソース”を選択することがあります古い時代のようにすぐにそれを後悔してあなたの眼球はどのように全くマークアップのために出血し始めている.
    私がローカルトランジット局のウェブサイトを引っ張った無作為の例は、ここにあります:
    <div class="menu-item-content drawer-content js-measure" role="group" aria-hidden="true">
  <ul class="wrapper">
    <div class="wrapper">
      <div class="l-drawer-howto l-drawer-group slice">
        <div class="slice-item slice-item-double l-drawer-grouppushhigh">
          <h4 class="hide">Modes</h4>
            <section class="l-modesbar l-modesbar-clear">
              <div class="l-modesbar-main">
                <ul class="wrapper wrapper-90 slice slice-responsive">
                  <li class="slice-item">
    見ましょう:そこに潜んでいる本物の意味内容の1つの部分があります...見出しラベルされたモード...実際に隠されている?(多分スクリーンリーダーのことでしょうか)残りは誰か知っている!多分、ぎこちない日に悲しい必要な必要条件は、CSSの腕前で前方への主要な飛躍に感謝します.
    そして、これは全体のウェブページの1つの小さい部分です!
    これらのタグのすべての1つはDOMのオブジェクトとして終了します.
    これらのタグのすべては、潜在的に無駄なメモリとリソースをコンピュータ上で実行されます.
    これらのタグのほとんどすべてが、それが表現することになっているコンテンツのオリジナルの構造、目的、および意味を曖昧にしています
    これはウェブ上で書いたり消費したいHTMLではありません.
    なぜ我々はそれを行うのですか?それは無知ですか?悪いツーリング?現代のCSSが視覚的レイアウトのために何をすることができるかについての知識の不足?HTML実際にISに対する敬意の欠如シリアル化されたオブジェクトグラフ?厳しい締め切りと小さな予算?
    それが何であれ、我々はもっとうまくできる.フレームワークはより良いことができます.工具加工はよりよい“ベストプラクティス”より良い行うことができます.(私はあなたを探しています.
    HTMLをビルドプロセスのダンプグラウンドとして使用します.HTMLは、あなたの実際のJavaScript +コードとして慎重で、エレガントで、維持可能なOOP原則とソフトウェアパターンにふさわしいです.より良い.
    P . S .私は完全に“私は私のrepoのソースコードについて気にして、私たちがブラウザに出荷することができます完全に難読化/ミニ化することができますので、ユーザーはそれがどのように見えるかについて気にしていない/どのようなパフォーマー/何であれ”引数は完全に間違っている.あなた自身の研究をしなさい!😅
    Redux
    システムレベルとパフォーマンスの向上