JavaScript：フライとページの負荷でコンテンツを管理/追加するための最善のアプローチ

Question

オンザフライで追加され、ページの読み込み時にレンダリングされる必要があるコンテンツを管理する方が良い方法はどれですか。ここ

いくつかのオプション（パフォーマンスのために管理が容易と優れているかわからない）：

• は
• （また、ページのロード用）のみJavaScriptを使用してコンテンツをレンダリングし、ページの読み込みにテンプレートとして重複したマークアップをレンダリング飛行中にコンテンツを追加するときにfind replaceを実行します。たとえば、<div id={Id}>{Name}</div>
• 異なるアプローチですか？

多くの可動部品を備えた複雑なモジュールの場合、これをどのように処理するか。

Answer 1

node.jsを使用している場合http://socket.ioは命を救う人です。 node.jsを使用すると、サーバー側とクライアント側で実行可能な同じテンプレートを記述することもできます。その時点で、複製はほとんどなく、自由に何でも自由に行うことができます。

Answer 2

サーバー側のアーキテクチャによって異なります。単に、両方とjsをサポートしているテンプレートエンジンを見つけるだけです。その後

あなたの部分ビューのAPI（彼らはすべてのテンプレートエンジンとは異なる別々です）

サーバーとクライアント上の今、再使用、あなたの意見を一致させる部分図のボルト。

基本的に、javascriptとajaxでマークアップを強化して、部分的なビューを部分的に更新します。

もちろん、REST APIはデータをjsonとhtmlの両方として公開するため、サーバーから生データやレンダリングビューを簡単に取得できます。前述のNode.jsのよう

達成することは、この機能は非常に簡単になります;）私は何

Answer 3

は、DOM要素（http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototypeを作成するjQueryプラグインを使用している）

私は私が持っているこのサイトを、持っていますユーザーがFacebookで認証されると、ヘッダーを更新してアップロードフォームを作成します。 私はJavaScriptでこれをやっている、完全なページの更新を回避するために

var upload_form = $.FORM({ action: "main", method: "post", enctype: "multipart/form-data" }, 
    $.DIV({ className: "fields" }, 
      $.INPUT({ name: "title", value: "Titulo de la foto", className: "overlay", id: "name" }), 
      $.INPUT({ name: "location", value: "Lugar donde fue tomada", className: "overlay", id: "location" }), 

      $.INPUT({ type: "hidden", value: response.session.uid}), 
      $.INPUT({ type: "hidden", id: "username_input" }), 

      $.DIV({ className: "image_upload" }, 
       $.SPAN({}, 
         $.INPUT({ type: "file", name: "image", className: "overlay"}) 
         ) 
       ), 

      $.A({ href: "javascript:;", id: "submit" }, $.IMG({ src:"public/images/upload.jpg" })) 
     ) 
    ); 

var logged_header = $.SPAN({}, 
     $.A({ href: "javascript:;" }, 
      $.IMG({ src: "http://graph.facebook.com/" + response.session.uid + "/picture?type=square", 
       className: "picture", height: "20", align: "left" }) 
     ), 
     $.SPAN({ id:"username" }, "Cargando... "), 
     $.A({ id: "fb_logout" }, "(cerrar sesion)") 
    ); 

DOMの作成は非常にシンプルで簡単です。

$.ELEMENTNAME({ <json object with attributes> }, content); 

今upload_formとlogged_header HTMLが含まれています。 通知方法logged_headerは、ドキュメントに追加された後にいくつかの変数で更新されます。

 FB.Event.subscribe('auth.login', function(response) { 
     $("#login").html("").append(logged_header); 
     $("#upload .content").html("").append(upload_form); 

     $("#username").html(rows[0].name + " "); 
     $("#username_input").val(rows[0].name); 
    });