8000 GitHub - xzxf91/yunCloud: 一个轻量级的js前端模版库
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

xzxf91/yunCloud

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

yunCloud

yunCloud中文文档

一个轻量级的js前端模版库

yunCloud 是一个高效、轻量[压缩完只有2k]、兼容javascript逻辑语法的前端 (Javascript) 模板引擎,使用 yunCloud 可以是你的代码实现数据和视图模型的分离(MVC)。 除此之外,它还可以在 Node.js 环境中运行(正在测试中)。

8000

你可以在遵守 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);

// 

上面的方法会生成如下的html。接下来就可以按照开发者的应用场景进行更灵活的开发。

<ul>
  <li>
    <a href="http://www.baidu.com" alt="百度一下" />
  </li>
  <li>
    <a href="http://pan.baidu.com" alt="百度网盘" />
  </li>
  <li>
    <a href="http://yun.baidu.com" alt="百度云" />
  </li>
</ul>

About

一个轻量级的js前端模版库

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 80.1%
  • HTML 19.9%
0