4

今コミュニティウィキ！

最初に明確にしておきたいのは、これはサーバー側のJavascriptやJavascriptサーバー側の実行に関する質問ではありません。これは、サーバー側のコードからのJavascriptコード（クライアント側で実行される）のレンダリングに関する質問です。

そうは言っても、たとえば以下のASP.netコードを見てください。

hlRemoveCategory.Attributes.Add("onclick", "return confirm('Are you sure you want to delete this?');")

onclickこれは、サーバー側でクライアント側のイベントを規定しています。

クライアント側でJavascriptを書くのとは反対に：

$('a[rel=remove]').bind('click', function(event) {
    return confirm('Are you sure you want to delete this?');
}

今私が聞きたい質問は次のとおりです：サーバー側のコードからjavascriptをレンダリングすることの利点は何ですか？またはその逆？

私は個人的に、次の理由から、クライアント側のUI/動作をHTML要素に接続する2番目の方法を好みます。

  • サーバー側は、データ検証、イベント委任など、すでに必要なことをすべて実行します。と
  • サーバー側がイベントと見なすのは、必ずしもクライアント側のプロセスと同じではありません。つまり、クライアント側にはさらに多くのイベントがあります（カスタムイベントを見てください）。と
  • イベント中にクライアント側とサーバー側で発生することは、完全に無関係であり、切り離されている可能性があります。と
  • クライアント側で何が起こってもクライアント側で起こるので、サーバーが知る必要はありません。サーバーは、与えられたものを処理して実行する必要があります。プロセスがどのように実現するかは、クライアント側のイベントが発生した場合に決定するのは実際には彼ら次第ではありません。などなど。

これらは明らかに私の考えです。他の人がどう思うか、そしてこのトピックについて何か議論があったかどうか知りたいです。

この議論から分岐するトピックは、次のように到達できます。

  • コード管理：サーバー側からすべてをレンダリングする方が簡単ですか？
  • 関心の分離：クライアント側のロジックをサーバー側のロジックに分離すると簡単になりますか？
  • 効率：コーディングと実行の両方の点でどちらがより効率的ですか？

一日の終わりに、私は自分のチームを2番目のアプローチに向けて動かそうとしています。このチームには、この変更を恐れている老人がたくさんいます。私は彼らに正しい事実と統計を納得させたいだけです。

あなたの考えを聞かせてください。

UPDATE1：この投稿に参加した私たち全員が共通の考えを持っているようです。同じように考える人がいることを知っておくとよいでしょう。さあ、みんなを説得しましょう;）みんなありがとう。

4

5 に答える 5

3

2 番目の例は、最初の例よりもはるかに優れています。Javascript はビヘイビア レイヤーであり、セマンティック マークアップ (コンテンツ) および CSS (プレゼンテーション) から分離する必要があります。これがより優れたアーキテクチャである理由はいくつかあります。

  • 漸進的な強化を促進します。おっしゃったように、バックエンド コードは JS がなくても正しく動作するはずです。クライアントが JS を利用できるとは限りません。このように、JS なしで一度ビルドすると、JS を使用するユーザーのエクスペリエンスを向上させることができます (たとえば、クライアント側の検証とサーバー側の検証を追加して、クライアントが即座にフィードバックを取得できるようにすることによって)。
  • よりクリーンなマークアップ。通常、ダウンロード サイズが縮小されます。各要素のハンドラーに対してページ間でキャッシュおよび共有できる個別の JS ファイル内の 1 つの再利用可能なセレクター。
  • すべての JS を 1 か所で再利用できます。たとえば、コードがポップアップ ウィンドウを開いていて、ウィンドウのサイズを変更することにした場合、JS ファイルのコードで一度変更するのではなく、個々のインライン ハンドラごとに変更する必要があります。

他にも多くの議論と理由がありますが、それらはあなたを始めるのに役立つはずです...

また、あなたの例から、コンテンツを削除できる通常のリンクがドキュメントにあるようです。これも悪い習慣になります。コンテンツの削除または更新は、GET ではなく POST リクエストで行う必要があります。したがって、フォームを送信した結果である必要があります。そうしないと、たとえば、Googlebot がページをクロールするだけで誤ってすべてのコンテンツを削除する可能性があります (検索エンジン ロボットは JS を実行しないため、アラートは役に立ちません)。

于 2010-05-17T07:27:21.083 に答える
3

私が前もって考えることができる2つの最大の違いは次のとおりです。

  • JavaScriptが別のjsファイルにあった場合に得られるクライアント側のキャッシュが失われます
  • JavaScript を変更する必要がある場合は、再コンパイルする必要があります (製品をリリースした後に何が起こるかを推定してください: 再コンパイルする必要がある場合は、変更された js ファイルだけでなく、バ​​イナリを再配布する必要があります)。
  • JavaScript が別のファイルにある場合は、VS デバッガーを使用する方が簡単です。そのファイルにブレークポイントを設定するだけです。コードサーバー側を生成している場合は、実行中のドキュメント機能を使用し、生成されたコードを見つけてブレークポイントを追加する必要があります。そのブレークポイントは、再起動するたびに手動で追加する必要があります-アプリを実行します。それに続いて、コードが別のファイルにある場合は、javascript コードを微調整し、ブラウザー ページを F5 キーで押して、デバッガーを停止して再起動することなくデバッグを続けることができます。

サーバーから js コードを挿入する必要がある場合があることに注意してください。たとえば、コードの大部分が別の js ファイルにあり、そのコードを操作するためにページにコントロール ID を挿入する必要がある場合などです。可能であれば、そのような状況を避けるようにしてください。

于 2010-05-17T07:29:35.220 に答える
1

何をすべきかはすでにわかっているようです。サーバー側でレンダリングするのは悪い考えです。

あなたがJavascriptであるという単純な理由は、サーバー側のページと個別のJavascriptファイルの両方に存在します（Javascriptをまったく使用していると仮定します）。すべてがどこにでもある場合、問題を修正するのはデバッグの悪夢になる可能性があります。

サーバー側のスクリプトが生成するもの以外に他の Javascript を使用していなければ、おそらく問題なく扱いやすいでしょう (目立たない動きが言っていることは忘れてください)。

次に、ページに 100 個のリンクがある場合、同じコードを 100 か所で繰り返すことになります。繰り返しは、メンテナンスとデバッグのもう 1 つの悪夢です。1 つのイベント ハンドラーと 1 つの属性を使用して、すべてのページのすべてのリンクを処理できます。それは、二の足を踏む必要さえありません。

<Rant>

HTML と Javascript、さらには CSS を分離するのは簡単ではありません。特に AJAX や UI の優れた点が必要な場合はなおさらです。完全に分離するには、すべてのフロントエンド コードがJavascript を使用してプログラムによってクライアント側で生成されるデスクトップ アプリケーション モデルに移行する必要があり、サーバーとのすべての対話は純粋なデータ交換に限定されます。

ほとんどのアップストリーム通信 (クライアントからサーバーへ) は、​​すでに単なるデータ交換ですが、ダウンストリーム通信ではありません。多くのサーバー側スクリプトは HTML を生成し、それをデータとマージして吐き出します。サーバーが HTML ビューを生成するコマンドを実行している限り、これは問題ありません。しかし、派手な Javascript が搭載され、テーブルに行を追加し始め、既存の HTML 構造を正確に複製することでコメントに div が追加されると、マークアップが生成される 2 つのポイントが作成されます。

$(".comments").append($("<div>", {
    "id": "123",
    "class": "comment",
    "html": "I would argue this is still bad practice..."
}));

これはそれほど大きな悪夢ではないかもしれませんが (規模にもよりますが)、深刻な問題になる可能性もあります。ここで、コメントの構造を変更する場合、コンテンツが最初に生成されるサーバー側のスクリプトとテンプレートと、ページの読み込み後に動的にコメントを追加する Javascript 側の 2 つの場所で変更を行う必要があります。

2 番目の例は、ドラッグ アンド ドラッグを使用するアプリケーションに関するものです。ページ内で div をドラッグできる場合は、通常のページ フローから離して、正確な座標で絶対的または相対的に配置する必要があります。考えられるすべての座標に対して事前にクラスを作成することはできないため (それを試みるのは愚かなことです)、基本的に要素に直接スタイルを挿入します。HTML は次のようになります。

<div style="position: absolute; top: 100px; left: 250px;">..</div>

美しいセマンティック ページを台無しにしてしまいましたが、やらなければなりませんでした。

</Rant>

セマンティックと行動の分離は別として、基本的には繰り返しに要約されると思います。コードを不必要に繰り返していますか。同じロジックを処理する複数のレイヤーです。すべてを単一のレイヤーに押し込むか、すべての繰り返しを減らすことは可能ですか?

于 2010-05-17T07:57:47.987 に答える
0

あなたと質問に答えている他の人々は、サーバー側のコードが固有のイベント属性をドキュメントに吐き出させないほうがよい理由をすでに挙げています。

コインの裏側は、そうすることは（少なくとも短期的には）迅速かつ簡単だということです。

IMO、これはアプローチの短所を上回るほどではありませんが、それが理由です。

于 2010-05-17T08:02:13.630 に答える
-1

あなたの例のコードでは、それは本当に重要ではありません。このコードは、サーバー側でのみ利用可能な情報を使用していないため、クライアント側のコードでイベントをバインドするのは簡単です。

サーバー側で利用可能な情報を使用して、イベントを追加するかどうかを決定したり、イベントのコードを作成したりする場合があります。次に例を示します。

if (categoryCanBeDeleted) {
  hlRemoveCategory.Attributes.Add(
    "onclick",
    "return confirm('Are you sure you want to delete the " + categoryType + "?');"
  );
}

クライアント側でこれを行う場合は、クライアント側のコードからもアクセスできるように、何らかの方法でこの情報をページに配置する必要があります。

于 2010-05-17T07:29:17.203 に答える