简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - オブジェクト データを DOM ノードに変換するために作成したコードを最適化するにはどうすればよいですか?
三叔
三叔 2017-06-12 09:28:43
0
3
892

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

リーリー

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

三叔
三叔

全員に返信(3)
代言
代言2017-06-12 09:30:43 3棟

まず、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 2棟

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

いいねを押す +0
返信を追加
漂亮男人
漂亮男人2017-06-12 09:30:43 1棟

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

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！