🤰🏾 🔇 👩🏽‍🍳 Laconic DOMライブラリ 🦓 ❗️ 🥉

Laconicは、JavaScriptを使用してDOMを生成するための直感的なアプローチを提供します。 LaconicのソースコードはGithubにアップロードされます。

標準のDOM APIを使用する場合、相互にネストされた単純なテーブルの要素を作成するには、次のコードが必要です。

コードの山

var firstTh = document.createElement('th'); firstTh.appendChild(document.createTextNode('first name')); var secondTh = document.createElement('th'); secondTh.appendChild(document.createTextNode('last name')); var firstTr = document.createElement('tr'); firstTr.appendChild(firstTh); firstTr.appendChild(secondTh); var firstTd = document.createElement('td'); firstTd.appendChild(document.createTextNode('Joe')); var secondTd = document.createElement('td'); secondTd.appendChild(document.createTextNode('Stelmach')); var secondTr = document.createElement('tr'); secondTr.appendChild(firstTd); secondTr.appendChild(secondTd); var table = document.createElement('table'); table.appendChild(firstTr); table.appendChild(secondTr); document.body.appendChild(table);

このようなコードは適切なものよりもはるかに広範囲に及ぶため、その外観から、その作業の結果を推測することは困難です。次に、同じテーブルを作成するためのより簡潔な方法を見てみましょう。

 $.el.table( $.el.tr( $.el.th('first name'), $.el.th('last name')), $.el.tr( $.el.td('Joe'), $.el.td('Stelmach')) ).appendTo(document.body);

Laconicは、既知のHTML要素ごとに1つのメソッドを$ .el名前空間に追加します。それらが起動されると、これらのメソッドには、可変長を持ち、これらのタイプの要素の子、文字列、数値、または配列で構成される引数のリストが渡されます。メソッドの最初の引数は、要素の属性を含むオプションのオブジェクトです。以下に例を示します。

 $.el.div({'class' : 'example'}, $.el.div('content'));

この例のコードは、次の要素構造を作成します。

 <div class='example'> <div>content<div/> </div>

非標準の要素を操作する場合、最初のパラメーターとして要素名を指定して、$ .elを直接呼び出すことができます。たとえば、次の例の結果は前の例と同じになります。

 $.el('div', {'class' : 'example'}, $.el.div('content'));

HTML要素からデザインを頻繁に作成する必要がある場合は、それらを特別な要素として登録できます。名前を付け、必要なコンテンツをthisに追加する関数を指定する必要があります。これは、ルートノードへの参照として機能するためです。以下に例を示します。

 $.el.registerElement('element', function(one, two) { this.appendChild($.el.div(one)); this.appendChild($.el.div(two)); });

そのような要素を登録することにより、それを挿入できます：

 $.el.element('first', 'second').appendTo(document.body);

この呼び出しにより、目的の要素構造が作成されます。

 <div class='element'> <div>first</div> <div>second</div> </div>

Laconic DOMライブラリ

More articles: