JavaScriptを使用したことがない場合、またはJavaScriptに少し精通している場合は、まず開始してください。そうしないと、Node.jsが暗い森のように見える場合があります。 実際にすぐにその言語を紹介し、また実用化のアイデアをもう一度示したいと思います。 小さなテンプレートパーサーの実装例を示します。これらはすべて、意図的に飾り気なく2つの小さなファイルに収まり、「仕組み」を明確かつ透過的に確認します。
したがって、概念は次のとおりです。次の形式のテンプレートで挿入を使用します。
<script type = " nodejs " > 100 + 235 ; </script >
FractalizeR's HabraSyntax Source Code Highlighter .
このコードは335を表示します。 なぜそのようなテクニックであり、例えば： <％= 100 + 235％>ではありませんか？ これは、まずこれらのタグに通常のJSコードが含まれるという考え方です。このようなデザインは、タンバリンによる犠牲の儀式なしに、エディターでの構文強調表示をサポートします。 JSコードを使用する理由 「結局、これは野barです！」まあ、個人的には1C-Bitrixテンプレートモデルが好きです。私の意見では、知っている言語で条件とサイクルを作成するだけで、毎回テンプレートエンジンの新しい構文を習得してそのタイトなフレームワークに入らないのは非常に便利です。 さらに、JSです！ 思いつきますか？ 通常、タイプセッターはJSを作成して記述し、ここで同じJSを挿入します。つまり、操作の最後に返すコードによってサーバー側でコードが置き換えられることを知っているかのように、引き続き作成します。 私にとって、これが最善の解決策です。
最後に、お気に入りのプラクティスに移りましょう。ステップごとにアクションの説明を含むコードを記述します。 最初に、スクリプト用のstart.jsとテンプレート用のtemplate.htmlの2つのファイルを作成します。 start.jsにさらにコードを記述します。 例が機能するために必要なビルトインNode.jsモジュールを接続します。
var http = require ( ' http ' ) ; //
var fs = require ( ' fs ' ) ; // ,
var vm = require ( ' vm ' ) ; // JS- ,
FractalizeR's HabraSyntax Source Code Highlighter .
Node.jsはApacheやその他のものを必要としないことに注意してください。PHPと比較すると、これは別の要素です。 サーバーはスクリプト内で直接立ち上がり、コンソールからスクリプトが実行されるときに作成されます。 サーバーを作成するための変数を宣言し、たとえばテンプレートにエクスポートするためのJSONデータ構造もすぐに宣言します。
var host = {
addr : ' 127.0.0.1 ' ,
port : 8070
} ;
var jsonExport = {
title : ' ' ,
list : [
{ name : ' ' , msg : ' ' } ,
{ name : ' ' , msg : ' ' } ,
{ name : ' ' , msg : ' ! ' }
]
} ;
FractalizeR's HabraSyntax Source Code Highlighter .
80番がApacheなどで占有されている場合に備えて、ポート8070に注意してください。 ポートが空いていることが確実な場合は、80番目を置くことができます。 127.0.0.1はローカルマシンであり、サーバーはそのフレームワーク内でのみ使用可能になりますが、現時点ではこれで十分です。
次に、ブラウザーからの要求ハンドラーを使用してサーバー自体を作成します。
var server = http . createServer ( function ( request , response ) {
//
} ) ;
FractalizeR's HabraSyntax Source Code Highlighter .
とりあえず、ハンドラーコードを調べて、すぐにローカルマシンのポート8070でリッスンを開始し、レポートをコンソールに送信しましょう。
server . listen ( host . port , host . addr ) ;
console . log ( ' : ' + host . addr + ' : ' + host . port ) ;
FractalizeR's HabraSyntax Source Code Highlighter .
それでは、ハンドラコードを説明します。
response . writeHead ( 200 , { ' content-type ' : ' text/html; charset=utf-8 ' } ) ;
fs . readFile ( ' ./template.html ' , function ( err , data ) {
//
} ) ;
FractalizeR's HabraSyntax Source Code Highlighter .
最初の行は、200番目のサーバー応答のヘッダーの戻り値です。alaOK、すべて正常です。 2番目のパラメーターであるオブジェクトは、残りのヘッダー（この場合はコンテンツタイプとエンコード）を渡します。 次の行は、テンプレートファイルとハンドラーの読み取りです。
そして、ご想像のとおり、start.jsスクリプトを完了するテンプレート処理コード：
var data = data . toString ( ) ;
var dataArr = data . match ( / \<script type=(nodejs|'nodejs'|"nodejs")\>([^\0]+?)< \/ script\> /gi m ) ;
for ( var i = 0 ; i < ( dataArr . length | | 0 ) ; i + + ) {
var code = dataArr [ i ] . replace ( / ^\<script([^\>]+)\>([^\0]+?)< \/ script\>$ /i m , ' $2 ' ) ;
data = data . replace ( / \<script type=(nodejs|'nodejs'|"nodejs")\>([^\0]+?)< \/ script\> /i m ,
vm . runInNewContext ( code , jsonExport ) ) ;
}
response . end ( data ) ;
FractalizeR's HabraSyntax Source Code Highlighter .
1行目 -受信したファイルコンテンツをregsで動作する行に変換します。 私はregについては書きません。何が起きているのかを理解するために、regの鍵に注意するだけです。
2行目 -処理し、実行結果に置き換える必要があるパーサーコードの見つかった部分の配列を作成します。 キーgim、gは複数の一致、iは大文字と小文字を区別しない、mは複数行の検索（個別の行での検索の代わり）。 regに関して、私がよく使うトリックの1つだけに注意したいのですが、それは役に立つかもしれません。 ドット文字は、改行を除くすべての文字をキャプチャします。この場合、改行も必要です！ そして、ポイントの代わりに[^ \ 0]を書きます。これは、null（void）に等しくないすべてを意味します。 おもしろい？ [^]だけでも可能ですが、JavaScriptでこれを使用すると、もちろんInternet Explorerはエラーをスローするため、最初の長いバージョンを使用します。
3行目 -ループ、見つかったパーサーコード呼び出しの配列を調べます。
ループの1行目 -現在のパーサーコードで、<script *> ... </ script>の間のコードを引き出し、コード変数に追加します。
ループの2行目と3行目 -データ変数で、現在のパーサー呼び出しを、特定のコンテキストで特定のコードを実行するvmモジュールを使用した実行結果に置き換えます。 この場合、このコンテキストの形式でJSON構造を渡しました。 キーgのないregは、コード全体を置き換えるため、現在の挿入でのみ機能することに注意してください。
start.jsファイルの準備ができました。ここに全体のビューを示します。
var http = require ( ' http ' ) ;
var fs = require ( ' fs ' ) ;
var vm = require ( ' vm ' ) ;
var host = {
addr : ' 127.0.0.1 ' ,
port : 8070
} ;
var jsonExport = {
title : ' ' ,
list : [
{ name : ' ' , msg : ' ' } ,
{ name : ' ' , msg : ' ' } ,
{ name : ' ' , msg : ' ! ' }
]
} ;
var server = http . createServer ( function ( request , response ) {
response . writeHead ( 200 , { ' content-type ' : ' text/html; charset=utf-8 ' } ) ;
fs . readFile ( ' ./template.html ' , function ( err , data ) {
var data = data . toString ( ) ;
var dataArr = data . match ( / \<script type=(nodejs|'nodejs'|"nodejs")\>([^\0]+?)< \/ script\> /gi m ) ;
for ( var i = 0 ; i < ( dataArr . length | | 0 ) ; i + + ) {
var code = dataArr [ i ] . replace ( / ^\<script([^\>]+)\>([^\0]+?)< \/ script\>$ /i m , ' $2 ' ) ;
data = data . replace ( / \<script type=(nodejs|'nodejs'|"nodejs")\>([^\0]+?)< \/ script\> /i m ,
vm . runInNewContext ( code , jsonExport ) ) ;
}
response . end ( data ) ;
} ) ;
} ) ;
server . listen ( host . port , host . addr ) ;
console . log ( ' : ' + host . addr + ' : ' + host . port ) ;
FractalizeR's HabraSyntax Source Code Highlighter .
そして、考え直すことなく、コード全体をtemplate.htmlファイルに書き込みます（レイアウトの説明は不要だと思います）。
<html >
<head >
<meta http-equiv = " content-type " content = " text/html; charset=utf-8 " >
<title > <script type = " nodejs " > title ; </script > </title >
</head >
<body >
<h1 > <script type = " nodejs " > title ; </script > </h1 >
<script type = " nodejs " >
var out = ' ' ;
out + = ' <ul>\n ' ;
for ( var i = 0 ; i < list . length ; i + + ) {
out + = ' \t\t<li><b> ' + list [ i ] . name + ' </b> ' + list [ i ] . msg + ' </li>\n ' ;
}
out + = ' \t</ul> ' ;
out ;
</script >
</body >
</html >
FractalizeR's HabraSyntax Source Code Highlighter .
このコードを自分で分析するのは簡単だと思います。 インセットは、JSONコンテキスト構造からのキー値を表示するだけです。 リストが下に表示され、最初にすべてがローカル変数に追加され、次に出力のために最後に戻ります。
それで、ちょっとした魔法で、コンソールに入力します。
node start . js
FractalizeR's HabraSyntax Source Code Highlighter .
http://127.0.0.1:8070にアクセスしてお楽しみください！ 実験を頑張ってください！
PSこれは単なる例であり、エラーハンドラーなども存在しないことを忘れないでください。この例は非常に最小限のものです。