ホームページ  >  に質問  >  本文

javascript - オブジェクト データを DOM ノードに変換するために作成したコードを最適化するにはどうすればよいですか?

アイデアを簡単に紹介します。
オブジェクトに ajax を適用し、次に 子から親へ オブジェクトを順番に作成し、スタイルを設定し、レベルを追加します。
コードは次のようになります:

リーリー

こんなことばかり。 。 。最適化するにはどうすればよいですか?
ES6 のフロントエンドのサポートが理想的ではないため、文字列テンプレートが使用できず、フレームワークの追加も困難です。ハードウェアの場合はどうすればよいですか?
文字列を連結してから直接 innerHTML を使用する場合と比較して、このように記述する場合の欠点は何ですか?

三叔三叔2705日前893

全員に返信(3)返信します

  • 代言

    代言2017-06-12 09:30:43

    まず、JS人間がDOMを保守するために使用する【手続き型プログラミング】は、保守性の点でテンプレート型の【宣言型プログラミング】に比べて劣ります。 <p>xxx</p> 和一大坨 document.createElement('p')... の単純な行を考えてみましょう。保守性に大きな違いが生じます。

    それでは、ES6 やさまざまなフレームワークの構文糖を使用せずに、文字列テンプレートと同様の方法を使用してデータを HTML にバインドするにはどうすればよいでしょうか?これは、jQuery の作者がかつて推奨した解決策です:

    まず、HTMLで外部に卑猥な<script> 标签装模板,注意这个模板本身对 JS 并没有任何依赖,也可以把模板放在 <body>を作ることができます。

    リーリー

    データをレンダリングするときは、テンプレート内の HTML テキストを直接取り出し、JS を使用して定期的に置換します。

    リーリー

    私のこのブログを参照してください:
    http://ewind.us/2016/js-rende...

    もちろん、innerHTML を完全にリセットすると、パフォーマンスのリスクが伴います。ただし、データが完全に更新されている場合は、コードがネイティブ JS で記述されている場合でも、最終的な DOM 操作の数は実際には innerHTML を直接リセットする場合と同じになります。現時点ではいくつかのアイデアがあります:

    1. React はこの種の問題のために生まれました。 React を innerHTML として考えて、すべてを自由にリセットすれば、必要に応じて React が DOM の差分や更新を支援してくれると思いませんか。

    2. Vue は依存関係コレクションを使用して、変更された DOM の場所を直接見つけて、必要に応じて更新します。diff も使用せず、それがどの程度高度であるかはわかりません。

    3. ビジネスニーズを満たす diff アルゴリズム (最後にのみ挿入するなど) と DOM 操作を保守します。もしかしたらそれは新たなホイール誕生の序曲かも知れません(

    4. )

    返事
    0
  • 滿天的星座

    滿天的星座2017-06-12 09:30:43

    構造が複雑すぎて、洗練されておらず、純粋に物理的な抵抗があり、デバッグは単なる悪夢です。将来的にはコードのメンテナンスが多すぎるでしょう。
    JS ファイルを導入するだけのフロントエンド JS テンプレート エンジン (例: artTemplate) を使用することをお勧めします。

    返事
    0
  • 漂亮男人

    漂亮男人2017-06-12 09:30:43

    最も単純な利点: innerHTML より高速です。
    これらの構造を一度に数百個追加すると、明らかな速度の違いを体験できます

    返事
    0
  • キャンセル返事