-
Notifications
You must be signed in to change notification settings - Fork 49
Home
##介绍 jello : 服务端为JAVA + Velocity 的前端集成解决方案。发音为：['dʒeləu]
##功能概述
- 扩展fis，实现服务端为JAVA + Velocity 的前端集成解决方案。
- 内置tomcat服务器，完美支持java+velocity后端环境
- 扩展velocity插件，实现继承机制以及静态资源管理系统
- 本地json&jsp数据模拟，简化本地开发流程
- 实现fis其他所有前端开发功能
-
安装 nodejs&npm
-
安装 java
-
安装jello & lights
npm install lights -g npm install jello -g jello -v
##快速上手
-
下载 jello-demo
lights install jello-demo
-
编译预览
cd jello-demo jello release jello server start -
预览： localhost:8080/example/page/index
三条命令满足所有开发需求
jello --help
Usage: jello <command>
Commands:
release build and deploy your project
install install components and demos
server launch a embeded tomcat server
Options:
-h, --help output usage information
-v, --version output the version number
--no-color disable colored output- 具体命令使用请参考 fis-plus
##插件实现
jello扩展以下 html,head,body,script,style,require,uri, widget插件，实现组件化以及 静态资源管理系统。
需要创建以下几种directives。widget用来实现模块化。script、style、require、widget等用来收集js/css内容，通过head/body来控制js/css输出位置。
代替<html>标签，设置页面运行的前端框架，以及控制整体页面输出。
语法: #html ( [$framework[, $attrs]] )body #end
#html( "fis-site:static/js/mod.js" )
...
body content.
...
#end代替<head>标签，控制CSS资源加载输出。
语法: #html([$attrs]) body #end
#head()
<meta charset="utf-8"/>
#end代替<body>标签，控制JS资源加载输出。
语法: #body([$attrs]) body #end
#html("home:static/lib/mod.js")
#head()
<meta charset="utf-8"/>
#end
#body()
...
#end
#end代替<script>标签，收集使用JS组件的代码块，控制输出至页面底部。
语法: #script([$attrs]) body #end
#html("home:static/lib/mod.js")
#head()
<meta charset="utf-8"/>
## 通过script插件收集加载组件化JS代码
#script()
require.async("home:static/ui/B/B.js");
console.log('here');
#end
#end
#body()
...
#end
#end- 注意：script标签暂时不支持内部有#end标签嵌套
代替<style>标签，收集使用CSS组件的代码块，控制输出至页面头部。
语法: #style([$attrs]) body #end
#html("home:static/lib/mod.js")
#head
<meta charset="utf-8"/>
#style()
@import url(xxx.css);
body {
color: #fff;
}
#end
#end
#body
...
#end
#end- 注意：style标签暂时不支持内部有#end标签嵌套
通过静态资源管理框架加载静态资源。
语法: #require( $uri )
#html("home:static/lib/mod.js")
#head()
<meta charset="utf-8"/>
## 通过script插件收集加载组件化JS代码
#script()
require.async("home:static/ui/B/B.js");
console.log('here');
#end
#end
#body()
#require("home:static/index/index.css")
#end
#end调用模板组件，渲染输出模板片段。
语法: #widget( $uri )
#html("home:static/lib/mod.js")
#head()
<meta charset="utf-8"/>
## 通过script插件收集加载组件化JS代码
#script()
require.async("home:static/ui/B/B.js");
console.log('here');
#end
#end
#body()
#require("home:static/index/index.css")
#widget("home:widget/A/A.tpl")
#end
#end定位线上资源，允许跨模块(project)。
语法: #uri( $uri )
#html("home:static/lib/mod.js")
#head()
<meta charset="utf-8"/>
#end
#body()
#uri("home:static/css/bootstrap.css")
#end
#end提供类似 smarty 的模板集成机制
- layout.vm
<!DOCTYPE html>
#html("example:static/js/mod.js")
#head()
<meta charset="utf-8"/>
<meta content="" name="description">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
#require("example:static/css/bootstrap.css")
#require("example:static/css/bootstrap-theme.css")
#require("example:static/js/jquery-1.10.2.js")
#require("example:static/js/bootstrap.js")
#end ## end head
#body()
<div id="wrapper">
#block("body_content")
This is body.
#end
</div>
#end ## end body
#require("example:page/layout.vm")
#end ## end html- index.vm
#extends("layout.vm")
#block("body_content")
<h1>Hello Demo</h1>
#widget("example:widget/header/header.vm")
#script()
// var widgetA = require("example:widget/widgetA/widgetA.js");
require.async("example:widget/widgetB/widgetB.js", function(api) {
api.sayHelloWorld();
});
#end ## end script
#end ## end block
#require("example:page/index.vm")
#end##配置 参考fis配置
##更多资料