基于fis支持quickling的smarty插件
插件支持两种渲染模式，
- 正常渲染模式
noscript，不需要前端库进行控制 - Pipeline渲染模式
bigpipe，需要前端库控制渲染
#####noscript Render#####
######before######
{%html%}
{%head%}
<title>This is a test</title>
{%/head%}
{%body%}
{%style%}
body {
background-color: #EEEEEE;
}
{%/style%}
{%script%}
console.log("foo, foo, foo");
{%/script%}
{%widget_block pagelet_id="pager"%}
{%widget name="widget/a.tpl"%}
<div>
//balabala
</div>
{%/widget_block%}
{%/body%}
{%/html%}#####after#####
<html>
<head>
<title>This is a test</title>
<style type="text/css">
body {
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div id="pager">
<div>
I'm `widget/a.tpl`
</div>
<div>
//balabala....
</div>
</div>
<script type="text/javascript">
!function() {
console.log("foo, foo, foo");
}();
</script>
</body>
</html>####bigpipe render == pipeline####
#####before#####
{%html mode="bigpipe"%}
{%head%}
<title>This is a test</title>
{%/head%}
{%body%}
{%style%}
body {
background-color: #EEEEEE;
}
{%/style%}
{%script%}
console.log("foo, foo, foo");
{%/script%}
{%widget_block pagelet_id="pager"%}
{%widget name="widget/a.tpl"%}
<div>
//balabala
</div>
{%/widget_block%}
{%/body%}
{%/html%}#####after#####
<html>
<head>
<title>This is a test</title>
<style type="text/css">
body {
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div id="pager">
</div>
</body>
</html>
<script type="text/javascript">
BigPipe.onPageReady(function() {
console.log("foo, foo, foo");
});
</script>
<code style="display:none;" id="__cnt_0"><!--
<div>
I'm `widget/a.tpl`
</div>
--></code>
<script type="text/javascript">
BigPipe.onPageletArrived({"id":"__elm_0",
"parent_id":"pager","html_id":"__cnt_0"});
</script>
<code style="display:none;" id="__cnt_1">
<!--
<div id="__elm_0"></div>
<div>
//balabala....
</div>
--></code>
<script type="text/javascript">
BigPipe.onPageletArrived({"id":"pager",
"html_id":"__cnt_1"});
</script>
<script type="text/javascript">
BigPipe.register({});
</script>如上源码(before)和运行后的代码(after)；
在smarty里面为了控制输出，使用插件代替几个html标签。
| 标签 | 插件 | |
|---|---|---|
| body | compiler.body.php | 确定JS的位置 |
| html | compiler.html.php | 初始化数据 |
| head | compiler.head.php | 确定css安放位置 |
| script | compiler.script.php | 收集内联脚本 |
| style | compiler.style.php | 收集内联样式 |
| title | compiler.title.php | 获取title，以便异步请求切换页面 |
| cdn | compiler.cdn.php | 动态cdn |
在正常模式渲染下，js和css加载的位置，css在head关闭标签前；js在body关闭标签前。
在pipeline渲染下，js和css的链接给前端加载器，前端负责加载。包括html内容，前端负责渲染。
- lib/FISResource.class.php 收集静态资源，算法演示
- lib/FISPagelet.class.php 初始化系统，输出模式控制
{%widget name="/widget/a.tpl"%}
{%widget name="/widget/a.tpl" pagelet_id="test_id" mode="bigrender"%} //支持bigrender
{%widget name="/widget/a.tpl" pagelet_id="test_id" mode="quickling"%} //支持wdiget异步化
{%widget name="/widget/a.tpl" pagelet_id="test_id" mode="quickling" group="test_group"%} // quickling + group- 动态cdn只对js，css资源起效，静态cdn和动态cdn不能同时在同一个资源引用上使用
- 异步组件是否添加cdn，取决于是否使用
mod-store.js，如果使用了则不加，如果没有使用则加。@TODO - 图片的cdn可以使用静态cdn domain.image
- 其他一些静态资源也使用静态cdn domain
OK, 各个插件的功能都已经说过了。现在说一下部署的问题
纯粹的FIS 2.0项目
把所有插件放到smarty的 plugin_dir下。
和fis 1.0共存？
把所有插件放到smarty的 plugin_dir下，并删除compiler.widget_block.php
2.0里面有一个插件和1.0有冲突，那就是compiler.widget_block.php，请删除2.0里面的.