HTMLを消して、消えて

近年のWeb開発の傾向は、フレームワークとコンパイラー（だれかが望むなら、ビルダー）です。 javascript、css、プラグインライブラリなど、どこにでもあります。 Javascriptフレームワークはどこでもテンプレートを使用して、あらゆるものをレンダリングします。 しかし、それらにはすべて共通点が1つあります。それはHTMLです。 プロジェクトからプロジェクトコントロール+ c-コントロール+ cまでの場所で作成されたかさばる...このhtmlはすべて、常にスクリプトタイプ= "text / template"の形式の構造によってアタッチされた部分にあります。 一般的に、あたかも彼らがそれをどう扱うかをまだ理解していないかのように。



ある時点で、レイアウト全体をJSONに変換してみませんか。 コンパクトで、雄弁で、非常に読みやすいです（jsoneditoronline.orgのサービスを意味します）。 既製のライブラリを見て、このレイアウトはjsonで複雑なだけであり、誰も明白でシンプルなものではないことに気付きました。



そしてした-randr 。 ライブラリは小さく、スマートに動作します。



これは次のように機能します。同じ名前の関数の入力に特定のjsonを指定すると、完成したDOM（またはその一部）が出力されます。

var json = { node: 'div', content: 'Hello World' } document.body.appendChild(randr(json));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このjsonのrandrは、「Hello World」というテキストを含むdivを作成します。



それでも属性を渡すことができます：

 var json = { node: 'div', defaults: [ { type: 'class', data: 'super-class' }, { type: 'attr', data: 'some attr value' } ], content: 'Hello World' } document.body.appendChild(randr(json));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

いいね！ divにはclassおよびattr属性があります。 finomがプロパティを持つオブジェクトとして「デフォルト」を作成するように指示すると、よりコンパクトになります。 すぐに言ってやった：

 var json = { node: 'div', defaults: { class: 'super-class', attr: 'some attr value' }, content: 'Hello World' } document.body.appendChild(randr(json));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

はい、よりコンパクトになりました。 両方の道を去った。 ただし、別の方法で音量を下げることができます。 通常、テキストは（コンテンツとして）pタグで囲まれます。 それがまさに私たちがすることです、「div」ノードを削除します：

 var json = { defaults: { class: 'super-class', attr: 'some attr value' }, content: 'Hello World' } document.body.appendChild(randr(json));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

わかった！ デフォルトでは、「ノード」がなく、「コンテンツ」がテキストの場合、「p」を描画します。それ以外の場合、「div」があります。 はい、これらの悪名高いdivを書くことはできません。

 var json = { defaults: { class: 'super-class', attr: 'some attr value' }, content: { content: { content: '  ' } } } document.body.appendChild(randr(json));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2つのdivに囲まれた段落があることは明らかです。 はい、コンテンツは異なる場合があります。 たとえば、配列：

 var json = { defaults: { class: 'super-class', attr: 'some attr value' }, content: [ { content: ' 1  ' }, { content: ' 2  ' } ] document.body.appendChild(randr(json));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今では改善されていますが、他に追加できるものがあります！ 属性の継承：

 var json = { defaults: { class: 'super-class', attr: 'some attr value' }, implement: true, content: [ { content: ' 1  ' }, { content: ' 2  ' } ] document.body.appendChild(randr(json));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

implement：trueフラグが表示されたことがわかります。子要素に属性を渡すのは彼です。 しかし、子供たちは気分が悪く、この継承を受け入れたくないでしょう：

 var json = { defaults: { class: 'super-class', attr: 'some attr value' }, implement: true, content: [ { content: ' 1  ', extend: false }, { content: ' 2  ' } ] document.body.appendChild(randr(json));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでも明らかだと思います 負の拡張フラグは、属性の継承を許可しません。

スタイルクラスを除き、属性は子によって親を上書きする原則に従って継承されます。 それらは一緒に接着されています-「親クラス、子クラス」。



なぜ彼らはまったく継承することに決めたのですか？ 個人的には、「フロートライト、センター、バックグラウンドレッド」などのヘルパークラスに使用します。 あなたが思いつくことができると思います。 しかし、誰も使用を強制しません。



別のトリック-独自の「ノード」の作成があります。 つまり、巧妙に設計された要素の既製のブロック、または単に空白を繰り返すだけです。

 var myNodes = { askDelete: function(content){ var container = document.createElement('div'); var bYes = document.createElement('button'); var bNo = document.createElement('button'); bYes.innerHTML = content.yes; bNo.innerHTML = content.no; container.appendChild(bYes); container.appendChild(bNo); return container; } } var json = { defaults: { class: 'super-class', attr: 'some attr value' }, content: [ { content: ' 1  ' }, { node: 'askDelete', content: { yes: ', ', no: ' ' } } ] document.body.appendChild(randr(json, myNodes));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードでは、「myNodes」オブジェクトに魔法の「askDelete」ノードを作成し、そのオブジェクトをrandrの2番目のパラメーターに渡しました。 そしてjsonでは、このマジックノードを呼び出し、「コンテンツ」プロパティをパラメーターとして使用します。 したがって、独自のブランクを作成して、さまざまなプロジェクトに実装できます。



randrからDOMではなくテキスト形式のレイアウトを取得する必要がある場合は、randrに3番目のパラメーター「true」を追加するだけです。

 var myNodes = { askDelete: function(content){ var container = document.createElement('div'); var bYes = document.createElement('button'); var bNo = document.createElement('button'); bYes.innerHTML = content.yes; bNo.innerHTML = content.no; container.appendChild(bYes); container.appendChild(bNo); return container; } } var json = { defaults: { class: 'super-class', attr: 'some attr value' }, content: [ { content: ' 1  ' }, { node: 'askDelete', content: { yes: ', ', no: ' ' } } ] document.body.innerHTML = randr(json, myNodes, true);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それだけです このjsonレイアウトの実装は役に立つと思います。 少なくとも、必要なスペースが少なく、オブジェクトとしてAjaxに渡すことができます。