000112019/03/05(火) 00:50:27.87ID:8a3k8XPA
よ？
000212019/03/06(水) 17:34:50.45ID:1pbO3u+T
まずはライブラリの名前を決めた
000312019/03/06(水) 23:20:38.72ID:1pbO3u+T
サンプル（１）
<!doctype html>
<html lang="ja" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../lib/biew.js"></script>
<script src="./test.js"></script>
</head>
<body biew:canvas="page" biew:id="body">
<section biew:id="section">
<h1 biew:id="heading1">この要素はHeading Element1です。</h1>
<h2>{{ heading2 }}</h2>
<h3 biew:id="heading3">薬草は<span>{{ heading3.gold }}</span>Ｇです。</h3>
</section>
</body>
<html>
000412019/03/06(水) 23:22:11.81ID:1pbO3u+T
サンプル（１）test.js
var page = new Biew.Canvas(); // <body biew:canvas="page">
page.draw = function(node){
page.body.setAttr("style", "background-color:#8888FF;"); // bg blue.
page.section.setAttr("style", "background-color:#CCCCCC; width:512px;"); // bg grey.
var h1 = page.heading1; // true === (h1 instanceof Biew.Element)
h1.setText("テンプレートエンジンのサンプル");
var h2 = page.heading2;
h2.setText("Hello World!");
h2.setAttr("style", "background-color:#FFFFFF;");
var h3 = page.heading3;
h3.setAttr("style", "color:white; background-color:black;"); // font white, bg black.
h3.gold.setText("8");
h3.gold.setAttr("style", "color:#66FF66;"); // font grean.
};
window.onload = function(){
Biew.init();
Biew.draw();
};
000512019/03/06(水) 23:25:49.76ID:1pbO3u+T
000612019/03/08(金) 00:59:23.45ID:kMybevyH
上記のサンプルを解説
1.
属性（biew:canvas）が付加された要素内を一括に再描画する
要素のクローンがfunction draw(node)に引数として渡され、
DOM操作されたクローンがHTMLFragmentとして差し替えられる
2.
属性(biew:id)の値と同じ名前の変数に、対となるHTMLElementが代入される
<h2>の{{変数名}}はTextNodeの代入ではなく<h1>と同じように、
要素を変数に代入する糖衣構文である
<h3>では<h1>と<h2>の例を組み合わせて文字列と属性を変更した
Vue, Reactみたいな双方バインディングを作りたかったけど簡単には作れないや
HTMLはやめてJSONなどJSで完結できるようにして
HTMLはやめるってHTML内にif else forとかの独自属性をごてごて埋め込むことかな？
id属性とか{{name}}でHTML内のタグの位置を特定するのだけは必要だと思う
そうじゃないとjQueryみたいにセレクタを使うことになるから
ちょっと構想を書いてみる。
例えばログインのユーザー入力でエラーが生じたとき、よく赤字でエラーメッセージをだす。
そのときよくあるテンプレートエンジンではHTML内にifを埋め込んでいたりする。
// JS
var js = {
loginErrorName : true, // booleanがfalseのときはhtmlタグが消える
loginErrorPass : false
};
// HTML
<p id="loginError">
<div framework:if="js.loginErrorName" style="color:red;">※そのアカウント名は存在しません。</div>
<div framework:if="js.loginErrorPass" style="color:red;">※パスワードが間違っています</div>
</p>
↓上記を下記のようにクラスライブラリ化してみるか？
// JS
var loginError = new LoginError();
loginError.loginErrorName = true;
loginError.loginErrorPass = false;
// HTML
<p>{{ loginError }}</p>
これだとタグライブラリを作るのに近い感じになりそう。
考えた結果、作り直すことにした
Vueの単一ファイルコンポーネントみたいなのを作ろうかと構想してたけど
まずはもっと簡単にjQueryみたいなことをやってみるぞ
jQueryのどこがテンプレートエンジンなんだ？
とっとと削除依頼出して回線切って首吊って死ねや
0016デフォルトの名無しさん2019/04/06(土) 23:26:17.28ID:+du4Jk0c
分かった。じゃあまたあとで書くが既存の名の知れたテンプレートエンジンを調査するところから始めてみよう
テンプレートにロジックを置くのはアンチパターン。
じゃなきゃロジックレステンプレートなんて言葉は生まれない。
まあifやforくらいは許されてる感あるが…
なぜロジックフルが忌避されてるかって？
答え：PHP
例えばsetInterval()でstyle.opacityを更新して要素を点滅させるとか、ViewModelに関する一切をエンジンに任せ、
テンプレートには<div framework:blink="speed:0.8">greeting</div>とかエンジンが提供する属性を埋め込むのが
よくあるテンプレートエンジンの方向性だよね
全然違う。それは「テンプレートエンジン」の仕事ではない。
じゃんけんのパーって、手のひら開いて極太ビーム出す必殺技だよね？と言っているに等しい。
トンチンカンにも程がある。
／）
／／／）
／,.=ﾞ''"／
／ i f ,.r='"-‐'つ＿＿＿_こまけぇこたぁいいんだよ！！
/ / _,.-‐'~／⌒ ⌒＼
／ ,i ,二ﾆ⊃（ ●）. （●）＼
/ ﾉ ilﾞフ::::::⌒（__人__）⌒::::: ＼
,ｲ｢ﾄ､ ,!,!| |r┬-| |
/ iﾄヾヽ_/ｨ"＼ `ー'´ ／
入力テンプレートとJSからHTML画面を出力するのがテンプレートエンジンＤＡ！