velocity模板引挚

vm模板

设计原则

让前端来写后端的vm模板，并且前端不需要搭建各种繁杂的后端环境，前后端以 .vm 为沟通桥梁，另外模板的数据源可以在项目开始前前后端约定之后生成JSON文件，从而使两个角色并行开发。

velocity模板引挚

velocity模板语法的javascript实现，Velocity是基于Java的模板引擎，应用广泛。Velocity模板适用于大量模板使用的场景，支持模板嵌套，复杂的逻辑运算，包含基本数据类型、变量赋值和函数等功能。

目录结构

• html/vm.html
• widget/vm/vm.json
• widget/vm/vm.vm

引用方法

{%widget name="vm" data='{"name":"myname"}'%}

注意data之间的单双引号，data内容必须为json类型

数据源分类

• data传参数据源，如 {%widget name="vm" data='{"name":"myname"}' %} 中的{"name":"myname"}
• 数据源文件，如widget/vm/vm.json的内容
• 两者优先级 "data传参数据源" > "数据源文件"，即data传参数据源和数据源文件，数据名称相同时，以"data传参数据源"为准

velocity基本语法

• 1."#"用来标识Velocity的脚本语句，包括#set、#if 、#else、#end、#foreach、#end、#iinclude、#parse、#macro等，如:

  #if($info.images)
  <img src="$info.images">
  #else
  <img src="noPhoto.jpg">
  #end
  

• 2."$"用来标识一个变量，如

  $i、$msg.errorNum
  

• 3."!"用来强制把不存在的变量显示为空白

  $!msg
  

• 4.注释，如：

  ## 这是一行注释，不会输出
  

velocity语法详解

具体更详细的语法可参考官网 如vm.vm

• 1.变量赋值输出

  Welcome $name to Javayou.com!
  today is $date.
  tdday is $mydae.//未被定义的变量将当成字符串
  

• 2.设置变量值,所有变量都以$开头

  #set( $iAmVariable = "good!" )
  Welcome $name to Javayou.com!
  today is $date.
  $iAmVariable
  

• 3.if,else判断

  #set ($admin = "admin")
  #set ($user = "user")
  #if ($admin == $user)
  Welcome admin!
  #else
  Welcome user!
  #end
  

• 4.迭代数据List ($velocityCount为列举序号，默认从1开始)

  #foreach( $product in $allProducts )
      <li>$velocityCount $product.title</li>
  #end
  

• 5.迭代数据get key

  #foreach($key in $myProducts.keySet() )  
      $key `s value: $myProducts.get($key)
  #end
  

• 6.导入其它文件,可输入多个

  #parse("vm_a.vm")
  #parse("vm_b.vm")
  

• 7.[todo多个文件用逗号隔开]

数据源举例

如vm.json

{
    "name":"vm name",
    "allProducts":[
        {
            "title": "风", 
            "from": "中国" 
        }, 
        {
            "title": "应用", 
            "from": "河北"
        }
    ],
    "myProducts":{
        "age":9,
        "from":"cn"
    }
}

转载:https://github.com/putaoshu/jdf/blob/master/doc/core_vm.md