38

このマイクロテンプレートを読んだ後、死んだ記事です。私は興味を持ちました：

  1. サーバーでDOMを使用すると、テンプレートよりもクリーンで保守しやすいコードが得られるかどうか。
  2. テンプレートエンジンの代わりにjsdomを使用する方が効率的かどうか。
  3. jsdomを標準のMVCセットアップのビューに組み込む方法。

そして、一般的にどのような状況では、 EJSやjadeのようなテンプレートエンジンではなく、jsdomのようなサーバー側のDOM抽象化を使用する方が良いでしょう。

質問はnode.jsと他のSSJSに固有です

4

4 に答える 4

14

さて、私は実際に、週末にnode.jsで構築した小さなプロジェクトにJSDomが必要でした。そのため、サーバーでは、URLを受け入れて、指定されたURLからすべてのHTMLを取得して解析し、ユーザーがそのURLからサムネイルを選択できるように画像を表示する必要がありました。（Facebookの入力ボックスにリンクをドロップするようなものです）そこで、サーバー側でHTMLをフェッチできるRequestというモジュールを使用しました。しかし、そのHTMLが私のプログラムに到達したとき、クライアント側のjavascriptのようにそれをトラバースする方法がありませんでした。実際のDOMがなかったので、私は言うことができませんdocument.getElementById('someId')でした。したがって、JSDomは、返されたHTMLをトラバースできる「仮の」DOMを提供することで便利になりました。さて、私はまだサーバー側にいましたが、JSDOMはwindowブラウザのウィンドウオブジェクトに非常によく似たオブジェクトであり、返されたHTMLからDOMを作成しました。これで、サーバー上でも、を呼び出すことですべての画像を取得できましたwindow.$('img')。通常のように要素をターゲットにして解析できます。したがって、これはJSDomが解決策であることが判明した問題の1つにすぎませんが、驚くほどうまく機能しました。これがお役に立てば幸いです。

于 2011-05-23T20:03:54.723 に答える
13

  1. クライアント側のエンジニアと一致するその優れた抽象化は、DOMの構築と変更の方法を引き受けます。その点では、メンタルモデルが1つあるため、「よりクリーン」です。また、口ひげなどの「最も愚かな」テンプレートシステムの場合のように、他の点ではクリーンな宣言型マークアップの上に、テンプレート言語からの異種の構文の塊を混ぜる必要がないので、それも素晴らしいです。

  2. テンプレート作成にjsdomを使用する方が効率的だとは言えません。たとえば、「jsdomでのメモリリーク」をグーグルで見てみましょう。jsdomはradであり、サイトをクロールする週末のプロジェクトや、サーバーに関連しないタスクの実行などのタスクに非常に役立ちますが、高性能Webサーバーの観点からは遅いと思います。

  3. これを因数分解する方法は10億あります。「標準的な」方法として登場した方法はありません。私が見た1つの方法は、空の「テンプレート」、つまり何らかの方法でモデルを表すhtmlのブロックを送信し、それを使用してモデルからエンドビューを構築するブートストラップを行うことです。その記事から、例えば：

<li class="contact" id="contact-template">
    <span class="name"></span>
    <p class="title"></p>
</li>

これは、古典的な点での「ビュー」です。一般的なWebアプリケーションでは、次のようになります。

<li class="contact">
    <span class="name"><?= $name ?></span>
    <p class="title"><?= $title ?></p>
</li>

mvcを使用するには、上記のビューのセマンティクスとそれが表すモデルを漠然と認識しているコントローラーをセットアップします。このビューはDOMに解析され、お気に入りのセレクターエンジンを介してアクセスされます。これが変更を表すモデルごとに、変更イベントまたはコールバックを使用してビューを更新できます。例えば：

プロパティが変更されるたびに「model」が「change」イベントを発生させると想像してみましょう。

controller = new Controller({ 
    view: $('#contact-template').clone(), // Assume jquery or whatever
    model: aContact 
});

// Assume some initialization that sets the view up for the first time
// and appends it to the appropriate place. A la:
// this.view.find('.name').text(model.name);
// this.view.find('.title').text(model.title);
// this.view.appendTo('#contacts')

controller.on('model.name.change', function(name){
    this.view.find('.name').text(name);
});

これらは、WeldやBackbone.jsのようなシステムがあなたのために行うことです。それらはすべて、この作業が行われている場所（サーバー側、クライアント側）、使用しているフレームワーク（jquery、mootoolsなど）、および変更がどのように配布されているか（REST、ソケット）についてさまざまな程度の仮定を持っています。 ioなど）。

編集

jsdomで実行できるいくつかの本当に便利なことは、統合テストとスパイダリングを中心に展開します。

個人的には、tobiのアプローチを採用したプロジェクトを見たいのですが、https：//github.com/LearnBoost/sodaのようなものの上にマッピングして、セレンなしでクラウドベースのセレンテストを実行できるようにします（imo以降、吸う）。

于 2011-05-23T22:12:34.580 に答える
1

いくつか頭に浮かぶ：

  1. サーバーとブラウザー間でのビュー/コントローラーの共有
  2. データマイニング/クロール/処理
  3. AJAX/リアルタイムのもので使用されるHTMLのフラグメントの変換
  4. テンプレートタグを回避することによるロジックとコンテンツの絶対的な分離

そしてあなたの質問に答えるために：

  1. 多分。多くのことがコード品質に影響を与えますが、それは正しい方向への一歩です
  2. いいえ、テンプレートをプリコンパイルできるため、テンプレートエンジンは常に高速になります
  3. これはおそらく新しい質問を正当化するのでしょうか？
于 2011-05-28T04:05:16.380 に答える
1

あなたの質問のポイント2は、このテンプレートテストケースで答えることができます。

http://jsperf.com/dom-vs-innerhtml-based-templating/300にアクセスします

  • 「テストの実行」ボタンをクリックします。

  • しばらくお待ちください。溶接と他の多くのテンプレートエンジンを比較し、現在のベンチマークを提供します...

于 2014-04-01T20:02:19.910 に答える