blog

Velocity.js--タオバオのJSテンプレートエンジン

注意\n\n最新バージョンの確認\nnpm info バージョン\n\n\n特徴\nクライアントサイドとサーバーサイドの両方をサポート\n 構文はロジックが豊富で、ミニ言語を構成します。\n ...

Apr 26, 2025 · 7 min. read
シェア

銘記

velocityjsのパッケージ名をvelocity.jsからvelocityjsに変更すると、require("velocity.js")するのが面倒なので、velocityjsにバージョンアップした後、0.3.0から変更します。

最新バージョンをチェック

$ npm info velocityjs version 

Features

  • クライアントサイドとサーバーサイドの両方をサポート

  • 文法は論理性に富み、ミニチュア言語を構成しています。

  • 構文解析とテンプレートレンダリングの分離

  • ベロシティ構文の完全サポート

  • kissyモジュール・ローディング・メカニズムに基づく、テンプレート間の相互参照をサポートします。

  • 3つのヘルパー、ユーザーフレンドリーなデータシミュレーションソリューション

  • Vim Syntax

Install

npm 経由で。

$ npm install velocityjs 

Broswer Support

IE6+、クローム、その他のブラウザと互換性がtest case

ここからクリックして、ウェブサイドのベロシティ構文解析プロセスを体験してください。注意: ACEをコードエディタとして使用する場合は、高度なブラウザアクセスのみをサポートします。

velocity.jsのブラウザサイドスクリプトをパッケージ化するコマンドを実行します。

$ make parse  

coffeejsのインストールの下にcliする必要があり、一時的にkissy用にパッケージ化されたものを使用し、velocity.jsは、いくつかの一般的なecma5の機能を必要とするなど、node環境では、独自の機能であり、互換性のWeb側は、既存のクラスライブラリを解決するために与えられています。kissyのパッケージングなど、独自のクロスブラウザapiのセットを提供する必要があります:

//api map  
var utils = {  
  forEach : S.each,  
  some    : S.some,  
  mixin   : S.mix,  
  guid    : S.guid,  
  isArray : S.isArray,  
  indexOf : S.indexOf,  
  keys    : S.keys,  
  now     : S.now  
};  

構文のルールが複雑であるため、構文インタプリタのパフォーマンスを実行するために遅くなることがありますが速度構文は、html構造の解析と同様に、フォールトトレランスの高度な、構文構造解析操作と構文の実行の2つのプロセスの独立した最初のステップは、構文構造解析速度構文を記述する配列に戻るには、データと構文ツリーの使用の構文実行、テンプレートの計算。構文の実行は、データと構文木を使用して、テンプレートの最終的な結果を計算します。

ビルドを実行すると、underとunderの2つのファイルが得られますが、これらはそれぞれ独立しており、コマンドを実行することで構文解析処理をローカルで行うことができます:

構文解析とテンプレートのスプライシングを分離することで、構文ツリーのローカルコンパイルを容易にし、ウェブサイドのjs操作を削減します。テンプレートをローカルでコンパイルするというアイデアは、KISSYのxtemplateいます。

シンタックス・インタープリターはブラウザ側で実行することもできますが、そのような使い方はお勧めしません。

#velocityコマンドラインツールによるパッケージ化  
veloctiy --build *.vm  
veloctiy -b *.vm  

ソースコードのカタログにあるjsは、オフラインでコンパイルした後に得られるものの一部で、ここからダイレクトアクセスできます。

Public API

node_module

var Velocity = require('../src/velocity');  
 
//1. ダイレクトパース  
Velocity.render('string of velocity', context);  
 
//2. パーサーとコンパイルを使用する  
var Parser = Velocity.Parser;  
var Compile = Velocity.Compile;  
 
var asts = Parser.parse('string of velocity');  
(new Compile(asts)).render(context);  

context

は、vmの定義と一致するように、実行時にNULLにすることができるオブジェクトで、その属性は関数にすることができます。

On Broswer

1 . オフラインパッキングプログラムを使用します:

KISSY.use('velocity/index, web/directives', function(S, Velocity, asts){  
  var compile = new Velocity(asts);  
  S.all('body').html(compile.render());  
});  

2 . オンラインコンパイルを使用します:

KISSY.use('velocity/index, velocity/parse', function(S, Velocity, Parser){  
  var html = (S.all('#tpl').html());  
  var asts = Parser.parse(html);  
  var compile = new Velocity(asts);  
  console.log(compile.render());  
});  

両者の違いはアストの取得にあり、前者はアストを直接取得するのに対し、後者はまず構文解析を行う必要があります。

Syntax

構文の詳細については、ウェブサイトのドキュメントをご覧ください。

Directives

ディレクティブのサポート , , , , .これらの構文は部分的なものであり、あまり有用ではないと感じています。 ウェブ側では、kissy のモジュールローダーを使ってロードされます

macro

マクロは、システムマクロなどとユーザー定義マクロに分類され、vmの中で定義され、vmの中で定義する代わりにカスタムjs関数を使用することができます。システムマクロとカスタムマクロは区別されず、カスタム関数の呼び出しと実行が可能です。詳しくは#3を参照してください。

foreachはオブジェクトの走査速度で、jsとは違いがあり、javaのオブジェクトはマップであり、マップ内のキーのメソッドを通過する必要があり、foreachループはループ内のjsのforと同等の書き込みは、少し奇妙に感じます。foreachでは、使用できるオブジェクトがあり、この変数は、現在のループにスコープされます。

#foreach($num in [1..5])  
  index => $foreach.index   
  count => $foreach.count  
  #if (!$foreach.hasNext) end #end  
#end  
結果  
index => 0  
count => 1  
 
index => 1  
count => 2  
...  
index => 4  
count => 5  
end  

velocityの文字列評価はphpと似ており、二重引用符で囲まれた文字列内の変数は対応する値に置き換えられ、一重引用符で囲まれた文字列はそのまま返されます。また、変数の置換で二重引用符は、再び構文解析器を呼び出さなかったが、正規の、単純な参照の置換のサポートのみを使用するなど、サポートされていません。文字列の二重引用符の完全なサポートが必要な場合は、文法アナライザを何度も呼び出す必要があります。 パフォーマンスを考慮すると、基本的な引用符で基本的には十分であり、vm自体が強力な変数代入をサポートしているので、最初に値を代入して文字列に入れたり、文字列のスプライシングに加算を使用することができます。

Javaのオブジェクトは自動的に型を変換することはできませんので、Javaでは、二重引用符の使用が多いかもしれませんが、二重引用符は、型変換を行い、Webでは、jsはこれを必要としません。

速度

Usage: velocity [options] [file ...]  
 
Options:  
 
  -h, --help         output usage information  
  -V, --version      output the version number  
  -b, --build        build .vm file to js ast module of kissy  
 
Example:  
 
  # parse vm file  
  $ velocity a.vm   
 
  # parse vm file with json data  
  $ velocity a.vm  a.json  
 
  # build asts module of kissy  
  $ velocity *.vm  

Helper

ヘルパーは、主にvmデータのシミュレーション問題を解くための追加機能を提供します。

  • vm: => のすべての変数の構造を取得します。
  • vmバックプロパゲーションにより、速度ファイルと解析結果に基づいてデータ構造とコンテンツを計算します。
  • vmをjson構造に変換し、例えばhtmlタグを削除します:

jsonify ドキュメントissue #11

hello world $foo.name.  
=>  
{foo: { name: $foo.name }}  

License

(MITライセンス)

著作権 2012-2013 Eward Song

本ソフトウェアおよび関連文書の複製物を入手するいかなる者に対しても、無償で本ソフトウェアを使用することを許可します。本ソフトウェアおよび関連文書ファイルのコピーを入手したいかなる者に対しても、本ソフトウェアを無制限に使用、複製、変更、結合、公開、頒布、サブライセンス、および/または販売する権利、および本ソフトウェアが提供された者にこれを許可する権利を含め、本ソフトウェアを取り扱うことを無償で許可します。以下の条件に従って、本ソフトウェアのサブライセンス、および/またはコピーの販売、および本ソフトウェアが提供された人にこれを許可すること。

上記の著作権表示およびthis許可表示は、本ソフトウェアのすべての複製物または相当部分に含まれるものとします。ソフトウェア。

差出人:

Read next

研究者たちは、Github上で偽装されたビットコインを盗むトロイの木馬を発見した。

このマルウェアのオリジナルバージョンは、SafariとChromeのプラグインを装い、すべてのウェブ閲覧トラフィックを監視し、多くの人気ビットコイン取引サイトのログイン認証情報や、ビットコインウォレットのウェブサイトやログイン認証情報を盗むことに特化しています。\n最新の亜種はすでに以下をサポートしています

Apr 26, 2025 · 1 min read