JavascriptとHTMLを分離する良い方法をお探しですか？

Question

jqueryで作業を開始したばかりなので、どうかしてください。私は今何を信じているか説明します。あなたの考えを教えてください。

まず、サーバーからのhtml出力は、主にjsを持たないものや、ブラウザのバグがあるものと思われます。そうすれば、私が望むすべての人にページがうまくいくでしょう。

次に、jqueryにはページを変更するために使用するデータとテンプレートが隠されているはずです。

私はテンプレートをにする必要がありますどのような形式を知らない。ひとつのアイデアは、ただこれは私が考えるが、私は私の疑問を持って完璧になるこの

<div id="checkbox-template" class="templatedefinition" style="visibility:hidden"> 
<input type="checkbox"><label></label> 
</div> 

ようにそれを作ることです。もう一つのアイデアは、使用することです

$(document.createElement()) 

そして、データを扱ういくつかのオプションがあります。私はこのような単純な何かしようとしました：

var fruits= new Array(
    // id - Label - info 
    new Array("orange","Orange","some info"), 
    new Array("apple","Apple","some info"), 
    new Array("banana","Banana","some info") 
    ); 

をそして今、私は果物のチェックボックスを作成し、元のページを変更する準備ができています。しかし、このようなことを私のすべてのソリューションでやってみる前に、このようなことがあれば分かります。

Answer 1

最初に、あなたの質問に固くて速いルールはなく、特定の状況のた​​めの個人的な好みに声を掛けています。

まず私は、サーバーからのHTML出力がまたはブラウザのバグがあるかどうJSを持っていないもののために主に であるべきだと思う：ここに沿ってあなたを助けるためにいくつかの考慮事項があります。そうすれば、 ページは私が望むすべての人に役立ちます。

あなたのウェブサイトに「アクセシビリティ」増やすための戦略である「Progressive enhancement」について話しています。そのためには、Javascriptを追加する前にJavascriptを有効にしていない人にも効果的なユーザーエクスペリエンスを計画して開発し、Javascriptを有効にしているユーザーのためにその経験を強化します。 Javascriptが利用できない場合、どのような機能が「失われている」のかを設計する必要があります。シンプルに置く - アクセシビリティは、「フォームを送信する」のような主なタスクがJavascriptなしでも機能するときです。

また、HTMLの「エンハンストJavascriptエクスペリエンス」のためだけに意味する隠されたhtml要素を出力する必要があるのか​​、Javascriptを使用してオンザフライで「生成する」べきかも尋ねます。これは、別の用語「Unobtrusive JavaScript」につながります。

あなたのHTMLページにjavascriptのみのエクスペリエンスを意味するものは絶対に入れないようにしてください。また、JavaScript自体を使用してDOMに追加してください。そのアドバンテージは、より洗練された、より軽量で移植性の高いHTMLページを持つということです。

もうひとつの考え方は、「純粋」でなく「実用的」でないことです。つまり、最も効率的なことを意味します。余分なコードをHTMLページに直接追加してCSSで非表示にすることができる場合は、余分な100行のJavascriptコードを書き込まずに、さらに2時間を費やしてください。

私は個人的には、プログラマーとして、これらの決定を下す際に常にビジネス価値を考慮する必要があると考えています。「これを行うのにどれくらいの時間を費やす必要がありますか？」、「私は500万人または500万人のユーザーのためにウェブサイトを作成していますか？基本的には、マウスを殺すために手榴弾を使用しないでください;）