一个轻量级的js前端模版库：yunCloud
pnxx
9年前
yunCloud中文文档
一个轻量级的js前端模版库
yunCloud是一个高效、轻量[压缩完只有2k]、兼容javascript逻辑语法的前端 (Javascript) 模板引擎，使用yunCloud可以是你的代码实现数据和视图模型的分离(MVC)。 除此之外，它还可以在Node.js环境中运行（正在测试中）。
你可以在遵守 MIT Licence 的前提下随意使用并分发它。yunCloud 代码完全开源并托管在 Github 上。
yunCloud的引入
<script type="text/javascript" src="yunCloud.js"></script>* 使用方法
| 编译模板并根据所给的数据立即渲染出结果.
var tpl = yunCloud(tpl, data);
| 仅编译模版暂不渲染，它会返回一个可重用的编译后的函数.
var template_String = yunCloud(tpl); // 根据Data渲染得到html template_String(data);
| 注册/注销自定义函数，实现angularJS中的过滤器。在下边 <%= 变量 %> 中会有实例。
yunCloud.register('filterName', function); yunCloud.unregister('filterName');
* 语法
| <%= 变量 %>
<%= content %> <%= content|filter %>
var str = 'hello <%= name|filter %>'; yunCloud.register('filter', function (data) { return data + '_Filter'; }); var Str = yunCloud(str, {name: 'world'}); console.log(Str); // => hello world_Filter| <%- 变量 %>
这个是为了解决内容转义提供的功能。(此写法不支持Filter过滤器)
例如：需要在页面中显示<script>alert(1);</script>直接使用<%= 变量 %>会发现页面会执行此内容。如果使用<%- 变量 %>会对内容进行转义。在页面中是不会执行此内容，而是原原本本的在页面中输出。
var str = '<%- <script>alert(1);</script> %>' str = yunCloud(str)(); document.getElementById('ele').innerHTML = str; // 页面未弹出1| <%& javascript变量 %>
此命令会原样输出javascript变量
var tpl = '<% var name = "hello" %><div><%& name %></div>'; yunCloud(tpl)();
| <% javascript逻辑代码 %>
var tpl = [ '<% for(var i = 0;i<10;i++) {%>', '<div>这是第<%& i %>个div</div>', '<% } %>' ].join(''); yunCloud(tpl);让我们通过一个例子演示一下自定义函数的奇妙用法吧.
var jsonData = { linkList: [ {href: 'http://www.baidu.com', alt: '百度一下'}, {href: 'http://pan.baidu.com', alt: '百度网盘'}, {href: 'http://yun.baidu.com', alt: '百度云'} ] }; var tpl = [ '<ul>', '<% for(var i=0,len=linkList.length;i<len;i++){ %>', '<% var val = linkList[i]; %>', '<li><%= val|linkFilter %></li>', '<% } %>', '</ul>' ].join(''); var linkFilter = function (data) { return '<a href="' + data.href + '" alt="' + data.alt + '" />'; }; yunCloud.register('linkFilter', linkFilter); yunCloud(tpl, jsonData);